Blog

Labels
AJAX(112) App Studio(7) 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(183) 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
Wednesday, May 7, 2014PrintSubscribe
Configuring a “List” Presentation Style in Apps With Touch UI

Compare the design and presentation style of a supplier list in an app with Touch UI.

The grid view grid1 contains ten data fields.

Configuratoin of 'grid1' view in data controller 'Suppliers' displayed in Project Designer.

The grid view is presented in ‘List’ style on iPhone  with only first three fields fully visible.

Only three fields of grid view of suppliers are fully visible on iPhone 5.

The same supplier list shows first five fields defined in grid1 when displayed on iPad Air. Field names  and values of a selected supplier record are displayed in the summary on the sidebar.

The default presentation of Suppliers list on iPad Air.

The iPhone version of the list seems to display more than it can fit, while the iPad version does not display enough fields in the empty space.

In fact, both devices display only the data fields marked to be shown in the summary. Application generator configures the first five fields of the grid view grid1 as “Show In Summary” in all data controller, when the baseline application is constructed.

First five fields of all data controllers in the baseline app constructed by Code On Time are marked to be displayed in the summary.

Therefore only first five fields are rendered in the views with “List” style by Touch UI.

Touch UI also offers a precise method of controlling presentation of data in lists through data field tags. The tags may include numerical suffixes to create a responsive presentation on any device. It is important to know the logical display width of list item cards when configuring such tags.

Tag Purpose
item-heading Specifies that the field must be displayed as a heading in a list item.
item-aside Makes the field displayed on the right side of a list item opposite to the heading.
item-count Turns item value into a bubble displayed on the the right side of a list item.
item-desc Item is displayed below the heading with the value on top and the field label below the value.
item-descNN Performs the same function as “item-desc”. The numeric suffix must be divisible by five to indicate the minimal list item width expressed in logical display elements. If the current display width of the list item matches or exceeds the suffix, then the field is visible.
item-para Causes the flow of data fields marked as “item-desc” to restart in the next row. Must be used along with “item-desc” tag.
item-labelNN Allows controlling if the field label is displayed next to the field value. Must include a numeric suffix divisible by five to indicate the minimal list item width expressed in logical display elements. If the current display width of the list item matches or exceeds the suffix value, then the field label is visible.
item-thumb Forces the field to be displayed as a thumbnail of a list item. Must be used with On Demand fields only.

Tagging any data field in a grid view with an “item-“ tag will disable the default list construction based on “Show In Summary” property of data fields.

The following reference uses Suppliers controller from Northwind sample as an example.

item-heading

If an explicit item-heading tag is not specified, then the first visible field of a grid view will be configured as list item heading.

Specify item-heading tag for Suppliers / Views / grid1 / CompanyName data field on Controllers tab of Project Designer.

The item data card is now reduced to a single field value.

Data card with a field tagged as 'item-heading' in an app with Touch UI.

List with a field tagged as 'item-heading' in an app with Touch UI.

item-aside

Specify item-aside tag for Suppliers / Views / grid1 / Phone data field on Controllers tab of Project Designer to display the phone number on the opposite side of the heading in a data card.

Data card with the fields tagged as 'item-heading' and 'item-aside' in an app with Touch UI.

List with the fields tagged as 'item-heading' and 'item-aside' in an app with Touch UI.

item-count

As an alternative to item-heading consider using item-count. This will display the data field in  bubble on the right side of the data card.

Specify item-count tag for Suppliers / Views / grid1 / Phone data field on Controllers tab of Project Designer to display the phone number as a bubble in a data card.

Note that bubble is centered vertically in a list item.

Data card with the fields tagged as 'item-heading' and 'item-count' in an app with Touch UI.

List with the fields tagged as 'item-heading' and 'item-count' in an app with Touch UI.

item-desc

Specify item-desc tag for Suppliers / Views / grid1 / ContactName and Suppliers / Views / grid1 / ContactTitle data fields on Controllers tab of Project Designer to display both fields in a row under the heading of list item.

A field label is displayed under the value of the field.

Data card with the fields tagged as 'item-heading', 'item-desc', and 'item-aside' in an app with Touch UI.

List with the fields tagged as 'item-heading', 'item-desc', and 'item-aside' in an app with Touch UI.

If you do not wish a label to be visible, then also specify responsive tag item-label with a large value a suffix. For example, if you enter item-desc, item-label100 as tags then both description fields will be rendered without a label on most devices. Labels will be visible only if the width of a list item is at 100 logical elements or wider. Remember that the suffix value must be divisible by five.

