Portal-Beispiele

[ui-page: Dashboard]
  ├─ [ui-text: Welcome Message]
  ├─ [ui-chart: Task Statistics]
  └─ [ui-button: Go to Tasks]

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

[ui-page: Task Details]
  ├─ [link-in: show-task]
  │   → [function: load task data]
  │   → [ui-form: dynamic form]
  └─ [ui-form: submit]
      → [finish-usertask-node]
      → [ui-notification: success]

const taskId = msg.payload.id;
const task = flow.get(`task_${taskId}`);
 
msg.payload = {
  taskId: taskId,
  formFields: task.formFields,
  processName: task.processModelId
};
return msg;

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

[ui-page: Service Orders]
  ├─ [ui-table: orders]
  ├─ [ui-button: Navigate]  // Opens Maps
  ├─ [ui-file-upload: photos]
  ├─ [ui-signature-pad: customer signature]
  └─ [ui-button: Complete Order]
      → [finish-usertask-node]

[ui-page: Monitoring]
  ├─ [ui-chart: Processes per Day]
  ├─ [ui-gauge: Active Processes]
  ├─ [ui-table: Recent Processes]
  └─ [ui-chart: Average Duration]

[inject: every 10 seconds]
  → [query-process-instances-node]
  → [function: calculate statistics]
  → [ui-chart: update]

const processes = msg.payload;
 
// Active Processes
msg.activeCount = processes.filter(p => p.state === 'running').length;
 
// Processes per Day
const today = processes.filter(p =>
  new Date(p.startedAt).toDateString() === new Date().toDateString()
).length;
 
// Average Duration
const finished = processes.filter(p => p.state === 'finished');
msg.avgDuration = finished.reduce((sum, p) =>
  sum + (new Date(p.finishedAt) - new Date(p.startedAt)), 0
) / finished.length / 1000 / 60; // in minutes
 
return msg;

[ui-page: Approvals]
  ├─ [ui-table: pending approvals]
  │   Columns: [Request, Requester, Amount, Date]
  │
  ├─ [ui-table: row click]
  │   → [function: load details]
  │   → [ui-card: show details]
  │
  └─ [ui-button-group]
      ├─ [Approve]  → [finish-usertask: approved=true]
      └─ [Reject]   → [finish-usertask: approved=false]

{
  "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"
    },
    {
      "src": "/icon-512.png",
      "sizes": "512x512",
      "type": "image/png"
    }
  ]
}