User Interface

Labels
AJAX(112) App Studio(8) 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(177) 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(2) 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, March 31, 2012PrintSubscribe
Creating Static Lookup Items

In the Products table of Northwind sample database, there is a Reorder Level field. It is rendered as a textbox where users can type in any number to trigger the product reorder. If you look at the available filtering options of the Reorder Level field, you can see that there is a limited number of values stored in the database (0, 5, 10, 15, 20, 25, and 30).

Reorder Level field in Products screen presented as a textbox

Let’s change this field into a static dropdown list, and have the values displayed as words instead of numbers. For example, “0” will be Zero, “5” will be Five, and so on.

Open the web application generator, select the project name, and select Design. Switch to the Controllers tab in the Project Explorer, and double-click on Products / Fields / Reorder Level node. Change Items Style of Reorder Level field to “Drop Down List”, and press OK to save the field.

Reorder Level field changed to Items Style of 'Drop Down List'

Scroll to the top of the Designer, and click on the Items tab. On the action bar, select New | New Item.

Each item represents an option available in the dropdown list. The Value is stored in the database, while the Text is displayed to the user.

Enter the following values:

Value Text
0 Zero

New Item of '0' for Reorder Level field

Press OK to save the item. Using the same method, create more items with the following values:

Value Text
5 Five
10 Ten
15 Fifteen
20 Twenty
25 Twenty-five
30 Thirty

Static list of lookup items for Reorder Level field

In the top left corner, press Generate to generate the web app. A Preview window will open. Navigate to Products page, and you will see that the Reorder Level is now displayed with words. Edit a record, and the Reorder Level is now a static dropdown lookup.

Reorder Level field presented as a drop down list with words

The adaptive filter in the Reorder Level column also reflects the static values.

Drop Down options for Reorder Level with static items

On the action bar, select Report | PDF Document. You will see that Reorder Level displays the Text, and not the Value of the field.

PDF Report of Products displaying text in Reorder Level field

Saturday, March 31, 2012PrintSubscribe
Data View Refresh Interval

Certain types of applications require automatic refreshing of data presented on screen at predefined intervals. For example, applications supporting various surveillance and monitoring activities must pro-actively update the contents of the user interface screens.

Web browsers can be instructed to reload the fresh copy of the page from the server. Unfortunately the page flickering will be quite irritating if one has to stare at an application screen for a few hours every day.

Code On Time web applications offer smooth partial page refresh when users interact with the page.

For example, a data view can be refreshed without causing the entire page to reload if you click on the Refresh icon in bottom right corner of a grid view.

Data view refresh can be manually activated by clicking on the 'Refresh' icon in the bottom right corner of a grid view

A data view can also refresh itself if a user is not interacting with it for awhile.

Open your project in Designer and activate the properties of the data view on the page.

Master data view on the 'Products' page displayed in the Project Explorer

Set property Refresh Interval to 30. The duration of the interval is expressed in seconds.

Data view property 'Refresh Interval' displayed in Project Designer

Save the data view properties and generate your application. Navigate to the page and observe that the Refresh icon is briefly replaced with the progress indicator every 30 seconds.

Data view refresh is in progress as indicated by the 'wait' icon displayed in place of the 'Refresh' button in the bottom right corner of the grid view

If you actively interact with the data view, then the refresh interval is always restarted from the moment of the last interaction.

Saturday, March 31, 2012PrintSubscribe
Auto Select in Data Views

Complex master/detail pages in Code On Time web applications are hiding detail records until a specific master record is selected.

For example, this is the initial state of the Suppliers page in the Northwind sample. This page is capable of rendering a list of suppliers with their respective products. If a master supplier is not selected then the Products child data view is not visible.

The initial state of the master/detail page 'Suppliers' without a selected master record.

Users can click on a link in the first column to activate the Suppliers form view. This will result in the linked products displayed at the bottom of the page below the form.

You can configure an application data view to simulate a click on a link in the first column of the first row as soon as a page loads in the web browser.

Start web application generator, select the project name, and activate the Project Designer.

Select Suppliers / container1 / view1 in Project Explorer.

Page data view selected in the Project Explorer

Enable property “Auto Select First Row” under Presentation section of the data view properties and click OK to save the changes.

Data view property 'Auto Select First Row' in the Project Designer

Click Browse on the tool bar and navigate to the Suppliers page. The very first row in the master view of suppliers will be selected. Products from the selected supplier are displayed beneath the form view.

Property 'Auto Select First Row' causes automatic execution of the first action in the action group with the 'Grid' scope.

Setting the Auto Select First Row property to True causes automatic execution of the first action in the action group with the “Grid” scope.

The default configuration of this action group in shown next. As you can see the first row will be selected in the form view editForm1 if a user clicks on a link in the first column. The same effect is caused by Auto Select First Row property when page loads in the web browser.

Action group with scope 'Grid' expanded in Project Explorer

Right-click action group ag1 and select Show All Actions option.

Context menu of the action group in Project Explorer

Select the action group ag2 in Project Designer and click Up on the tool bar.

Changing the order of actions in the action group

The hierarchy of nodes in Project Explorer will change. Action a2 with command name Edit is now the first action in the action group ag1 with the scope of “Grid”. Note that this action does not have a view specified as the command argument.

Modified action group in Project Explorer

Click Browse button on the tool bar of Project Designer and navigate to the Suppliers page once more. The first row is selected and presented in edit mode.

'Edit' action executed without an argument on a page with the master data view that has its property  'Auto Select First Row' set to 'True'