テキストフィールド
"text_input": {
"title": "Text Input",
"inputType": "textinput",
"value": "Free text value",
"info": "A free text field"
}
テキストエリア
- "inputType": "textarea"
- 説明長いテキストを入力するためのテキストボックスです。
- 例
"textarea_input": {
"title": "Text Area",
"inputType": "textarea",
"value": "Check this out",
"info": "Now with 20 percent more room for your essay."
}
複数のテキストフィールド
- "inputType": "multiple-text-input"
- 説明ユーザは別々の値を持つ複数の入力テキストフィールドを追加できる。
maxValueを
使用して、入力可能な値の最大数を定義します。 - 例
"multiple_text_input": {
"title": "Multiple Text Input",
"inputType": "multiple-text-input",
"value": [
{
"name": "Hello"
},
{
"name": "World"
}
],
"maxValue": 4,
"info": "A maximum of 4 values is allowed"
}
ドロップダウンフィールド
- "inputType": "dropdown-input"
- 説明選択可能なオプションを持つドロップダウンフィールド。ドロップダウンの選択肢を表す匿名JSO要素として必要な値を追加するには、特定の属性として
要素を
使用します。各要素は名前と値を含まなければなりません。 - 例
"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."
}
複数のドロップダウンフィールド
- "inputType": "multiple-dropdown-input"
- 説明マルチレベルのドロップダウン入力フィールドを使用すると、ユーザーは同じドロップダウン・フィールドの複数のインスタンスを追加することができます。具体的な属性は以下の通りです:
- 摘出可能な値の最大数を定義する
maxValue
要素
: ドロップダウンオプションを表す匿名JSON要素を追加します(各要素には名前と値を含める必要があります)。
- 例
"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
}
チェックボックス
- "inputType": "checkbox-input"
"checkbox_input": {
"title": "Checkbox Input",
"inputType": "checkbox-input",
"value": "true"
}
番号範囲
"range": {
"title": "Reading range",
"inputType": "range",
"rangeMin": "1",
"rangeMax": "20",
"value": 15
}
ファイルのアップロード
- "inputType": "file-upload"
- 説明ユーザーが画像ファイルをアップロードできるようにします。
- 例
"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
}
カラーピッカー
- "inputType": "color-input"
- 説明色を選択するための入力。ユーザーは16進数値のリストから選択するか、完全なカラーピッカーを使用することができます。
- 例
"color": {
"inputType": "color-input",
"title": "Color Picker",
"list": [
"#fcba03",
"#1d6280"
],
"showIfComputed": true,
"value": "#fcba03"
}
地図入力
- "inputType": "map-input"
- 説明マップのようにキーと値を関連付けるテキスト入力フィールド。デフォルトでは、テキストフィールドのプレースホルダーは "Key "と "Value "です。下記の例のように変更することができます。
- 例
"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"
}
]
}
マップ入力データを実際のJavascriptマップに保存するには、次のようにする:
<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>
データソース入力
- "inputType": "データソース選択"
- 説明Frontline Command Center にアップロードされたすべてのデータソースから選択できるドロップダウンフィールド。これにより、コンポーネントを異なるデータソースに動的に関連付けることができます。
- 例
"datasource": {
"noOptionsInfo": "No datasources found!",
"title": "Datasource",
"inputType": "datasource-selection",
"revisionSelection": true,
"required": true,
"info": "Select the datasource you want to use.",
"value": null
}
このコンフィギュレーションは通常、データソースアクションと共に使用される。例えば、現在のデータソースタスクの最初の行をコンテキストに保存し、必要に応じて行を操作し(データの抽出や変更)、変更した行をデータソースタスクに保存し直すことができます。
最初の行([0]
はインデックス変数に置き換えることができる)をコンテキストに保存する。行の文字列バージョンを含む追加の変数は、デバッグに便利ですが、なくてもかまいません。
<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>
データを抽出する(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>
データソースに存在するデータ列を変更する:
<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>
変更された行をデータソース・タスクに戻す:
<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>