Dynamic Form
@5minds/node-red-dashboard-2-processcube-dynamic-form — Dashboard-2 UI-Node zur Anzeige von UserTask-Formularen basierend auf JSON-Schema (FormKit).
Überblick
Die Dynamic Form rendert Formulare dynamisch aus der FormField-Konfiguration von UserTasks. Sie unterstützt Validierung, Markdown-Rendering und verschiedene Feldtypen über das FormKit-Schema.
npm-Paket: @5minds/node-red-dashboard-2-processcube-dynamic-form
Version: 2.7.x
Lizenz: Apache-2.0
Node: ui-dynamic-form
Kategorie: Dashboard 2.0
Verwendung
Der Output eines usertask-input-Nodes wird mit dem Input der Dynamic Form verbunden. Das Formular wird automatisch aus den FormFields des UserTasks gerendert.
[usertask-event-listener] → [usertask-input] → [ui-dynamic-form] → [usertask-output]
(event: new) (sendtype: first) (result: msg.payload)Input
| Feld | Typ | Beschreibung |
|---|---|---|
msg.payload.userTask | Object | UserTask-Objekt mit FormFields |
msg.payload.userTask.userTaskConfig.formFields | Array | FormField-Definitionen |
Output
| Feld | Typ | Beschreibung |
|---|---|---|
msg.payload | Object | Ausgefüllte Formulardaten |
Unterstützte Feldtypen
| Typ | Beschreibung |
|---|---|
string | Textfeld |
number | Zahlenfeld |
boolean | Checkbox |
checkbox | Checkbox |
confirm | Bestätigungsfeld |
date | Datumsfeld (YYYY-MM-DD) |
object | Verschachtelte Felder |
array | Listen |
Features
- FormKit-Schema: Formulare werden über das FormKit-Framework gerendert
- Validierung: Clientseitige Validierung basierend auf FormField-Regeln
- Markdown: Unterstützung für Markdown in Beschreibungen (via
marked) - Sanitization: HTML-Bereinigung mit DOMPurify
- Responsive: Vollständig responsive für Desktop und Mobile
Abhängigkeiten
- Vue 3.3.8
- FormKit 1.6.9
- DOMPurify 3.2.6
- marked 16.1.1
Installation
Im Enterprise Image enthalten. Keine separate Installation erforderlich.
Nächste Schritte
- Engine Nodes — UserTask-Integration
- Dynamic Table — Tabellen für Daten
- Dynamic List — Listen für Prozessinstanzen