Defining the Mobile Layout - j5 - 28.0 - Administration & Configuration - Hexagon

j5 IndustraForm Designer Help

Language
English
Product
j5
Search by Category
Administration & Configuration
j5 Version
2019

Custom mobile layouts apply at the section or the subsection level of a form. Custom layouts are only necessary when the default section or subsection layouts are undesirable.

To define a custom mobile layout for a section, right-click on a field or selected range in the section that should appear in the layout and then select "Add to Mobile Layout" in the pop-up menu. To view the current list of fields in the layout, navigate to the Mobile section on the Section pane.

Fields can be reordered in this list using drag-and-drop or by right-clicking a field and using the Move Up or Move Down options. Fields can be removed from the mobile layout by right-clicking a field and then selecting Delete.

Referring to the image above:

  1. A field is added to the mobile layout using the right-click context menu

  2. Fields are moved up or down the mobile layout by using the right-click layout context menu or dragging the field

If the list of fields in the mobile layout is long, it is often useful to group related fields together. This can be done by right-clicking in the Mobile Layout table and selecting "Add Grouping Label". Grouping labels can also be reordered and removed in the same way as fields in the mobile layout.

Referring to the image above:

  1. Fields are displayed in the Mobile Layout without a grouping label

  2. A grouping label is added. In this example, the grouping label references a label in the layout using the label’s Field ID.

  3. Fields displayed under the grouping label are in the label group.

By default, subsections display on mobile as part of their parent section. This is consistent with the desktop presentation, but repeating subsections are collapsed to save space. This means that a user will not know the full content of a subsection without opening it. To help users identify subsections, the Collapsed Label and Collapsed Summary fields can be configured. These are formula-enabled attributes.

An example of how the Collapsed Label and Collapsed Summary fields are used (referring to the image above):

  1. A repeating section is created and then displayed in the IndustraForm Editor

  2. The Collapsed Label references the Hazard Field ID. The field’s value is then displayed in bold.

  3. The Collapsed Summary references the Control Field ID. The field’s value is then displayed beneath the Collapsed Label.

  4. These are the corresponding field values in the desktop view that are used in the mobile view.

A Title can be configured for each repeating subsection as follows:

Referring to the image above:

  1. A subsection title is defined in the Title field

  2. This gives context to the repeating subsection list in the mobile layout.

For large sections it can also be helpful to collapse a subsection even if it does not repeat, in order to improve readability. To do this, tick the Click through Navigation checkbox for the subsection you want to collapse. The Collapsed Label and Collapsed Summary fields work as they do for repeating subsections.

To split the large section into manageable chunks (referring to the image above):

  1. Divide the large section into smaller sections

  2. Convert the smaller sections into subsections

  3. Assign a Collapsed Label and Collapsed Summary to each subsection for the collapsed view

  4. Enable Click through Navigation for each subsection

  5. In this example, the new subsection appears collapsed

  6. In this example, the user has navigated into the subsection displaying the details