Setting up Basic Forms & Lists

4Industy Mobile App supports configuration for form- and list-views from the ServiceNow instance, below article will explain how to setup a basic layout for the Mobile App.

Starting from R8.0, the tables configured in the Table Configuration module, will be synchronised to the device. This allows to create forms for every table in the system.

1. Setting up Form Layouts

Form Layouts for the 4Industry Mobile App can be configured in a similar way to regular ServiceNow forms, the layouts are taken from a specific view which by default is called 'mobileapp', however it is possible to change this value if unsure navigate to 4Industry Mobile API > Properties and check the property that specifies the view for the Mobile App form.

Important: make sure you are in the same scope as the Form Layout you want to change or add
Open a record for which you want to create a Form Layout
Right click the grey header > Configure > Form Layout
Under Form View and Section select the View Name 'mobileapp'
If the View Name is not available, click 'New..' and set the name to 'mobileapp'
Move the fields you want to display from the left column to the right
Save
Look up and click the module '- Clear cache'

2. Setting up List Layouts (R9.0 and before)

List layouts for the 4Industry Mobile App, similarly to form layouts, can be configured the same way as regular ServiceNow lists. The layouts are again taken from a specific view which by default is called 'mobileapp', keep in mind it is possible to change this, consult the properties page to confirm the name of the view to be used for Mobile App configuration.

Important: make sure you are in the same scope as the List Layout you want to change or add
Open a list for which you want to create a List Layout
Right click a bold column header > Configure > List Layout
Under List View select the View Name 'mobileapp'
If the View Name is not available, click 'New..' and set the name to 'mobileapp'
Move the fields you want to display from the left column to the right
Save
Look up and click the module '- Clear cache'

3. Setting up Back-end Driven List Layouts (R10.0 and after)

The back-end list layout allows you to define layouts for the different task types straight from the back end. Currently, this is an advanced feature due to it only being configurable through defining a JSON.

Prerequisites and limitations

You always need to define a separate lay-out for both mobile and table for every table that you want to visualize
Jobs currently have a hardcoded configuration that cannot be changed.
HStack in iOS do not wrap to the next line but will truncate. If you expect the content of the HStack to be longer than the row, it is recommended to first add a VStack and then multiple HStacks with the elements.
The highlight value will be implemented in R11. Currently you can configure the highlight on the left of the card by setting the border. Please note that this will require an update when migration from

Elements

The card view can be build out of the following elements:

Element	Description	Properties

Element	Description	Properties
HStack	Horizontal Stack. Should always be the first element configured. Shows elements from left to right.	Elements, expects an array with item objects
VStack	Vertical Stack. Shows element on top of each other.
Icon	Icon field, can have a color. Supports the same icons as the home cards. Overview can be found here.	Icons. Array with one object
progress	Progress indicator for Assessment and Job records. The fill of the indicator can be configured through setting the color property	Alignment. Should always be set to center. Color. Set an object as the first element with the color (and optionally a condition)
Image	If configured, shows the first attached image on a task	Alignment. Should always be set to center. Size: size in pixels
smartFocus	Shows a small circle with an exclamation mark when a smartFocus is configured	None additional
syncIndicator	Show an indicator if the task has been edited and is set to be synced.	None additional
highlightValue	Can show any field with a (conditional) colored background	Background. Expects a color object with optionally an condition. field: The field value to be shown. label: Display value of the field to be shown. style. Should always be default
value	Will display the value of any field as normal text	field: The field value to be shown. label: Display value of the field to be shown. style. Should always be default

Conditional colours

In multiple places, it is possible to conditionally set the colour of an element based on the value of a field.

Example condition

