Web Application Generator

Fields configured with Lookup, Auto Complete, and Drop Down List item styles allow the user to type in a value and display a list of results. The text displayed in the results is configured via the Data Text Field property. Users can quickly enter a search term and find the field value they are looking for using lookups.

However, it is possible that the text displayed in the results can be non-unique. For example, there may be multiple customers with the same name, but from different locations. How can the user determine which value to select?

If multiple fields are borrowed from the lookup controller, the user interface will display these borrowed values in order to help the user determine the correct option. The example below shows duplicate customers displayed in a lookup of type “DropDownList”.

Let’s borrow the City and Country fields from the Customers table into Orders form in the sample Northwind project.

Start the app generator, click on the project name, and press “Model”. Select “Orders” model from the list.

Check the box next to “City” and “Country” columns in the Customers table.

Press “Save” to save the model. Then, press “Finish”, and confirm the popup to refresh the project. Then, press “Generate” to regenerate the app.

Navigate to the Orders page, and create a new record. Notice that the two new fields are displayed as read-only in the form. Enter a duplicate customer name, and the City and Country will be displayed next to the duplicate values.

Selecting one of the customers will populate the Company Name in the lookup input, and copy the City and Country in the following borrowed fields.

This feature is automatically enabled when duplicate values are detected. The fields defined in the Copy property of the lookup field will be used. If duplicates are a common occurrence on a particular lookup, it is recommended to use a different display value, or create a calculated field in the lookup controller that can be specified as the Data Text Field. The full lookup grid can also be viewed by activating the arrow icon next to the field.

Data fields displayed in forms of applications created with Code On Time are organized in categories. By default, all data fields are rendered top down in a single category. It is possible to use categories to enable the rendering of data fields in multiple columns, tabs, a wizard, or a combination thereof.

Each category is rendered with a bar at the top displaying the header text. When the user presses on the bar, the category will collapse or reveal itself. The categories’ Description property is displayed underneath the collapsible bar. Data fields belonging to the category are rendered in row containers, with the label on the left side, and the input control on the right side.

Let’s configure the Employees page of the Northwind sample project into multiple categories, and customize the descriptions for each category. We will display the field values in the category descriptions in order to provide context to the user.

Start the Project Designer. In the Project Explorer, switch to the Controllers tab. Double-click on “Employees / Views / editForm1 / c1 – Employees” category node.

Make the following changes.

Press OK to save. Next, create a new category by right-clicking “Employees / Views / editForm1” and press New Category.

Configure as follows and press OK to save the category.

Create another category with the following properties. Notice the use of field names wrapped in curly brackets. The text will be updated at runtime with the field values.

Finally, use drag & drop to reposition the data fields in the correct categories, as shown in the picture below.

On the toolbar, press Browse to generate the application. When the application comes up in your browser, navigate to the Employees page and select a record. Notice that the data fields have been rendered in two tabs, with the first tab displaying two columns. Each category displays the specified category description.

Switching to the second tab will display the “Address Info” category. Notice that the fields in curly brackets have been replaced with the field values.

Note that the same functionality is available in Desktop user interface.

In custom form templates, category descriptions can be added by inserting a row container, with a description control inside. Field values can be displayed by using a “field” control marked as read-only.

<div data-container="collapsible" data-header-text="Address Info">
    <div data-container="row">
        <div data-control="description">
            Where does 
            <span data-control="field" data-field="FirstName" data-read-only="true"></span>
            <span data-control="field" data-field="LastName" data-read-only="true"></span>
            live ?
        </div>
    </div>
    ...
</div>