Sie können mehrere Eingabefelder mit dem inputType "container" gruppieren.
Dies ermöglicht eine gewisse visuelle Klarheit im Konfigurationsbereich, indem die verschiedenen Aspekte, die konfiguriert werden können, getrennt werden. Eine Gruppe könnte zum Beispiel Optionen zur Konfiguration der Benutzeroberfläche (Titel, Schaltflächen, Bild) enthalten, während eine andere die eigentliche Funktionalität Ihrer Komponente konfiguriert.
Gleichzeitig bietet die Gruppierungsfunktionalität die Möglichkeit, eine Gruppe von Elementen zu duplizieren und so eine dynamische Menge konfigurierbarer Elemente zu schaffen.
Einige der spezifischen Attribute sind:
- containerGroup: Verwenden Sie dieses Attribut, um zwischen verschiedenen Arten von Gruppen zu unterscheiden. Dies kann dann bei der Iteration über Container im Workflow-Markup verwendet werden
- wiederholbar: Ermöglicht es dem Benutzer, Kopien einer Gruppe zu erstellen, die dann separat geändert werden können. Auf diese Weise können Sie wiederholbare Elemente implementieren
- zusammenklappbar: Ob es möglich sein soll, den Container aus der Konfiguration zu entfernen. Wird automatisch für kopierte Container gesetzt (siehe wiederholbar) und sollte nicht für Basiscontainer verwendet werden.
- bearbeitbar: Ob es möglich sein soll, den Titel des Containers zu ändern
"base_sensor": {
"title": "Sensor 1",
"inputType": "container",
"containerGroup": "sensors",
"repeatable": true,
"collapsible": true,
"deleteable": false,
"editable": true,
"value": {
"sensor_shown": {
"title": "Value Shown",
"inputType": "checkbox-input",
"value": false,
"showIfComputed": true
},
"sensor_type": {
"inputType": "file-upload",
"title": "Icon",
"accept": "image/png",
"multiple": false,
"value": "",
"showIfComputed": true
},
"sensor_unit": {
"title": "Unit",
"inputType": "textinput",
"value": "rpm",
"showIfComputed": true
},
"sensor_json_path": {
"title": "JSON Path ",
"inputType": "textinput",
"value": "rpm",
"showIfComputed": true
}
},
"showIfComputed": true,
"container_editing": false,
"container_opened": true
}