Skip to Content
Low-CodeConceptsPortal + UserTask Integration

Portal + UserTask Integration

Das Portal ist eine Progressive Web App (PWA), die es ermöglicht, UserTask-Formulare und Dashboards für die Prozessautomatisierung zu erstellen. Diese Seite erklärt, wie das Portal funktioniert und wie Sie es für Ihre Anwendungen nutzen.

Was ist das Portal?

Das Portal ist eine PWA-basierte Anwendung, die auf Dashboard-2 aufbaut und speziell für die Bearbeitung von BPMN-UserTasks optimiert ist.

Hauptmerkmale

  • PWA: Installierbar als App auf Desktop und Mobile
  • Offline-Fähig: Funktioniert auch ohne Internetverbindung
  • Responsive: Automatische Anpassung an verschiedene Bildschirmgrößen
  • UserTask-Integration: Native Anbindung an Engine
  • Dashboard-2: Moderne UI-Komponenten

Architektur

┌─────────────────────────────────────────┐
│        ProcessCube® Portal (PWA)        │
├─────────────────────────────────────────┤
│                                          │
│  ┌──────────────┐  ┌──────────────┐    │
│  │ Dashboard-2  │  │ Service      │    │
│  │ UI Pages     │  │ Worker       │    │
│  └──────────────┘  └──────────────┘    │
│         │                  │             │
│         └──────────────────┘             │
│                  │                       │
└──────────────────┼───────────────────────┘
                   │
         ┌─────────▼──────────┐
         │  ProcessCube®      │
         │  LowCode           │
         │  (Node-RED)        │
         └─────────┬──────────┘
                   │
         ┌─────────▼──────────┐
         │  ProcessCube®      │
         │  Engine            │
         └────────────────────┘

PWA-Konzept

Was ist eine PWA?

Eine Progressive Web App (PWA) ist eine Webanwendung, die wie eine native App funktioniert:

  • Installierbar: Via Browser auf Gerät installieren
  • Offline-Fähig: Service Worker cached Inhalte
  • Push-Notifications: Browser-Benachrichtigungen
  • App-Icon: Erscheint auf Homescreen/Desktop

PWA-Features im Portal

Service Worker:

// Cached Ressourcen
- Dashboard-2 UI Components
- Statische Assets (CSS, JS, Images)
- API-Responses (optional)

Web App Manifest:

{
  "name": "ProcessCube Portal",
  "short_name": "Portal",
  "start_url": "/portal",
  "display": "standalone",
  "background_color": "#ffffff",
  "theme_color": "#f7a823",
  "icons": [
    {
      "src": "/icon-192.png",
      "sizes": "192x192",
      "type": "image/png"
    }
  ]
}

Dashboard-2 Integration

Das Portal nutzt Dashboard-2 für die UI-Erstellung.

Dashboard-2 Nodes

Verfügbare UI-Komponenten:

Forms & Input:

  • ui-form: Komplette Formulare
  • ui-text-input: Texteingabe
  • ui-dropdown: Auswahllisten
  • ui-button: Action-Buttons
  • ui-slider: Schieberegler
  • ui-date-picker: Datumsauswahl

Display:

  • ui-text: Textanzeige
  • ui-table: Daten-Tabellen
  • ui-chart: Diagramme
  • ui-gauge: Anzeigen

Layout:

  • ui-group: Container für Widgets
  • ui-page: Einzelne Seiten
  • ui-tabs: Tab-Navigation

Dashboard-2 Configuration

UI-Base Node konfigurieren:

Name: "Portal"
Path: /portal
Theme: Light/Dark

Seiten-Struktur

/portal
  ├── /dashboard  (Übersicht)
  ├── /tasks      (UserTasks Liste)
  ├── /task/:id   (UserTask Details)
  └── /processes  (Process Monitoring)

UserTask-Integration

Das Herzstück des Portals ist die UserTask-Bearbeitung.

UserTask-Flow Pattern

Pattern: Load → Display → Complete

[Engine Event: userTaskCreated]
  → [Store UserTask in Context]
  → [Send Notification to UI]

[UI: Load UserTasks Button Click]
  → [Query UserTasks from Context]
  → [Display in ui-table]

[UI: UserTask Form Submit]
  → [Finish UserTask Node]
  → [Update UI]

Implementierung

1. UserTasks laden

// Flow: Load UserTasks
[inject: on page load]
  → [http request: GET /api/user-tasks]
  → [function: format for table]
  → [ui-table: display tasks]

Function: format for table:

const userTasks = msg.payload;
 
msg.payload = userTasks.map(task => ({
  id: task.id,
  name: task.name,
  process: task.processModelId,
  created: new Date(task.createdAt).toLocaleString()
}));
 
return msg;

2. UserTask-Formular anzeigen

// Flow: Show UserTask Form
[ui-table: row click]
  → [function: load task details]
  → [ui-form: show form with task data]

Function: load task details:

const taskId = msg.payload.id;
const task = flow.get(`task_${taskId}`);
 
msg.payload = {
  taskId: taskId,
  formFields: task.formFields  // z.B. {amount: 1000, comment: ""}
};
 
return msg;

3. UserTask beenden

// Flow: Complete UserTask
[ui-form: submit]
  → [function: prepare finish request]
  → [finish-usertask-node]
  → [ui-notification: success]
  → [reload tasks list]

Function: prepare finish request:

