Skip to Content
DocsApp SdkComponentsComponents

Components

Das ProcessCube® App-SDK stellt vorgefertigte React Components für häufige Use Cases bereit.

Verfügbare Components

User Task Components

RemoteUserTask

Zeigt eine User Task mit ihrem Dynamic UI Formular an.

import { RemoteUserTask } from '@5minds/processcube_app_sdk/client';
 
<RemoteUserTask
  flowNodeInstanceId={task.id}
  onFinish={() => console.log('Task abgeschlossen')}
/>

Mehr zu RemoteUserTask →

Layout Components

SplitterLayout

Responsive Split-Layout für komplexe Anwendungen.

import { SplitterLayout } from '@5minds/processcube_app_sdk/client';
 
<SplitterLayout
  primaryComponent={<TaskList />}
  secondaryComponent={<TaskDetail />}
/>

Mehr zu SplitterLayout →

Alle Components im Überblick

ComponentBeschreibungImport
RemoteUserTaskUser Task mit Dynamic UI@5minds/processcube_app_sdk/client
SplitterLayoutResponsive Split-Layout@5minds/processcube_app_sdk/client
DynamicUIDynamic UI Formular-Renderer@5minds/processcube_app_sdk/client
BpmnViewerBPMN-Diagramm Viewer@5minds/processcube_app_sdk/client
DocumentationViewerProzess-Dokumentation@5minds/processcube_app_sdk/client
ProcessInstanceInspectorProzess-Instanz Inspector@5minds/processcube_app_sdk/client

Import-Pfade

Alle Components werden aus dem Client-Pfad importiert:

import {
  RemoteUserTask,
  SplitterLayout,
  DynamicUI,
  BpmnViewer,
} from '@5minds/processcube_app_sdk/client';

Client vs. Server Components

Die App-SDK Components sind Client Components und müssen in Dateien mit 'use client' Direktive verwendet werden:

app/tasks/[id]/page.tsx
'use client';
 
import { RemoteUserTask } from '@5minds/processcube_app_sdk/client';
 
export default function TaskPage({ params }: { params: { id: string } }) {
  return (
    <RemoteUserTask
      flowNodeInstanceId={params.id}
      onFinish={() => console.log('Done')}
    />
  );
}

Best Practices

Server Components bevorzugen

Wo möglich, nutzen Sie Server-Side Functions statt Client Components:

❌ Client Component:

'use client';
 
import { useEffect, useState } from 'react';
 
export default function Tasks() {
  const [tasks, setTasks] = useState([]);
 
  useEffect(() => {
    fetch('/api/tasks').then(res => res.json()).then(setTasks);
  }, []);
 
  return <TaskList tasks={tasks} />;
}

✅ Server Component:

import { getWaitingUserTasks } from '@5minds/processcube_app_sdk/server';
 
export default async function Tasks() {
  const { userTasks } = await getWaitingUserTasks();
 
  return <TaskList tasks={userTasks} />;
}

Hybrid Approach

Kombinieren Sie Server und Client Components:

app/tasks/page.tsx
import { getWaitingUserTasks } from '@5minds/processcube_app_sdk/server';
import { TaskItem } from './task-item'; // Client Component
 
export default async function TasksPage() {
  // Server-Side Daten laden
  const { userTasks } = await getWaitingUserTasks();
 
  return (
    <div>
      <h1>Meine Aufgaben</h1>
      {userTasks.map((task) => (
        // Client Component für Interaktivität
        <TaskItem key={task.flowNodeInstanceId} task={task} />
      ))}
    </div>
  );
}
app/tasks/task-item.tsx
'use client';
 
import { RemoteUserTask } from '@5minds/processcube_app_sdk/client';
import { useState } from 'react';
 
export function TaskItem({ task }) {
  const [isExpanded, setIsExpanded] = useState(false);
 
  return (
    <div>
      <button onClick={() => setIsExpanded(!isExpanded)}>
        {task.flowNodeName}
      </button>
 
      {isExpanded && (
        <RemoteUserTask
          flowNodeInstanceId={task.flowNodeInstanceId}
          onFinish={() => setIsExpanded(false)}
        />
      )}
    </div>
  );
}

Styling

Alle Components sind mit Tailwind CSS kompatibel:

<RemoteUserTask
  flowNodeInstanceId={task.id}
  className="rounded-lg shadow-md p-4"
  onFinish={() => console.log('Done')}
/>

TypeScript Support

Alle Components sind vollständig typisiert:

import type { RemoteUserTaskProps } from '@5minds/processcube_app_sdk/client';
 
const props: RemoteUserTaskProps = {
  flowNodeInstanceId: 'task-123',
  onFinish: () => {},
  onCancel: () => {},
};
 
<RemoteUserTask {...props} />

Nächste Schritte

ProcessCube® App-SDKRemoteUserTask