Data card with the fields tagged as 'item-heading', 'item-desc', and 'item-aside' in an app with Touch UI. Responsive tag 'item-label100' hides the label on screens with width less than 100 logical elements.

item-para

Additional descriptive fields can be started in the next row of the list item data card.

Enter a combined value item-para,item-desc as a tag of data field Suppliers / Views / grid1 / Address. Enter item-desc as tags for the data fields City, Region, PostalCode, Country and Fax of the grid view grid1.

Data card with the fields tagged as 'item-heading', 'item-desc', 'item-para', and 'item-aside' in an app with Touch UI.

List with the fields tagged as 'item-heading', 'item-desc', 'item-para', and 'item-aside' in an app with Touch UI.

Responsive Descriptions and Labels

Application will display all data fields configured to be a part of list item data card. If the field value does not fit, then it will be visible either partially or hidden completely. End users can change device orientation or browser window size to reveal or hide data fields in lists.

A list of suppliers displayed on iPhone 5 in landscape orientation has all field values visible in an app with Touch UI. The app has been produced with Code On Time app generator.

If you prefer to minimize partial display of field values and labels, then consider applying numeric tag suffixes representing the minimal item width that allows a field and/or its label to be visible. The display width is expressed in logical elements divisible by five. Press Ctrl+Shift and double click a data card to find the list item width in a desktop browser.

For example, the following screen shot of iPhone has City, Region, PostalCode, Country, and Fax data fields partially visible or not visible at all when the device has a portrait orientation.

An example of partially visible data fields displayed in a grid view with 'List' style in an app with Touch UI.

Specify item-desc30 tag for these fields to ensure their visibility only on a wider screen. This will result in a cleaner presentation in portrait orientation.

Grid view has an improved presentation in 'List' style on iPhone 5 after apply responsive 'item-desc30' tag to several fields in a web app with Touch UI.

Consider using various suffixes to ensure a better presentation in desktop web browsers where width may vary significantly.

item-thumb

If an on-demand field is storing images, then consider configuring the field in a grid view to be displayed as a thumbnail in the list item data card. Simply enter item-thumb in Tag property to indicate the purpose of the data  field in the list.

For example, the sample at http://northwind.cloudapp.net is configured to display the photo of an employee when a grid view is presented in “List” style.

An example of a data field tagged as 'item-thumb' in an app with Touch UI.

An example of 'List' style presentation that contains a thumbnail in an app with Touch UI.

Forcing List Presentation by Default

Grid views of apps with Touch UI automatically switch to “List” presentation style on mobile devices and present as “Grid” on desktop devices. The exception from this rule is a grid view with a data field tagged as item-thumb. The default presentation style of a grid view is “List” in that case.

Here is the same grid view Suppliers  / Views / grid1 that was configured in the previous steps. This screen shot shows Google Chrome browser with a responsive “Grid” presentation style of data.

Responsive 'Grid' presentation style in a desktop browser in an app with Touch UI created with Code On Time.

Application users can switch data presentation style from “Grid” to “List” by selecting the corresponding option on the sidebar. This selection will remain permanent until the user decides to have a different presentation style.

Developers can request the “List” presentation of a grid view on all devices by default. Specify display-style-list in the Tag property of data view Region / Suppliers / container1 / view1. This will force suppliers to be displayed as a “List” on all types of devices by default.

A two column list of items in a web app with Touch UI.

Presentation style “List” may display items in one, two, or three columns. The number of columns depends on the screen width and device orientation.

A grid view can also be configured to present as a list with one column, which may work well with a large number of fields. Specify display-style-listonecolumn in the Tag property of the data view to enable this presentation style on all devices by default.

A single column list of items in a web app with Touch UI.

Configuring Lists with “Tools for Excel”

Code On Time comes with a free productivity feature called Tools for Excel. If you need to change tags on a large number of fields, than consider taking advantage of this feature as an alternative to Project Designer.

Here is the screen shot of tags that were configured for this tutorial.

Code On Time Tools for Excel allows rapid configuration of apps with Touch UI.

Tuesday, May 6, 2014PrintSubscribe
Finding Display Width of a List Item

Data lists are composed of items that are rendered as cards. Developers specify the contents of a card by configuring the data field tags of a controller grid view.

Sample item card in a list of an app with Touch UI created with Code On Time app generator.

Apps with Touch UI can be displayed on desktop and mobile devices with various screen sizes. For example, the card sample shown above was taken from this screenshot of a supplier list on iPad Air.

A three-column list of suppliers in an app with Touch UI displayed on iPad Air. The app has been created with Code On Time generator.

