Textfeld
- "inputType": "textinput"
- Beschreibung: Ein einfaches Freitextfeld
- Beispiel:
"text_input": {
"title": "Text Input",
"inputType": "textinput",
"value": "Free text value",
"info": "A free text field"
}
Textbereich
- "inputType": "textarea"
- Beschreibung: Ein Textfeld für längere Texteingaben.
- Beispiel:
"textarea_input": {
"title": "Text Area",
"inputType": "textarea",
"value": "Check this out",
"info": "Now with 20 percent more room for your essay."
}
Mehrere Textfelder
- "inputType": "Mehrfach-Text-Eingabe"
- Beschreibung: Der Benutzer kann mehrere Eingabefelder mit separaten Werten hinzufügen. Verwenden Sie
maxValue
, um die maximale Anzahl der Werte zu definieren, die eingegeben werden können. - Beispiel:
"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"
}
Dropdown-Feld
- "inputType": "Dropdown-Eingabe"
- Beschreibung: Ein Dropdown-Feld mit auswählbaren Optionen. Verwenden Sie
Elemente
als spezifisches Attribut, um die gewünschten Werte als anonyme JSO-Elemente hinzuzufügen, die die Dropdown-Optionen darstellen. Jedes Element muss einen Namen und einen Wert enthalten. - Beispiel:
"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."
}
Mehrere Dropdown-Felder
- "inputType": "Mehrfachablage-Eingabe"
- Beschreibung: Mit dem mehrstufigen Dropdown-Eingabefeld kann der Benutzer mehrere Instanzen desselben Dropdown-Feldes hinzufügen und so mehrere Werte für seine Bestellung auswählen. Die spezifischen Attribute sind:
maxValue
zur Festlegung der maximalen Anzahl von Werten, die ausgewählt werden könnenelements
: um anonyme JSON-Elemente hinzuzufügen, die die Dropdown-Optionen darstellen (jedes Element muss einen Namen und einen Wert enthalten)
- Beispiel:
"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
}
Kontrollkästchen
- "inputType": "checkbox-input"
- Beschreibung: Ein boolescher Umschalteingang
- Beispiel:
"checkbox_input": {
"title": "Checkbox Input",
"inputType": "checkbox-input",
"value": "true"
}
Nummer Bereich
- "inputType": "Bereich"
- Beschreibung: Eingabe eines Zahlenbereichs
- Beispiel:
"range": {
"title": "Reading range",
"inputType": "range",
"rangeMin": "1",
"rangeMax": "20",
"value": 15
}
Hochladen von Dateien
- "inputType": "Datei hochladen"
- Beschreibung: Ermöglicht es dem Benutzer, eine Bilddatei hochzuladen.
- Beispiel:
"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
}
Farbwähler
- "inputType": "Farbeingabe"
- Beschreibung: Eine Eingabe zur Auswahl einer Farbe. Der Benutzer kann eine Liste von Hex-Werten definieren, aus der er eine Farbe auswählen kann, oder den kompletten Farbwähler verwenden.
- Beispiel:
"color": {
"inputType": "color-input",
"title": "Color Picker",
"list": [
"#fcba03",
"#1d6280"
],
"showIfComputed": true,
"value": "#fcba03"
}
Karte eingeben
- "inputType": "map-input"
- Beschreibung: Ein Texteingabefeld, das wie in einer Karte einen Schlüssel und einen Wert assoziiert. Standardmäßig lauten die Platzhalter in den Textfeldern "Schlüssel" und "Wert". Sie können geändert werden, wie im folgenden Beispiel gezeigt.
- Beispiel:
"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"
}
]
}
Um die Karten-Eingabedaten in einer tatsächlichen Javascript-Karte zu speichern, gehen Sie folgendermaßen vor:
<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>
Datenquelle Eingabe
- "inputType": "Datenquellen-Auswahl"
- Beschreibung: Ein Dropdown-Feld, mit dem Sie aus allen Datenquellen auswählen können, die in das Frontline Command Center hochgeladen wurden. So können Sie Ihre Komponente dynamisch mit verschiedenen Datenquellen verknüpfen.
- Beispiel:
"datasource": {
"noOptionsInfo": "No datasources found!",
"title": "Datasource",
"inputType": "datasource-selection",
"revisionSelection": true,
"required": true,
"info": "Select the datasource you want to use.",
"value": null
}
Diese Konfiguration wird normalerweise in Verbindung mit Datenquellenaktionen verwendet. So können Sie beispielsweise die erste Zeile der aktuellen Datenquellenaufgabe im Kontext speichern, die Zeile nach Bedarf bearbeiten (Daten extrahieren oder ändern) und dann die geänderte Zeile wieder in der Datenquellenaufgabe speichern.
Speichern Sie die erste Zeile ([0]
kann durch eine Indexvariable ersetzt werden) in Ihrem Kontext. Die zusätzliche Variable, die die String-Version der Zeile enthält, ist für die Fehlersuche praktisch, kann aber auch weggelassen werden.
<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>
Extrahieren von Daten (z. B. um sie in der Benutzeroberfläche anzuzeigen):
<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>
Ändern von Datenspalten, die in Ihrer Datenquelle vorhanden sind:
<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>
Übertragen der geänderten Zeile zurück zur Datenquelle:
<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>