Available in: Axsy Mobile for Salesforce, Axsy Field Service, Axsy Public Sector, Axsy Retail Execution

Overview

The presentation of Axsy Smart Forms can be enhanced by making use of rich text formatting, revealing collapsable content on demand and making use of columns presentation.


Figure 1, below illustrates these features:

  1. An embedded Sub-section is used that can be revealed or collapsed
  2. Multiple columns are used, in this example 2 columns are used
  3. Rich text formatting has been applied, including the use colours and extended characters / icons.


Figure 1 – Application of  Enhanced Look and Feel Capabilities


Rich Text Formatting

The following Elements support rich text formatting:

  1. Numeric Input
  2. Boolean Yes / No
  3. Date Input
  4. Text Input
  5. Picklist
  6. Record Lookup
  7. Text Labels
  8. Signature
  9. File Upload


The rich text editor is available on the General tab for label components.


Figure 2 – Rich Text Editor

Column Layouts

Multiple columns can be configured and can be applied in the following components:

  1. Global
  2. Individual Sections
  3. Sub-Sections
  4. Loops


Global Column Layout

A global column layout is configured in the Smart Form Config field. 


An example column layout config is shown highlighted in Figure 3.


Figure 3 – Example Column Layout Configuration

The layout options are:


"maxColumns": This will be the maximum number of columns to display, subject to sufficient space on the mobile device. 

"mode": "Columns" or "Grid"

"axis": "x" or "y"

"columnWeights": numeric values, comma separated, one for each column, if omitted then equal column weights will be applied

"columnBreaks": numeric values, comma separated that control the break points between components on their respective columns, if omitted then the columns will contain breaks that cause an equal (or near equal) number of components in each column.


Section / Sub-Section / Loop Column Layout

Figure 4 shows the Layout tab for a Section, the same tab is used for Sub-Sections and Loop column layouts.


If the Max Columns is set to a number > 1 then the column layout options are available. These are explained in more detail below:


Max Columns – this is the maximum number of columns you want to display if the mobile device you are using is able to display this number of columns. Note this works in conjunction with the Min Column Width option.

Axis – this controls how the columns are presented

Mode – this controls how Element components are aligned in adjacent columns

Column Weights – this controls how wide the columns are relative to each other, if omitted then equal column weights will be applied 

Column Breaks – this controls where breaks occur in Element components, the number of values supplied can be one less than the number of columns. If omitted then the columns will contain breaks that cause an equal (or near equal) number of components in each column

Min Column Width – this is the number of pixels that a column must have available to be presented. If a mobile device does not have sufficient width then additional columns will not be shown.


A recommended starting configuration is:
Max Columns:     2
Axis:            Y
Mode:            Grid
Column Weights   Equal (leave empty)
Column Breaks    Equal (leave empty)
Min Column Width 350


Figure 4 – Column Layout Configuration


Ensure you test your column layouts on all your mobile devices, including tablets and smart phones.


Take care if you have column layouts applied at multiple levels. E.g., if you have a Section and a Sub-Section column layout their configurations, subject to sufficient mobile device screen pixels, are combined.




Collapsable Sub-Sections

Sub-Sections can be configured so that they are collapsable which may aid in reducing screen 'clutter' and allow for a better user experience as the user can decide what information they wish to see when completing a Smart Form.


The Subsection tab, shown in Figure 5 below contains the configuration options.


Figure 5 – Collapsable Sub-Section Configuration



The effect of the above options on a Smart Form Section that contains two collapsable Sub-Sections is shown in Figure 6, below.

Figure 6 – Collapsable Sub-Sections


To ensure users do not overlook Elements that they should complete which they may overlook if a Sub-Section is collapsed, make sure you configure required entry – doing so will prevent a user from overlooking information they need to provide and is shown as an error message when attempting to move to the next Smart Form Section.