Input Types

Modified on Tue, 12 Nov at 3:31 PM

Input Types

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"
}

User: "config_checkbox.png"

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
        }

This configuration will typically be used in conjunction with data source actions. For example, you could save the first row of the current data source task into the context, manipulate the row as per your needs (extract or change data), and then save the changed row back to the data source task.

Saving the first row ([0] could be replaced with an index variable) to your context. The additional variable containing the string version of the row is convenient for debugging but can be left out.

<setvar id="row_to_context">
  <context_of>root</context_of>
  <context_update>
    <param name="current_row" type="object">?{ context.ds_§{ replace validation.datasource.value.id '-' ''  }§[0] }?</param>
    <param name="current_row_to_string" type="string"><![CDATA[?{JSON.stringify(context.current_row)}?]]></param>
  </context_update>
</setvar>

Extracting data (e.g., to show it in the UI):

<setvar id="get_row_data">
    <context_of>workflow</context_of>
    <context_update>
       <param name="material" type="string"><![CDATA[ ?{ context.current_row.payload["Material Name"].value }? ]]></param>
    </context_update>
</setvar>

Changing data columns present in your data source:

<setvar id="set_counts">
    <context_of>root</context_of>
    <context_update>
        <param name="current_row" type="object"><![CDATA[ ?{
            context.current_row.payload["Outcome"].value = context.outcome;
            context.current_row.payload["Assigned to User"].value = appcontext.client.user.id;
            context.current_row.payload["Assignment Name"].value = appcontext.task.name;
            context.current_row.payload["Done Date"].value = new Date(Date.now()).toUTCString();
            context.current_row.status = 'DONE';
            context.current_row;
        }? ]]></param>
        <param name="current_row_to_string" type="string"><![CDATA[?{JSON.stringify(context.current_row)}?]]></param>
    </context_update>
</setvar>

Propagating the changed row back to the data source task:

<update_datasource_task id="update_ds_with_row">
    <param name="datasource_task_id" type="string">?{context.ds_§{ replace validation.datasource.value.id '-' '' }§_task.id}?</param>
    <param name="rows">#{current_row}</param>
    <param name="payload_variable_name">ds_§{ replace validation.datasource.value.id '-' ''  }§</param>
</update_datasource_task>