Here is another sample that shows a card of a product category in Task Assistant displayed on iPhone.

Task Assistant shows available actions in an app with Touch UI produced with Code On Time.

Developers can test and fine-tune the responsiveness of a data card presentation while browsing an app in a desktop browser.

Resize the browser window as needed, press Ctrl+Shift keys on the keyboard and double click any item card in a list. A hint with the logical width of a list item will be displayed.

Display width of a list item displayed when user performs Ctrl+Shift+DblClick in an app with Touch UI displayed in a desktop web browser.

Display width of  a list item depends on the available screen width in apps with Touch UI created with Code On Time generator.

Take a note of the fields that do not fully fit on screen and apply tag item-descNN, where NN is replaced with the item width that works with your data and labels. The field and its label will be visible only if the width of a list is equal or greater than the numerical suffix. 

Tuesday, May 6, 2014PrintSubscribe
Full Screen Mobile Apps, Responsive Grid, etc.

Code On Time release 8.0.5.0 introduces numerous enhancements in Touch UI that brings closer our goal of delivering a new generation of a responsive user interface that works great on both mobile and desktop devices. Your line-of-business web apps will look great, now with an option to display a full screen presentation on mobile devices delivering close-to-native performance.

A web app displayed in full screen mode on iPad Air. The app has been created with Code On Time app generator.

A responsive grid view is now also available providing a responsive “table” presentation of data on any device. Application intelligently hides and reveals grid columns depending on the available screen width. Developers control the logic of field selection by configuring the list presentation of data.

A repsonsive grid in a web app with Touch UI shows a context menu of actions that can be applied to the selected row and entire data set. Application has been created with Code On Time app generator.

End users can switch between grid and list presentation by selecting a corresponding option on the sidebar on in the “view menu” item. Open the context menu of grid or list view to select “view menu” item when sidebar is not visible. It will be the first option displaying the name of the data set and number of records.

Note that future releases will also offer a data sheet view. This type of view will allow viewing all fields defined in the application with ability to scroll data horizontally and modify data in-place.

The following features and enhancements were introduces in this release:

  • Folder “Mobile” has been replace with “touch” in the source code of Web Site Factory, Mobile Factory, Azure Factory, and Web App Factory projects. We recommend deleting “Mobile” folder from the source code of existing apps.
     
  • TimeStamp fields support client-side formatting in the client library. For example, setting Data Format String of a TimeStamp field to hh:mm tt will format time as '03:17 PM'. Auto-complete options are also having a matching format.
     
  • A label of a checkbox field is displayed in a form when editing data, if a "CheckBox" field is marked as read-only or static. Previously only a value was rendered by Desktop UI.
     
  • New colorful themes are now available in Touch UI. The definitions can be found in ~/touch/app-themes.css. End users can select a theme in Settings menu of Touch UI. We are developing additional themes for the next release. 
     
  • Standard logo and icon are created for Touch UI. Follow instructions to replace the standard logo with your own images.
     
  • CSS class app-selected indicates a selected item in list and grid views of Touch UI.
     
  • Web apps can be displayed in full screen on mobile devices after being added to a home screen.
     
  • Items with lookup style “Checkbox” are rendered as “flip switch” in Touch UI.
     
  • Touch UI now supports three display density options: Comfortable, Compact, and Condensed. “Comfortable” display density is selected automatically on mobile devices. “Compact” option is selected automatically on desktop devices. “Condensed” option has been introduced for presentation similar to the current Desktop UI. End users can choose a preferred display density in Settings menu of Touch UI.
     
  • Users can activate Touch UI with “_touch=true” URL parameter. This parameter replaces “_mobile” option, which will be phased out in the future. Note that applications automatically switch to Touch UI on mobile devices. Future releases will likely allow configuring a default UI for generated applications. Legacy apps will default to Desktop UI. New apps will default to Touch UI on all types of devices. Only apps created with Unlimited edition will support simultaneously Touch and Desktop user interface.

We are developing brand new tutorials that explain configuration of Touch UI in details. Several tutorials will be published weekly. Please be patient.

The next release is expected to include simultaneous display of multiple data sets in Touch UI on a single screen. Tabbed data views will be supported to replicate functionality available in Desktop UI.

We are also planning to release all-new Advanced Search and Filter for Touch UI.  End users will be able to save their own filters for future use. Client-side data caching will be supported shortly after advanced search becomes available. Developers will specify caching conditions for improved performance. A set of filtering options will be reduced when client-side caching of data is activated.

Upload/Download will be enabled in Touch UI in the next few weeks. The feature will also be enhanced to allow signature capturing on touch-enabled devices.