{\"rule\":{\"ruleOperator\":\"equal\",\"fieldValue\":\"1\",\"element\":\"priority\"}}

Elements that can have conditional colouring

Border
Highlight (to be implemented in R11.0)
Background color of highlight
Icon colour

Configuration

Go to the List Layouts module
Create a New List Layout
Select in the configuration field for which table this list lay-out will be
Select if it will be for mobile or tablet
Enter a JSON to configure the list view. See bellow for an example

Overview of technical values mapped to an example of an Assessment Instance card

{
  "type": "hStack",
  "paddingTop": 16,
  "paddingBottom": 16,
  "paddingLeft": 16,
  "paddingRight": 16,
  "color": [],
  "background": [],
  "border": [
    {
      "color": "#C62828",
      "condition": "{\"rule\":{\"ruleOperator\":\"equal\",\"fieldValue\":\"1\",\"element\":\"priority\"}}",
      "order": 1
    },
    {
      "color": "#FF8F00",
      "condition": "{\"rule\":{\"ruleOperator\":\"equal\",\"fieldValue\":\"2\",\"element\":\"priority\"}}",
      "order": 2
    },
    {
      "color": "#0277BD",
      "condition": "{\"rule\":{\"ruleOperator\":\"equal\",\"fieldValue\":\"3\",\"element\":\"priority\"}}",
      "order": 3
    },
    {
      "color": "#4E342E",
      "condition": "{\"rule\":{\"ruleOperator\":\"equal\",\"fieldValue\":\"4\",\"element\":\"priority\"}}",
      "order": 4
    }
  ],
  "elements": [
    {
      "type": "icon",
      "paddingTop": 0,
      "paddingBottom": 0,
      "paddingLeft": 16,
      "paddingRight": 32,
      "color": [],
      "background": [],
      "border": [],
      "elements": [],
      "alignment": "center",
      "size": 32,
      "icons": [
        {
          "icon": "clipboard-outline",
          "color": "#F9A825",
          "condition": "",
          "order": 1
        }
      ]
    },
    {
      "type": "vStack",
      "paddingTop": 0,
      "paddingBottom": 0,
      "paddingLeft": 0,
      "paddingRight": 0,
      "color": [],
      "background": [],
      "border": [],
      "elements": [
        {
          "type": "hStack",
          "paddingTop": 0,
          "paddingBottom": 0,
          "paddingLeft": 0,
          "paddingRight": 0,
          "color": [],
          "background": [],
          "border": [],
          "elements": [
            {
              "type": "smartFocus",
              "paddingTop": 0,
              "paddingBottom": 0,
              "paddingLeft": 0,
              "paddingRight": 0,
              "color": [],
              "background": [],
              "border": [],
              "elements": []
            },
            {
              "type": "highlightValue",
              "paddingTop": 0,
              "paddingBottom": 0,
              "paddingLeft": 0,
              "paddingRight": 0,
              "color": [],
              "background": [
                {
                  "color": "#D1C4E9",
                  "condition": "{\"rule\":{\"ruleOperator\":\"equal\",\"fieldValue\":\"-1\",\"element\":\"state\"}}",
                  "order": 1
                },
                {
                  "color": "#C5CAE9",
                  "condition": "{\"rule\":{\"ruleOperator\":\"equal\",\"fieldValue\":\"-2\",\"element\":\"state\"}}",
                  "order": 2
                },
                {
                  "color": "#FFCDD2",
                  "condition": "{\"rule\":{\"ruleOperator\":\"equal\",\"fieldValue\":\"-4\",\"element\":\"state\"}}",
                  "order": 3
                },
                {
                  "color": "#E1BEE7",
                  "condition": "{\"rule\":{\"ruleOperator\":\"equal\",\"fieldValue\":\"-5\",\"element\":\"state\"}}",
                  "order": 4
                },
                {
                  "color": "#FFF9C4",
                  "condition": "{\"rule\":{\"ruleOperator\":\"equal\",\"fieldValue\":\"1\",\"element\":\"state\"}}",
                  "order": 5
                },
                {
                  "color": "#BBDEFB",
                  "condition": "{\"rule\":{\"ruleOperator\":\"equal\",\"fieldValue\":\"2\",\"element\":\"state\"}}",
                  "order": 6
                },
                {
                  "color": "#C8E6C9",
                  "condition": "{\"rule\":{\"ruleOperator\":\"equal\",\"fieldValue\":\"3\",\"element\":\"state\"}}",
                  "order": 7
                },
                {
                  "color": "#F5F5F5",
                  "condition": "{\"rule\":{\"ruleOperator\":\"equal\",\"fieldValue\":\"6\",\"element\":\"state\"}}",
                  "order": 8
                },
                {
                  "color": "#CFD8DC",
                  "condition": "{\"rule\":{\"ruleOperator\":\"equal\",\"fieldValue\":\"7\",\"element\":\"state\"}}",
                  "order": 9
                }
              ],
              "border": [],
              "elements": [],
              "field": "state",
              "label": "State",
              "style": "default"
            },
            {
              "type": "highlightValue",
              "paddingTop": 0,
              "paddingBottom": 0,
              "paddingLeft": 0,
              "paddingRight": 0,
              "color": [],
              "background": [
                {
                  "color": "#FFCDD2",
                  "condition": "{\"rule\":{\"ruleOperator\":\"equal\",\"fieldValue\":\"1\",\"element\":\"priority\"}}",
                  "order": 1
                },
                {
                  "color": "#FFECB3",
                  "condition": "{\"rule\":{\"ruleOperator\":\"equal\",\"fieldValue\":\"2\",\"element\":\"priority\"}}",
                  "order": 2
                },
                {
                  "color": "#B3E5FC",
                  "condition": "{\"rule\":{\"ruleOperator\":\"equal\",\"fieldValue\":\"3\",\"element\":\"priority\"}}",
                  "order": 3
                },
                {
                  "color": "#D7CCC8",
                  "condition": "{\"rule\":{\"ruleOperator\":\"equal\",\"fieldValue\":\"4\",\"element\":\"priority\"}}",
                  "order": 4
                }
              ],
              "border": [],
              "elements": [],
              "field": "priority",
              "label": "Priority",
              "style": "default"
            },
            {
              "type": "highlightValue",
              "paddingTop": 0,
              "paddingBottom": 0,
              "paddingLeft": 0,
              "paddingRight": 0,
              "color": [],
              "background": [
                {
                  "color": "#FFF9C4",
                  "condition": "",
                  "order": 1
                }
              ],
              "border": [],
              "elements": [],
              "field": "sys_class_name",
              "label": "Task type",
              "style": "default"
            },
            {
              "type": "syncIndicator",
              "paddingTop": 0,
              "paddingBottom": 0,
              "paddingLeft": 0,
              "paddingRight": 0,
              "color": [],
              "background": [],
              "border": [],
              "elements": []
            }
          ],
          "wrapping": true,
          "horizontalSpacing": 8,
          "verticalSpacing": 8
        },
        {
          "type": "value",
          "paddingTop": 0,
          "paddingBottom": 0,
          "paddingLeft": 0,
          "paddingRight": 0,
          "color": [],
          "background": [],
          "border": [],
          "elements": [],
          "field": "short_description",
          "label": "Short description",
          "style": "default"
        },
        {
          "type": "hStack",
          "paddingTop": 0,
          "paddingBottom": 0,
          "paddingLeft": 0,
          "paddingRight": 0,
          "color": [],
          "background": [],
          "border": [],
          "elements": [
            {
              "type": "labelValue",
              "paddingTop": 0,
              "paddingBottom": 0,
              "paddingLeft": 0,
              "paddingRight": 0,
              "color": [
                {
                  "color": "#A5A5A5",
                  "condition": "",
                  "order": 1
                }
              ],
              "background": [],
              "border": [],
              "elements": [],
              "field": "work_area",
              "label": "Work Area",
              "style": "default"
            },
            {
              "type": "labelValue",
              "paddingTop": 0,
              "paddingBottom": 0,
              "paddingLeft": 0,
              "paddingRight": 0,
              "color": [
                {
                  "color": "#A5A5A5",
                  "condition": "",
                  "order": 1
                }
              ],
              "background": [],
              "border": [],
              "elements": [],
              "field": "equipment",
              "label": "Equipment",
              "style": "default"
            },
            {
              "type": "labelValue",
              "paddingTop": 0,
              "paddingBottom": 0,
              "paddingLeft": 0,
              "paddingRight": 0,
              "color": [
                {
                  "color": "#A5A5A5",
                  "condition": "",
                  "order": 1
                }
              ],
              "background": [],
              "border": [],
              "elements": [],
              "field": "due_date",
              "label": "Due date",
              "style": "default"
            },
            {
              "type": "labelValue",
              "paddingTop": 0,
              "paddingBottom": 0,
              "paddingLeft": 0,
              "paddingRight": 0,
              "color": [
                {
                  "color": "#A5A5A5",
                  "condition": "",
                  "order": 1
                }
              ],
              "background": [],
              "border": [],
              "elements": [],
              "field": "assigned_to",
              "label": "Assigned to",
              "style": "default"
            }
          ],
          "wrapping": true,
          "horizontalSpacing": 32,
          "verticalSpacing": 8
        }
      ],
      "stretch": true,
      "verticalSpacing": 8
    },
    {
      "type": "progress",
      "paddingTop": 0,
      "paddingBottom": 0,
      "paddingLeft": 8,
      "paddingRight": 16,
      "color": [
        {
          "color": "#F9A825",
          "condition": "",
          "order": 1
        }
      ],
      "background": [],
      "border": [],
      "elements": [],
      "alignment": "center"
    }
  ]
}

Layout Caching

Because layouts are generally considered a fairly static part of the application we provide a cached version to ensure fast syncing to the mobile application, these are saved in a seperate table as a JSON payload. Most of the time there is no need to pay attention to this table except for perhaps debugging purposes. To clear the layout cache simply navigate to 4Industry Mobile API > Caching and click – Clear Cache.

The cache should have been cleared and any changes made should now reflect immediatly upon syncing the Mobile App!

Advanced Configuration

To configure more advanced Forms with things such as read-only and mandatory fields consult the following article: Setting up Field Configurations