Skip to Content
DocsLowcodeConceptsPortal + UserTask Integration

Portal + UserTask Integration

Das ProcessCube® 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 ProcessCube® 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 ProcessCube® 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

ProcessCube® 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