Fields

There are different types of fields your form can be composed of. Depending on type, the enclosing element can be defined by its set of properties. We grouped them by the common porperties that they use.

Field types

Note: if child elements are specified, the default type is: group otherwise text is assumed.

Plain input/output fields

These fields consist of a label and data entry element (input/output box). They may be created by providing all required properties manually or by retrieving them from metadata. If metadata is used, then only the field Id is required. The rest of the properties, if not provided, will be taken from the specified metadata (or from the default metadata specified on the form’s level).

Properties

Note: Some of metadata properties may be overriden: text, readonly, active, mandatory.

Example

A form with several fields:

• id, version, apiFrameworkVersion - based on metadata defined on form level: apiMetadataInfo.get, all made outputs (readonly)
• line break
• header
• apiMethod field based on metadata: apiMethod.get, cached
• sequence numeric field where all required properties are inlined

{
    "text": "Metadata",
    "onLoad": { "method": "apiMetadataInfo.get" },
    "metadata": "apiMetadataInfo.get", 
    "elements": [ 
        { "id": "id", "readonly": true },
        { "id": "version", "readonly": true },
        { "id": "apiFrameworkVersion", "readonly": true },
        { "type": "br" },
        { "type": "h4", "text": "Methods" },
        { "id": "apiMethod", "metadata": "apiMethod.get", "cache": true },
        { "id": "sequence", "type": "number", "text": "Sequence", "length": 2 }
    ],
    "actions": [ "*close" ]
}

Table

Table element is described by a set of columns which may be provided as child elements. When metadata is provided the column set will be retrieved from referenced array element of the metadata - then there is no need to specify elements.

It is possible to display a subset of columns from metadata by either:

• providing a list of columns to show via elements or
• excluding columns with exclude property.

Table properties

Table columns

Table columns are defined in the same way as plain fields.

Table actions

A list of actions may be specified for a table. The actions will be accessible as table’s context menu - by right mouse-click or tap-and-hold on mobile devices. Then, the popup menu will be displayed with all table actions. The actions may be run in connection with selected table items therefore there are a few special propertied to be used in actions to be able to operate on the selected table data.

To refer to data from selected items, use prefix ‘#’ for field name (column name). For example, “#orderNumber” - refers to the order number from the selected table row.

Single item table action

When an action is intended to run with one selected item only, use a single item table action, directly refering to the selected item (if multiple items are selected, the first one is processed).

Example of a table action with single item reference:

{
    "text": "Details",
    "form": "methodDetails",
    "params": { "apiMethod": "#apiMethod" }
}

In this example, when table option Details is chosen, the form methodDetails will be displayd. The value for form’s input parameter apiMethod will be taken from the selected table row and column of the same name apiMethod.

Multiple item table action

When an action is intended to be run for all selected items, another type of action may be used: forEach. The action will iterate over all selected items and and run specified inner action.

Example of a table action with multi item processing:

{
    "text": "Delete",
    "forEach": {
        "method": "salesOrder.delete",
        "params": { "orderNumber": "#orderNumber" }
    },
    "onOK": {
        "form": "salesOrders"
    }
}

Example

Here is en example with a form that contains:

• two columns columns apiMethod, description created from metadata apiMethods.get
• a table action Details, that displays another form methodDetials sending selected apiMethod as input parameter.

{
    "text": "Metadata",
    "onLoad": { "method": "apiMethods.get" },
    "metadata": "apiMetadataInfo.get", 
    "elements": [ 
        { "id": "items", "metadata": "apiMethods.get", 
            "elements": [
                { "id": "apiMethod", "text": "Name" },
                { "id": "description" }
            ],
            "actions": [
                {
                    "text": "Details",
                    "form": "methodDetails",
                    "params": { "apiMethod": "#apiMethod" }
                }
            ]
        }
    ],
    "actions": [ "*close" ]
}

Text area (beta)

This is a multi line output field. It accepts array as data source. The lines are collected from the array using field name provided in data-stc property.

Example of text lines for Sales orders. If the response contains the following data:

{ "items": [ { "text": "Text notes 1"}, { "text": "Text notes 2"} ] }

The correspnding textarea element will be specified like this:

{ "id": "items", "type": "textarea", "text": "Sales order text", "data-src": "text", "readonly": true }

where data-src refers to text field of the array the strings will be loaded from.

Line break

With this element you can add a line break - space between fields to separate them visually. Example with elements containg br element:

[
    { "id": "id", "readonly": true },
    { "type": "br" },
    { "id": "version", "readonly": true }
]

Ruler

This element is similar to br - it separate fields with a horizontal line. Example with elements containg hr element:

[
    { "id": "id", "readonly": true },
    { "type": "hr" },
    { "id": "version", "readonly": true }
]

Heading

With this h(size) element you can place several different headings on your form. Example:

[
    { "type": "h6", "text": "Heading size 6" },
    { "type": "h5", "text": "Heading size 5" },
    { "type": "h4", "text": "Heading size 4" },
    { "type": "h3", "text": "Heading size 3" },
    { "type": "h2", "text": "Heading size 2" },
    { "type": "h1", "text": "Heading size 1" }
]