Skip to Content
DocsApp SdkComponentsRemoteUserTask

RemoteUserTask

Die RemoteUserTask Component rendert eine User Task mit ihrem Dynamic UI Formular in einem iframe.

Übersicht

RemoteUserTask ist eine React Client Component, die User Tasks aus der ProcessCube® Engine lädt und mit dem Dynamic UI System darstellt.

Import

import { RemoteUserTask } from '@5minds/processcube_app_sdk/client';

Basic Usage

app/tasks/[id]/page.tsx
'use client';
 
import { RemoteUserTask } from '@5minds/processcube_app_sdk/client';
import { useRouter } from 'next/navigation';
 
export default function TaskPage({ params }: { params: { id: string } }) {
  const router = useRouter();
 
  return (
    <RemoteUserTask
      flowNodeInstanceId={params.id}
      onFinish={() => {
        console.log('Task abgeschlossen');
        router.push('/tasks');
      }}
      onCancel={() => {
        console.log('Task abgebrochen');
        router.back();
      }}
    />
  );
}

Props

flowNodeInstanceId

  • Typ: string
  • Erforderlich: Ja
  • Beschreibung: Die Flow Node Instance ID der User Task
<RemoteUserTask
  flowNodeInstanceId="task-123-456-789"
  onFinish={() => {}}
/>

onFinish

  • Typ: () => void
  • Erforderlich: Nein
  • Beschreibung: Callback, der aufgerufen wird, wenn die User Task abgeschlossen wurde
<RemoteUserTask
  flowNodeInstanceId={task.id}
  onFinish={() => {
    console.log('Task wurde abgeschlossen');
    router.push('/tasks');
  }}
/>

onCancel

  • Typ: () => void
  • Erforderlich: Nein
  • Beschreibung: Callback, der aufgerufen wird, wenn die User Task abgebrochen wurde
<RemoteUserTask
  flowNodeInstanceId={task.id}
  onCancel={() => {
    console.log('Task wurde abgebrochen');
    router.back();
  }}
/>

className

  • Typ: string
  • Erforderlich: Nein
  • Beschreibung: Custom CSS-Klassen für das Container-Element
<RemoteUserTask
  flowNodeInstanceId={task.id}
  className="rounded-lg shadow-md"
  onFinish={() => {}}
/>

Vollständiges Beispiel

Mit Next.js App Router

app/tasks/[id]/page.tsx
'use client';
 
import { RemoteUserTask } from '@5minds/processcube_app_sdk/client';
import { useRouter } from 'next/navigation';
 
export default function TaskDetailPage({
  params,
}: {
  params: { id: string };
}) {
  const router = useRouter();
 
  const handleFinish = () => {
    console.log('Task abgeschlossen:', params.id);
    router.push('/tasks');
  };
 
  const handleCancel = () => {
    console.log('Task abgebrochen');
    router.back();
  };
 
  return (
    <div className="container mx-auto p-4">
      <div className="mb-4">
        <button
          onClick={() => router.back()}
          className="text-blue-500 hover:underline"
        >
          ← Zurück zur Liste
        </button>
      </div>
 
      <RemoteUserTask
        flowNodeInstanceId={params.id}
        onFinish={handleFinish}
        onCancel={handleCancel}
        className="rounded-lg shadow-lg border"
      />
    </div>
  );
}

TypeScript

Vollständige TypeScript-Unterstützung:

import type { RemoteUserTaskProps } from '@5minds/processcube_app_sdk/client';
 
const props: RemoteUserTaskProps = {
  flowNodeInstanceId: 'task-123',
  onFinish: () => console.log('Done'),
  onCancel: () => console.log('Cancelled'),
  className: 'my-custom-class',
};
 
<RemoteUserTask {...props} />

Nächste Schritte

ComponentsSplitterLayout