User Interface

Labels
AJAX(112) App Studio(9) Apple(1) Application Builder(245) Application Factory(207) ASP.NET(95) ASP.NET 3.5(45) ASP.NET Code Generator(72) ASP.NET Membership(28) Azure(18) Barcode(2) Barcodes(3) BLOB(18) Business Rules(1) Business Rules/Logic(140) BYOD(13) Caching(2) Calendar(5) Charts(29) Cloud(14) Cloud On Time(2) Cloud On Time for Windows 7(2) Code Generator(54) Collaboration(11) command line(1) Conflict Detection(1) Content Management System(12) COT Tools for Excel(26) CRUD(1) Custom Actions(1) Data Aquarium Framework(122) Data Sheet(9) Data Sources(22) Database Lookups(50) Deployment(22) Designer(178) Device(1) DotNetNuke(12) EASE(20) Email(6) Features(101) Firebird(1) Form Builder(14) Globalization and Localization(6) How To(1) Hypermedia(2) Inline Editing(1) Installation(5) JavaScript(20) Kiosk(1) Low Code(3) Mac(1) Many-To-Many(4) Maps(6) Master/Detail(36) Microservices(4) Mobile(63) Mode Builder(3) Model Builder(3) MySQL(10) Native Apps(5) News(18) OAuth(9) OAuth Scopes(1) OAuth2(13) Offline(20) Offline Apps(4) Offline Sync(5) Oracle(11) PKCE(2) Postgre SQL(1) PostgreSQL(2) PWA(2) QR codes(2) Rapid Application Development(5) Reading Pane(2) Release Notes(184) Reports(48) REST(29) RESTful(29) RESTful Workshop(15) RFID tags(1) SaaS(7) Security(81) SharePoint(12) SPA(6) SQL Anywhere(3) SQL Server(26) SSO(1) Stored Procedure(4) Teamwork(15) Tips and Tricks(87) Tools for Excel(3) Touch UI(93) Transactions(5) Tutorials(183) Universal Windows Platform(3) User Interface(338) Video Tutorial(37) Web 2.0(100) Web App Generator(101) Web Application Generator(607) Web Form Builder(40) Web.Config(9) Workflow(28)
Archive
Blog
User Interface
Saturday, June 30, 2012PrintSubscribe
Auto-Complete with Matching Anywhere

Code On Time applications feature auto complete of field values in multiple elements of the user interface. By default, auto complete will match any field values that begin with the provided sample text.

The following example of “begins with” matching in the Advanced Search Bar shows last names that begin with “le”. Only one data row with value “Leverling” in the Last Name field has been matched.

Entering 'le' in Last Name search field will find only one data row with a matching value in the Last Name column

Let’s configure the field to perform auto complete matching in any part of the field value.

Start the Project Designer. In the Project Explorer, double-click on Employees / container1 / view1 / grid1 / LastName data field node.

LastName data field of grid1 of Employees on the Employees page.

Change the Search Options property:

Property New Value
Search Options $autocompleteanywhere

Press OK to save the data field. On the toolbar, select Browse.

When the web application loads, activate the Advanced Search Bar on the Employees page. The auto complete for Last Name will now match the search parameter “le” with two data rows that have “Fuller” and “Leverling” values in the column.

Entering 'le' in the Last Name field will match two values.

Monday, June 25, 2012PrintSubscribe
Maximum Value Count

Field samples, multi value filters, and search bar auto complete entries display up to 200 related lookup items.

Supplier Company Name multi value select with 29 items available for selection.

Let’s change the maximum number of lookup items displayed for Supplier Company Name of Products controller.

Start the web application generator. Click on the project name, and select Develop option. Visual Studio will start.

In the Solution Explorer, right-click 0n ~\App_Code folder, and select Add New Item.

Add New Item to AppCode folder of your web application. 

Select Class item from the list, and press Add.

Create a class in Microsoft Visual Studio.

Replace the entire sample content of the file with the following:

C#:

using System;
using System.Web;
namespace MyCompany.Data
{
    public partial class DistinctValueRequest
    {
        public override int MaximumValueCount
        {
            get
            {
                if (Controller == "Products")
                {
                    if (FieldName == "SupplierCompanyName")
                        return 10;
                    else
                        return 20;
                }
                return base.MaximumValueCount;
            }
            set
            {
                base.MaximumValueCount = value;
            }
        }
    }
}
Visual Basic:
Imports Microsoft.VisualBasic
Imports System
Imports System.Web

Namespace MyCompany.Data
    Partial Public Class DistinctValueRequest
        Public Overrides Property MaximumValueCount As Integer
            Get
                If Controller = "Products" Then
                    If FieldName = "SupplierCompanyName" Then
                        Return 10
                    Else
                        Return 20
                    End If
                End If
                Return MyBase.MaximumValueCount
            End Get
            Set(value As Integer)
                MyBase.MaximumValueCount = value
            End Set
        End Property
    End Class
End Namespace

This class will instruct the application framework to use 20 distinct value samples for all fields in the Products controller with the exception of Supplier Company Name. The limit for Supplier Company Name is 10. No other controllers will be affected.

Save the class. On the keyboard, press Ctrl+F5 to start the web application. Navigate to the Products page.

Activate the Supplier Company Name header dropdown. Only the first 10 items will be available for selection.

10 samples displayed for Supplier Company Name filter.

Open the advanced search bar, and activate the Auto Complete dropdown for Supplier Company Name. Only 10 items will be displayed at one time.

Advanced Search Bar auto complete dropdown only shows 10 items.

The Multi Value Filter window will only display 10 items.

Supplier Company Name multi value filter only shows 10 items.

Other fields in the Products controller will display 20 distinct value samples, such as the Quantity Per Unit header dropdown.

Quantity Per Unit distinct value sampleshow only 20 items.

Monday, June 25, 2012PrintSubscribe
Formatting Data Fields

The Data Format String is used to format the value of a field before it is presented to the end user. It can be specified on the field itself, and will be applied to all instances of the field bound to the views (data fields). If it is specified on the data field level, then only that data field will use the data format string.

The Unit Price data fields in the Products controller are assigned the currency data format string of “c” by default.

On the Products page, the Unit Price field uses a standard currency data format string.

Let’s  assign the data field on the grid view a different format string.

Start the Project Designer. In the Project Explorer, double-click on Categories / Products / container1 / view1 / grid1 / UnitPrice data field node.

Unit Price data field in grid1 view on the Products page.

Change the Data Format String property:

Property New Value
Data Format String c4

Press OK to save the data field. On the toolbar, press Browse, and wait for the web application to load in your default browser.

Navigate to the Products page. The Unit Price data field on the grid view will be formatted with four numbers after the decimal place.

Unit Price data field in grid view shows 4 numbers after the decimal place.

Select a record. The Unit Price data field on the edit form will be formatted with the standard two numbers after the decimal place.

The Unit Price data field in the edit form uses the standard currency data format string.

Continue to Format On Server