RemoteUserTask

Die RemoteUserTask Component bettet eine externe User-Task-Oberfläche über eine URL in einem iframe ein.

Übersicht

RemoteUserTask ist eine schlanke Komponente aus dem Common-Modul. Sie rendert einen iframe, der die volle verfügbare Fläche (100 % Breite und Höhe) einnimmt und die angegebene URL lädt. So lässt sich eine an anderer Stelle gehostete Task-UI (z.B. eine eigene App oder ein Remote-Formular) direkt in die eigene Anwendung einbetten.

Import

Die Komponente wird aus dem Common-Modul importiert — nicht aus /client:

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

Basic Usage

'use client';
 
import { RemoteUserTask } from '@5minds/processcube_app_sdk';
 
export default function TaskPage() {
  return (
    <RemoteUserTask url="https://my-task-ui.example.com/task/123" />
  );
}

Props

url

• Typ: string
• Erforderlich: Ja
• Beschreibung: Die URL, die im iframe geladen wird. Typischerweise die Adresse einer extern gehosteten User-Task-Oberfläche.

<RemoteUserTask url="https://my-task-ui.example.com/task/123" />

Vollständiges Beispiel

Die einzubettende URL kann dynamisch aus einer Task-ID zusammengesetzt werden:

'use client';
 
import { RemoteUserTask } from '@5minds/processcube_app_sdk';
import { useRouter } from 'next/navigation';
 
export default function TaskDetailPage({
  params,
}: {
  params: { id: string };
}) {
  const router = useRouter();
  const taskUrl = `https://my-task-ui.example.com/task/${params.id}`;
 
  return (
    <div style={{ height: '80vh' }}>
      <button onClick={() => router.back()}>← Zurück zur Liste</button>
      <RemoteUserTask url={taskUrl} />
    </div>
  );
}

Nächste Schritte

• SplitterLayout – Layout-Komponente für Split-Views
• Server-Funktionen – Server-seitige Funktionen für User Tasks
• Beispiele – Vollständige Beispiele