Knowledge Base

Text Field

• "inputType": "textinput"
  • Description: A simple free text field
  • Example:

"text_input": {
    "title": "Text Input",
    "inputType": "textinput",
    "value": "Free text value",
    "info": "A free text field"
}

Text Area

• "inputType": "textarea"
  • Description: A text box for longer text input.
  • Example:

"textarea_input": {
    "title": "Text Area",
    "inputType": "textarea",
    "value": "Check this out",
    "info": "Now with 20 percent more room for your essay."
}

Multiple Text Fields

• "inputType": "multiple-text-input"
  • Description: The user can add multiple input text fields with separate values. Use maxValue to define the maximum number of values that can be entered.
  • Example:

"multiple_text_input": {
    "title": "Multiple Text Input",
    "inputType": "multiple-text-input",
    "value": [
        {
            "element": "Hello"
        },
        {
            "element": "World"
        }
    ],
    "maxValue": 4,
    "info": "A maximum of 4 values is allowed"
}

Drop-down Field

• "inputType": "dropdown-input"
  • Description: A drop-down field with selectable options. Use elements as the specific attribute to add the desired values as anonymous JSO elements representing the drop-down options. Each element must contain a name and a value.
  • Example:

"bluetooth_connect_mode": {
    "title": "Connection Mode",
    "inputType": "dropdown-input",
    "value": "search",
    "elements": [
        {
            "name": "Search and Find",
            "value": "search"
        },
        {
            "name": "Scanning Code",
            "value": "scan"
        }
    ],
    "showIfComputed": true,
    "info": "'Search and Find' will discover all available devices and filter it depending on the type. 'Code Scan' allows you to scan the MAC address or Name of the device."
}

Multiple Drop-down Fields

• "inputType": "multiple-dropdown-input"
  • Description: Using the multi-level drop-down input field, the user can add multiple instances of the same drop-down field and thus pick multiple values for their order. The specific attributes are:
    • maxValue to define the maximum number of values that can be picked
    • elements: to add anonymous JSON elements representing the drop-down options (each element must contain a name and a value)
  • Example:

"multiple_dropdown_input": {
            "title": "Multiple Dropdown Input",
            "inputType": "multiple-dropdown-input",
            "value": [
                {
                    "name": "Shown Value"
                },
                {
                     "name": "Shown Value 2"
                },
            ],
            "elements": [
                {
                    "name": "Shown Value"
                },
                {
                    "name": "Shown Value 2"
                },
                {
                    "name": "Shown Value 3"
                }
            ],
            "maxValue": 2
        }

Checkbox

• "inputType": "checkbox-input"
  • Description: A Boolean toggle input
  • Example:

"checkbox_input": {
    "title": "Checkbox Input",
    "inputType": "checkbox-input",
    "value": "true"
}

Number Range

• "inputType": "range"
  • Description: A number range input
  • Example:

"range": {
    "title": "Reading range",
    "inputType": "range",
    "rangeMin": "1",
    "rangeMax": "20",
    "value": 15
}

File Upload

• "inputType": "file-upload"
  • Description: Allows the user to upload an image file.
  • Example:

"sensor_type": {
    "inputType": "file-upload",
    "title": "Icon",
    "accept": "image/png",
    "multiple": false,
    "showIf": "root.Value_1.sensor_shown.value",
    "value": "xai:/wf-editor/2c639f9c-a3d5-4830-9e55-092fe98d92a4/component_sensor_1563203048508_image001.png?version=1",
    "showIfComputed": true
}

Color Picker

• "inputType": "color-input"
  • Description: An input to select a color. Users can define a list of hex values to select from or use the complete color picker.
  • Example:

"color": {
    "inputType": "color-input",
    "title": "Color Picker",
    "list": [
        "#fcba03",
        "#1d6280"
    ],
    "showIfComputed": true,
    "value": "#fcba03"
}

Map Input

• "inputType": "map-input"
  • Description: A text input field that associates a key and a value like in a map. By default, the placeholders in the text fields will be "Key" and "Value". They can be changed as seen in the example below.
  • Example:

"headers": {
    "title": "Http Headers",
    "inputType": "map-input",
    "placeholder": {
        "key": "Header Name",
        "value": "Header Value"
    },
    "value": [
        {
            "key": "Content-Type",
            "value": "application/json"
        },
        {
            "key": "Accept",
            "value": "application/json"
        }
    ]
}

To save the map-input data into an actual Javascript map, follow this approach:

<setvar id="save_headers">
    <context_of>workflow</context_of>
    <context_update>
        <param name="headers" type="object"><![CDATA[?{ var headers = { §{#each configuration.headers.value}§'§{key}§': '§{value}§',§{/each}§ }; headers }?]]></param>      
    </context_update>
</setvar>

Data Source Input

• "inputType": "datasource-selection"
  • Description: A drop-down field that lets you select from all data sources uploaded to the Frontline Command Center. This allows you to dynamically associate your component with different data sources.
  • Example:

"datasource": {
            "noOptionsInfo": "No datasources found!",
            "title": "Datasource",
            "inputType": "datasource-selection",
            "revisionSelection": true,
            "required": true,
            "info": "Select the datasource you want to use.",
            "value": null
        }