User Interface

By default, Code On Time web applications use modal forms to display child data views and master data views without children, such as the one in the picture below. (In this example, the data fields in the category are floating in the form, instead of the traditional top-down presentation.)

The Project Wizard allows you to disable this functionality across all application pages.

Start the web application generator, click on the project name, and select Settings. Choose Features option. In the list on the left side of the page, select Form Properties. Uncheck “Show modal forms in master data views without children and in child data views”.

Press Finish to get to the Summary page. Select Refresh to have the generator recreate the pages without modal form views. If any of the pages have been modified, then the changes will not be applied, according to the refreshing conditions.

As this property does not apply to any specific controllers, none of them need to be selected for refresh. Press Refresh, and choose Yes to confirm the operation.

Continue to generate the application.

When the web application opens in your default web browser, navigate  to Customers page, select a customer, and view any order. The data views will drill into form view instead of being displayed in a lightbox style above the list of Orders.

You can also enable or disable presentation of child views on a data view level of individual pages.

The picture below shows the  Employees editForm1 view. By default, the fields are arranged in a vertical list. The category description is at the top of the form, the field labels are in the first column, and the data fields are in the second column. When you resize the page width, the column width will change.

Let’s use the Float property on the category to change the presentation of the data fields.

Start Code On Time generator, click on the project name, and press Design. In the bottom right corner of the Project Explorer, switch to the Controllers tab. Double-click on Employees / Views / editForm1 / c1 – Employees node.

Change the Floating property to “Yes”.

Press OK to save the category. On the tool bar, press Generate. Navigate to the Employees page, and select a record. The category is now much more compact. Each field has the label above it, floating around the category. When you resize the page, the fields will be rearranged to fit.

You can use a combination of floating and non-floating categories to optimize the user interface, such as the Order Details page shown below.

Floating data field categories can serve as a quick way to make a compact user interface without much effort. If you want more control over the placement of data fields, then use custom form templates or category-level templates.