Touch UI / How It Started / User Guide

  Form

Touch UI / How It Started / User GuidePrint||
Form

Mobile apps created with Code On Time will display a form view in response to many user actions. A form will present data for a single database table record as a list of fields.

Navigating in a Form

Here is an example of a form displayed in response to a tap on an item in a list of products.

Tap on an item in a list will transition to a form view in a mobile app created with Code On Time mobile app generator.  A form view with portrait orientation displayed by iPhone 5s in a mobile app created with Code On Time mobile app generator.

A field label is displayed above the field value on devices with smaller screens. If orientation of a mobile device is changed, then a label will be displayed on the left side of the field value.

A form view of a mobile created with Code On Time mobile/desktop application generator is presented in landscape orientation.

Note that a change in orientation will also reveal additional user interface elements. Actions “Edit”, “Delete” and “New” are visible on the application toolbar in the top right corner of the screen.  Action “Edit” is the only available choice available on the mobile phone with a portrait orientation. Mobile apps created with Code On Time have a responsive design that ensures optimal viewing on a device with any screen size.

If a field label is too long, then it may become partially hidden. Tap and hold a field label for three quarters of a second to see a hint with the full label text.

Tap and hold a label in a form view for about a second to see the full text in a popup in mobile apps created with Code On Time mobile app generator.

Fields of a form are grouped in one or more categories defined by the application. Tap a category to collapse a list of fields. Tap the same category again to have it expanded.

Tap a field category in a form view to have it collapsed in mobile apps created with Code On Time mobile app generator.   A collapsed field category in a form of a mobile app created with Code On Time mobile app generator.

An item card with a summary of a data record will be displayed at the bottom of a form view when on a master-detail page. Links to related detail lists are displayed below the card.

Tap a link under the card and the form will transition to a list with corresponding items.

A summary card with links to details of the selected master record is dislayed in master-detail pages of mobile apps created with Code On Time mobile app generator.   Tap on the detail link below the summary card to see a list of details in a mobile created with Code On Time mobile database app generator.

Actions in Forms

The context menu provides access to all actions available in a form view. Tap the context menu icon on the right side of the toolbar to see the menu of actions.

Tap a context menu button on the toolbar to see a complete list of actions available in a mobile app created with Code On Time mobile database app generator.   A context menu panel with a list of actions available in a form view on a mobile app created with Code On Time mobile/desktop application generator.

A context menu sidebar will be docked to the right side of mobile devices with a larger screen. Context menu button is not visible if the sidebar is docked.

Form view actions listed in the docked sidebar on iPad Air in a mobile app created with Code On Time mobile/desktop app generator.

A subset of available actions is presented on the application toolbar as icons. The number of visible icons depends on the screen size.

Tap an icon to activate the corresponding action.

Tap a toolbar icon to activate a corresponding action available in a form view of an app created with Code On Time mobile app generator.

Form view may also display action buttons at the top and bottom of the view if the sidebar is undocked. The number of visible action buttons depends on the screen size. Tapping on a button will execute an action, which may result in a different set of buttons becoming available.

Editing of a data record in a form is activated when 'Edit' button is tapped in a mobile app created with Code On Time database mobile app generator.   A form view is displayed in edit mode in response to 'Edit' action in a mobile app created with Code On Time mobile database app generator.

Entering Data in Forms

Application form view will display input controls in response to “Edit” and “New” actions. Ability to create or edit data is controlled by the application and may not be available to all users.

Tap and hold a field value in a form view to quickly execute “Edit” action. The form will switch to “Edit” mode in response to tap and hold.  The form will set a focus on the field input control if you continue holding a finger on the screen of your mobile device.

Tap and hold a field value in the form view to activate 'Edit' mode in a mobile apps created with Code On Time mobile app generator.  Extended 'tap and hold' on a field value will set focus on the field input control in a mobile app created with Code On Time mobile database app generator.

Form view will activate a standard text input keyboard on mobile devices when a text field is focused.

A numeric native keyboard is activated if the field has a numeric data type.

A numeric keyboard is displayed when a numeric field is focused in a form view of a mobile app created with Code On Time mobile app generator.

Fields configured to capture phone numbers will also have a dedicated input keyboard.

A 'phone number' keyboard is displayed when a 'phone' field is focused in a form view of a mobile app created with Code On Time mobile app generator.

Specialized native keyboards will also display if the focused text field is configured as URL or Email.

Lookup fields with lists of values will be displayed as native input controls.

A native 'select' input control is displayed for lookup fields with lists of values in mobile apps created with Code On Time mobile database app generator.

Focused date fields will cause a native date input control to display. The type of control depends on the operating system of a mobile device.

Date input control on iPhone 5 is shown next.

A native date input control of iOS 7 is shown in a form view of a mobile app created with Code On Time application generator.

Date input control on Nexus 7 is shown in this screenshot.

A native Android date input control is visible in a form view of a mobile app created with Code On Time mobile database app generator.

A specialized native date-time input control is displayed for fields that  allow capturing both date and time.

Database applications frequently require complex search criteria when selecting lookup values. It is possible that lookup tables contain many thousands of possible choices. Code On Time mobile apps are automatically configured to display a custom lookup input control for database lookup fields.

A lookup input control is shown before and after a tap on the field value.

A database lookup input is displayed in a form view of a mobile app created with Code On Time mobile app generator.   A list of lookup values with support for endless scrolling, search, filtering, and sorting is displayed in a mobile app created with Code On Time mobile database application generator.

A list of lookup values behaves in exactly the same fashion as standalone lists with support for endless scrolling, search, filtering,  and sorting. Existing lookup items can be modified and new ones can be created if allowed by application business logic.

Advanced Form View Features

Application may define a status bar explaining a workflow status of a data item selected in a form view. The status bar is displayed at the top of the form. The contents of the status bar can be scrolled with horizontal swiping motions.

Status bars help users to understand the workflow status of items selected in a form view in mobile apps created with Code On Time mobile/desktop application generator.

Fields of complex forms are frequently organized in multiple categories. Categories can be independently collapsed and expanded. The screenshot shows a form with multiple categories displayed in iPad Air.

Collapsible field categories makes easier to work with large number of fields in mobile apps created with Code On Time mobile app generator.

Categories can be further organized with tabs. Tabs are displayed at the bottom of a form view. This screenshot shows a tabbed form with multiple categories displayed in Nexus 7 tablet.

A form view with multiple categories and tabs in a mobile app created with Code On Time app generator.

If a form view is scrolled down, then a heading with the value of an identifiable data field may be displayed below the toolbar. This will happen if an identifiable field is not visible on the screen. The identifiable field is displayed as the first data element in lists.

A heading with the value of identifiable field is dispalyed when a user scrolls down a form view in mobile apps created with Code OnTime mobile app generator.

The heading will disappear if a user starts editing data or scrolls the identifiable field back into view. Tap on the heading to have it hidden.

Table of Contents