msg.userTaskInstanceId = msg.payload.taskId;
msg.payload = {
  approved: msg.payload.approved,
  comment: msg.payload.comment
};
 
return msg;

Standard-Portal

LowCode bietet ein vorkonfiguriertes Standard-Portal für UserTask-Bearbeitung.

Features

UserTask-Liste:

  • Übersicht aller wartenden UserTasks
  • Filterung nach Prozess
  • Sortierung nach Datum

UserTask-Details:

  • Dynamisches Formular basierend auf formFields
  • Validierung
  • Submit/Cancel Buttons

Process-Übersicht:

  • Liste laufender Prozesse
  • Process-Details
  • Heatmap-Visualisierung

Aktivierung

In docker-compose.yml:

environment:
  - PROCESSCUBE_PORTAL_ENABLED=true
  - PROCESSCUBE_PORTAL_PATH=/portal

Zugriff:

http://localhost:1880/portal

Custom Portal erstellen

Sie können eigene Portal-Seiten erstellen.

Schritt 1: UI-Base Node konfigurieren

Menü → Manage palette → Install → @flowfuse/node-red-dashboard

UI-Base Node:
  Name: "My Portal"
  Path: /my-portal
  Theme: Custom

Schritt 2: Seiten erstellen

Seite: Task-Liste:

[inject: on page load]
  → [get-usertasks-node]
  → [ui-table: task list]

[ui-table: row selected]
  → [flow: show task form]

Seite: Task-Formular:

[ui-form]
  ├─ ui-text-input: Comment
  ├─ ui-dropdown: Approved (Yes/No)
  └─ ui-button: Submit

[ui-button: submit click]
  → [finish-usertask-node]
  → [ui-notification: success]

Schritt 3: PWA konfigurieren

Web App Manifest erstellen (public/manifest.json):

{
  "name": "My ProcessCube Portal",
  "short_name": "Portal",
  "start_url": "/my-portal",
  "display": "standalone",
  "background_color": "#ffffff",
  "theme_color": "#f7a823",
  "icons": [
    {
      "src": "/icon-192.png",
      "sizes": "192x192",
      "type": "image/png"
    },
    {
      "src": "/icon-512.png",
      "sizes": "512x512",
      "type": "image/png"
    }
  ]
}

Service Worker registrieren:

// In Dashboard-2 Settings
if ('serviceWorker' in navigator) {
  navigator.serviceWorker.register('/sw.js');
}

Beispiel: UserTask-Portal

Vollständiges Beispiel eines UserTask-Portals.

Seite 1: Dashboard (Übersicht)

[ui-page: "Dashboard"]
  ├─ [ui-text: "Welcome to Portal"]
  ├─ [ui-chart: "Process Statistics"]
  └─ [ui-button: "Go to Tasks"]

Seite 2: UserTasks Liste

[ui-page: "Tasks"]
  ├─ [inject: load tasks on page open]
  │   → [get-usertasks-node]
  │   → [ui-table: tasks]
  │
  └─ [ui-table: row click]
      → [link out: "show-task-form"]

Seite 3: UserTask Formular

[ui-page: "Task Details"]
  ├─ [link in: "show-task-form"]
  │   → [function: load task]
  │   → [ui-form: show form]
  │
  └─ [ui-form: submit]
      → [finish-usertask-node]
      → [ui-notification: "Task completed"]
      → [link out: "back-to-tasks"]

Mobile-Optimierung

Das Portal ist für mobile Geräte optimiert.

Responsive Design

Dashboard-2 passt sich automatisch an:

  • Desktop: Multi-Column Layout
  • Tablet: 2-Column Layout
  • Mobile: Single-Column Layout

Touch-Optimierung

  • Große Buttons: Mindestens 44x44px
  • Touch-Gesten: Swipe, Tap, Long-Press
  • Virtual Keyboard: Automatisches Fokussieren

Offline-Modus

UserTasks können im Offline-Modus bearbeitet werden:

// Function: Queue UserTask Completion
if (navigator.onLine) {
  // Online: Sofort absenden
  return msg;
} else {
  // Offline: In Queue speichern
  const queue = context.get("offlineQueue") || [];
  queue.push(msg.payload);
  context.set("offlineQueue", queue);
 
  // Später senden, wenn online
  return null;
}
 
// Event: Online wieder verfügbar
window.addEventListener('online', () => {
  const queue = context.get("offlineQueue") || [];
  queue.forEach(task => {
    // Task absenden
  });
  context.set("offlineQueue", []);
});

Best Practices

Vermeiden Sie lange Verbindungen zwischen UI-Pages:

[ui-page: A] → [link out: "to-b"]
[link in: "to-b"] → [ui-page: B]

2. Context für UI-State

Speichern Sie UI-Zustand in Context:

flow.set("currentTaskId", taskId);
flow.set("selectedProcess", processId);

3. Error Handling

Zeigen Sie Fehler im UI an:

[catch] → [ui-notification: error]

4. Loading States

Zeigen Sie Loading-Indikatoren:

[button click]
  → [ui-text: "Loading..."]
  → [api call]
  → [ui-text: "Done"]

5. PWA-Installation promoten

Zeigen Sie Installation-Prompt:

let deferredPrompt;
 
window.addEventListener('beforeinstallprompt', (e) => {
  e.preventDefault();
  deferredPrompt = e;
  // Show install button
});

Nächste Schritte

Ressourcen

Node-RED GrundlagenProcessCube®-spezifische Konzepte