User Interface

Icons can be assigned to views in order to better communicate the purpose of a particular form at a glance.

By default, view headers will display the view label, description, and the first field value. The background will be a solid color.

Scrolling down will move the header text to the toolbar.

Let’s assign an icon to the views of Customers controller in the Northwind sample app.

Switch back to the Project Designer. In the Project Explorer, switch to the Controllers tab. Double-click on “Customers / Views / editForm1”.

Icons can be defined by specifying the icon library and the icon name. Spaces are replaced with dashes.

Assign an icon to the view in the Tags property, and press OK to save.

Double-click on “Customers / Views / createForm1”. Assign an icon to this view as well.

On the toolbar, press Browse. Navigate to the Customers page, and select a customer. The header will display the new icon on the left side. The background will show a large greyed out version of the same icon.

Scrolling down will reveal a smaller version of the icon.

Close the form, and press the New icon. The create form will display the assigned icon as well. The picture below shows the create form on a smaller device or window.

In Touch UI apps, icons can be assigned to pages in order to convey additional meaning to the users. Up to five page icons will be displayed in the Quick Launch area at the bottom of the sidebar.

Let’s customize the default Northwind app. Initially, this app does not have any icons assigned to pages. Only “Apps” and “Settings” icons are displayed in the Quick Launch area.

Pressing the “Apps” button will reveal a site map with no icons.

Let’s assign some icons to the primary pages in our app to help the user find them quickly.

Start the Project Designer. In the Project Explorer on the right side of the screen, double-click on Customers page node.

Icons can be defined by specifying the icon library plus the icon name. Replace spaces with dashes.

Let’s assign the “group” icon from the Material Icons library.

Press OK to save the page. Double-click on the “Orders” page, and make the following change.

Save the change, and double-click on “Products” page to set an icon.

On the toolbar, press Browse. When generation is complete, the app will open in the default browser. Notice that the first three page icons are displayed in Quick Launch. If the “apps” button is disabled or moved to the toolbar, an additional page icon will be displayed. If “Settings” button is disabled, another icon slot will become available.

Notice that some themes will emphasize the Quick Launch area if at least one page icon is defined. Page icons will also be displayed in toolbar menu dropdowns.

Pushing the hamburger button in the top left corner will expand the sidebar. The Quick Launch area will rotate to fit horizontally.

Press the “Apps” button to reveal the site menu. Notice that pages with an assigned icon will be placed in a grid at the top of the menu.

Pressing “More” will reveal the full site map. Icons will be displayed next to their assigned page.