Vous pouvez regrouper plusieurs champs de saisie en utilisant l'inputType "container".
Cela permet une certaine clarté visuelle dans le panneau de configuration en séparant les différents aspects qui peuvent être configurés. Par exemple, un groupe peut contenir des options de configuration de l'interface utilisateur (titre, boutons, image), tandis qu'un autre groupe configure la fonctionnalité réelle de votre composant.
En même temps, la fonctionnalité de regroupement est assortie de l'option permettant à l'utilisateur de dupliquer un groupe d'éléments, créant ainsi la possibilité de configurer une quantité dynamique d'éléments configurables.
Certains de ces attributs spécifiques sont :
- containerGroup : Utilisez cet attribut pour différencier les différents types de groupes. Il peut ensuite être utilisé lors de l'itération sur les conteneurs dans le balisage du flux de travail.
- répétable : Permet à l'utilisateur de créer des copies d'un groupe, qui peuvent ensuite être modifiées séparément. De cette façon, vous pouvez mettre en œuvre des éléments répétables
- démontable : S'il doit être possible de retirer le conteneur de la configuration. Cette option est définie automatiquement pour les conteneurs copiés (voir repeatable) et ne doit pas être utilisée pour les conteneurs de base.
- modifiable : S'il doit être possible de modifier le titre du conteneur
"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
}