Code On Time: User Interface

Blog

User Interface

Sunday, June 3, 2012Print Subscribe

Memo (long text) fields are presented as a simple multi-line text box by default. For example, Categories.Description field is rendered as a multi-line text box in the image below.

Rich text editing can be enabled when necessary.

Start the Project Designer. In the Project Explorer, switch to the Controllers tab. Double-click on Categories / Fields / Description field node.

At the top of the Designer window, switch to the Data Fields tab. Change the Text Mode property of all data fields:

Property	New Value
Text Mode	Rich Text

Save your changes, and click Browse on the tool bar.

When your default web browser opens, navigate to the Categories page and edit a record. Now rich text can be entered into the field. The application client library uses ASP.NET AJAX Rich Text Editor when rendering rich text fields.

Make some “rich” changes to the field value, and save the record. The field value will be displayed in grid view with the styles preserved.

On the action bar, select Report | PDF Document option, and open the downloaded file. The styling will be preserved in the generated report as well.

Labels: Reports, User Interface, Web Application Generator

Friday, June 1, 2012Print Subscribe

Configure a Static Text Box

In some situations, it may not be wise to allow the user to change certain fields, even though they are updatable. For example, when creating an order detail in a Northwind web application, the Unit Price should be copied from the selected Product. Users should not be allowed to alter the Unit Price.

If you mark the field as read-only, then it will not be written to the database when the record is saved. Change the Text Mode property of the field to “Static” if you don’t want the users to edit the value but still want the field value saved to the database.

Start the Project Designer. Double-click on Customers / Order Details / container1 / view1 / createForm1 / c1 – New Order Details / UnitPrice data field node.

Change the following property:

Property	New Value
Text Mode	Static

Press OK to save the data field. Next, we’ll need to copy the Unit Price from Products to Order Details.

In the Project Explorer, double-click on Customers / Order Details / container1 / view1 / createForm1 / c1 – New Order Details / ProductID / ProductID field node.

Make the following change:

Property	New Value
Copy	UnitPrice=UnitPrice

Press OK to save the field. On the tool bar, press Browse.

When the web application opens in the browser, navigate to Order Details page and create a new record. The Unit Price data field is no longer editable by the end user.

Select a Product using the Product Name lookup. The Unit Price will be copied over into the order detail.

Labels: Business Rules/Logic, User Interface, Web Application Generator

Friday, June 1, 2012Print Subscribe

Configuring a Lookup Window

All foreign key fields are assigned the Lookup item style by default. In edit mode, lookups are rendered as a link within a textbox. The next screenshot shows Customer Company Name and Employee Last Name lookups.

If you click on the link, the lookup modal window will open.

The lookup is a full featured Code On Time grid, with sorting, adaptive filtering, Quick Find, and Advanced Search available for use in order to help you find the right lookup item.

When you click on an item in the grid, that item will be inserted into the field. You can use the Eraser icon to the right of the Lookup link to clear the field.

When the field is cleared, the text (select) will be displayed.

You can click on the New Record icon to the right of the textbox to create a new lookup item in a modal create form.

Labels: Database Lookups, User Interface, Web Application Generator