Skip to Content
Low-CodeAPI ReferenceUI Nodes Referenz

UI Nodes Referenz

Die ProcessCube® UI Nodes erweitern die Dashboard-2-Bibliothek um spezialisierte Oberflaechenkomponenten. Sie basieren auf Dashboard-2  und fuegen sich nahtlos in bestehende Dashboard-Layouts ein.

Dynamic Form

Zeigt dynamische Formulare an, die auf Basis von UserTask-Konfigurationen oder JSON-Schema generiert werden. Ideal fuer die Darstellung von UserTask-Formularen im Dashboard.

Eigenschaften:

EigenschaftTypBeschreibung
GroupUI GroupDashboard-2-Gruppe, in der das Formular angezeigt wird
SizeNumberBreite des Formulars in Grid-Einheiten
LabelStringUeberschrift des Formulars

Input (msg):

PropertyTypBeschreibung
msg.payloadObjectUserTask-Daten mit Formularkonfiguration
msg.schemaObjectJSON-Schema fuer die Formularfelder (alternativ)
msg.ui_updateObjectDynamische Aktualisierung einzelner Felder

Output (msg):

PropertyTypBeschreibung
msg.payloadObjectVom Benutzer eingegebene Formulardaten

Beispiel:

// UserTask-Daten fuer die Dynamic Form aufbereiten
msg.schema = {
    type: "object",
    properties: {
        name: {
            type: "string",
            title: "Name des Antragstellers"
        },
        email: {
            type: "string",
            format: "email",
            title: "E-Mail-Adresse"
        },
        amount: {
            type: "number",
            title: "Betrag in EUR",
            minimum: 0
        },
        approved: {
            type: "boolean",
            title: "Genehmigt"
        }
    },
    required: ["name", "email", "amount"]
};

Typischer Flow:

[usertask-input] → [function: Daten aufbereiten] → [ui-dynamic-form]
                                                          ↓
[usertask-output] ← [function: Ergebnis formatieren] ← [ui-dynamic-form Output]

Dynamic Table

Zeigt Daten in einer interaktiven Tabelle mit Sortierung, Filterung und Pagination an. Geeignet fuer die Anzeige von Prozessinstanzen, UserTask-Listen oder beliebigen Datensaetzen.

Eigenschaften:

EigenschaftTypBeschreibung
GroupUI GroupDashboard-2-Gruppe
SizeNumberBreite der Tabelle in Grid-Einheiten
LabelStringUeberschrift der Tabelle
ColumnsArraySpaltendefinitionen
PaginationBooleanSeitennavigation aktivieren
Page SizeNumberEintraege pro Seite

Input (msg):

PropertyTypBeschreibung
msg.payloadArrayDatensaetze fuer die Tabelle
msg.columnsArraySpaltendefinitionen (optional, ueberschreibt Konfiguration)

Output (msg):

PropertyTypBeschreibung
msg.payloadObjectAusgewaehlte Zeile
msg.actionStringAusgefuehrte Aktion (z.B. “select”, “delete”)

Beispiel:

// Daten fuer die Dynamic Table
msg.payload = [
    { id: 1, name: "Bestellung #1001", status: "In Bearbeitung", datum: "2025-01-15" },
    { id: 2, name: "Bestellung #1002", status: "Abgeschlossen", datum: "2025-01-16" },
    { id: 3, name: "Bestellung #1003", status: "Warte auf Freigabe", datum: "2025-01-17" }
];
 
msg.columns = [
    { key: "id", title: "ID", width: "80px" },
    { key: "name", title: "Bezeichnung" },
    { key: "status", title: "Status" },
    { key: "datum", title: "Datum", width: "120px" }
];

UI Page Navigation

Ermoeglicht die programmgesteuerte Navigation zwischen Dashboard-2-Seiten. Nuetzlich, um nach Abschluss eines UserTasks automatisch zur naechsten Seite weiterzuleiten.

Eigenschaften:

EigenschaftTypBeschreibung
GroupUI GroupDashboard-2-Gruppe
Target PageStringZielseite fuer die Navigation

Input (msg):

PropertyTypBeschreibung
msg.pageStringPfad der Zielseite (z.B. “/dashboard/auftraege”)
msg.paramsObjectURL-Parameter (optional)

Beispiel:

// Nach UserTask-Abschluss zur Uebersicht navigieren
msg.page = "/dashboard/auftraege";
msg.params = { status: "completed" };
return msg;

Audio Capture

Nimmt Audio im Browser auf und sendet die Aufnahme als Message weiter. Ermoeglicht Voice-Input in Dashboard-Anwendungen.

Eigenschaften:

EigenschaftTypBeschreibung
GroupUI GroupDashboard-2-Gruppe
SizeNumberBreite des Aufnahme-Widgets
FormatStringAudioformat (z.B. “wav”, “webm”)
Max DurationNumberMaximale Aufnahmedauer in Sekunden

Output (msg):

PropertyTypBeschreibung
msg.payloadBufferAudio-Daten im konfigurierten Format
msg.formatStringAudioformat der Aufnahme
msg.durationNumberDauer der Aufnahme in Sekunden

Beispiel-Flow:

[ui-audio-capture] → [function: Audio verarbeiten] → [http request: Sprache-zu-Text API]
                                                          ↓
                     [ui-text: Transkription anzeigen] ← [function: Ergebnis aufbereiten]

Process Progress Bar

Zeigt den Fortschritt eines BPMN-Prozesses visuell an. Die Node stellt den aktuellen Schritt im Prozess dar und hebt abgeschlossene sowie aktive Schritte hervor.

Eigenschaften:

EigenschaftTypBeschreibung
GroupUI GroupDashboard-2-Gruppe
SizeNumberBreite der Fortschrittsanzeige
LabelStringUeberschrift

Input (msg):

PropertyTypBeschreibung
msg.payloadObjectProzessinstanz-Daten mit Fortschrittsinformationen
msg.payload.currentStepStringAktueller Schritt im Prozess
msg.payload.stepsArrayAlle Schritte des Prozesses

Beispiel:

// Prozessfortschritt an die Progress Bar senden
msg.payload = {
    processName: "Bestellfreigabe",
    steps: [
        { name: "Bestellung eingegangen", status: "completed" },
        { name: "Pruefung", status: "completed" },
        { name: "Genehmigung", status: "active" },
        { name: "Versand", status: "pending" },
        { name: "Abgeschlossen", status: "pending" }
    ]
};

Allgemeine Hinweise

Dashboard-2-Abhaengigkeit

Alle UI Nodes benoetigen eine installierte und konfigurierte Dashboard-2-Instanz. Die Konfiguration erfolgt ueber die Dashboard-2-Einstellungen im Node-RED-Editor.

Responsive Design

Die UI Nodes unterstuetzen das responsive Grid-Layout von Dashboard-2. Definieren Sie die Breite in Grid-Einheiten, und das Layout passt sich automatisch an verschiedene Bildschirmgroessen an.

Weiterführende Informationen

Runtime Extensions ReferenzKonzepte & Grundlagen