Skip to Content
DocsLowcodeQuickstartErstes Flow-Beispiel

Erstes Flow-Beispiel

Lernen Sie die Grundlagen der Flow-basierten Programmierung kennen und erstellen Sie Ihren ersten ProcessCube® LowCode-Flow.

Grundlagen

ProcessCube® LowCode ist Flow-basiert. Das bedeutet, Informationen werden von Node zu Node weitergereicht. Dafür müssen die einzelnen Nodes miteinander verbunden werden.

Flow erstellen

  1. Nodes verbinden: Verbinden Sie den Output einer Node per Drag & Drop mit dem Input einer anderen Node
  2. Nodes konfigurieren: Doppelklick auf eine Node öffnet den Konfigurationsdialog
  3. Änderungen speichern: Klicken Sie auf “Fertig”, um die Konfiguration zu speichern
  4. Flow deployen: Nach jeder Änderung (gekennzeichnet durch hellblaue Kreise an den Nodes) müssen Sie den Flow mit dem roten “Deploy”-Button oben rechts neu deployen

User Task über LowCode abschließen

Im Folgenden erstellen Sie einen Flow, der eine User Task aus einem BPMN-Prozess verarbeitet und abschließt.

Voraussetzungen

  • Ein BPMN-Prozess mit einer User Task muss im Studio modelliert sein
  • Die User Task sollte ein Dynamic-UI Text Form Field enthalten
  • Der Prozess muss auf einer Engine deployed sein

Schritt 1: User Task Event Listener

Fügen Sie eine usertask-event-listener Node hinzu, um auf neue User Tasks zu warten.

Konfiguration:

  • Name: Beliebiger Name für die Node
  • Engine URL: Die URL der Engine, auf der der Prozess deployed wurde
  • User Task: Die ID des User Tasks (oder leer lassen für alle User Tasks)
  • Event: Wählen Sie new
  • Query: Optional - zusätzliche Bedingungen (kann leer bleiben)

Schritt 2: Debug Node hinzufügen

  1. Fügen Sie eine Debug Node hinzu und verbinden Sie sie mit dem Event Listener
  2. Klicken Sie auf Deploy
  3. Starten Sie den Prozess im Studio

Erwartetes Ergebnis im Debug-Fenster:

{
  "flowNodeInstanceId": "a0eeb7bf-8a47-4965-90f4-2ee6b6297dfb",
  "userTaskEvent": {},
  "userTask": {},
  "action": "new",
  "type": "usertask"
}

Schritt 3: Dynamic Form Node

Die Dynamic Form zeigt die User Task als Formular im Dashboard an.

  1. Fügen Sie eine ui-dynamic-form Node neben der Debug Node ein
  2. Group/Page konfigurieren: Wählen Sie den Ort im Dashboard aus
  3. Actions definieren: Erstellen Sie zwei Actions (z. B. “Abbrechen” und “Absenden”)
    • Actions sind Buttons, die mit den Outputs der Node korrelieren
    • Der Name der Action ist nur für die Anzeige relevant

Nach der Konfiguration sehen Sie zwei Outputs an der Dynamic Form Node. Hovern Sie über die Outputs, um die Namen der zugehörigen Actions zu sehen.

Schritt 4: User Task Output Node

  1. Platzieren Sie eine usertask-output Node hinter dem “Absenden”-Output der Dynamic Form
  2. Engine konfigurieren: Verbinden Sie die Node mit der korrekten Engine
  3. Result setzen: Geben Sie msg.payload.formData an
    • Die Dynamic Form liefert sowohl Form-Daten als auch User Task-Daten als Output

Schritt 5: Testen

Wichtig: Die Subscription reagiert nur auf neue User Tasks. Die User Task darf nicht bereits aktiv sein, bevor der Flow deployed wurde.

  1. Deploy den Flow
  2. Starten Sie einen neuen Prozess im Studio
  3. Navigieren Sie zu /dashboard
  4. Tragen Sie die Daten im Formular ein
  5. Klicken Sie auf Absenden
  6. Im Studio können Sie beobachten, wie die User Task mit den eingegebenen Daten abgeschlossen wird

Prozess über LowCode starten

Erweitern Sie den Flow um einen Start-Button, automatische Navigation und Rückleitung.

Schritt 1: Prozess-Start-Button

  1. Fügen Sie eine button Node hinzu (Dashboard 2.0 UI-Komponente)
  2. Group erstellen:
    • Klicken Sie beim Group-Input auf das Plus
    • Erstellen Sie eine neue Page im Dashboard
    • Wählen Sie das UI und ein Theme
    • Belassen Sie die restlichen Einstellungen auf Standard
  3. Label setzen: z. B. “Prozess starten”

Schritt 2: Prozess starten

  1. Fügen Sie eine process-start Node hinter den Button ein
  2. Konfiguration:
    • Engine: Wählen Sie die Engine aus
    • ProcessModelId: Die ID des Prozessmodells
    • Start Event ID: Die ID des Start Events

Schritt 3: Navigation zur User Task-Seite

  1. Fügen Sie eine function Node hinter die process-start Node ein
  2. Setzen Sie den Seitennamen in der Payload:
msg.payload = 'Page 1'; // Ihr Seitenname
return msg;

Tipp: Die verfügbaren Seiten finden Sie im Dropdown oben rechts unter Dashboard 2.0.

  1. Fügen Sie eine ui-control Node hinter die function Node ein
  2. Wählen Sie das Dashboard unter UI aus

Schritt 4: Rücknavigation nach Abschluss

  1. Kopieren Sie die function und ui-control Nodes (Maustaste gedrückt halten und ziehen)
  2. Einfügen Sie die Nodes hinter der usertask-output Node
  3. Passen Sie den Seitennamen in der function Node an (zurück zur Startseite)

Gesamter Flow

Der komplette Flow ermöglicht:

  1. ✅ Prozess per Button starten
  2. ✅ Automatische Weiterleitung zum Formular
  3. ✅ User Task mit Dynamic Form bearbeiten
  4. ✅ Automatische Rückleitung zur Startseite nach Abschluss

Nächste Schritte

Starten mit Docker ComposeAnbindung an ProcessCube®