DynamicUi

Rendert dynamische Formulare basierend auf UserTask-FormField-Definitionen. Unterstützt 25+ Feldtypen und Custom Fields.

Beispiel


'use client';
 
import { DynamicUi } from '@5minds/processcube_app_sdk/client';
 
export default function TaskForm({ task }) {
  return (
    <DynamicUi
      task={task}
      onSubmit={async (result, rawFormData, task) => {
        console.log('Ergebnis:', result);
      }}
      title="Aufgabe bearbeiten"
    />
  );
}

Datenfluss

Props

Prop	Typ	Pflicht	Beschreibung
`task`	`UserTaskInstance`	Ja	Die User Task mit FormField-Definitionen
`onSubmit`	`(result, formData, task) => Promise<void>`	Ja	Submit-Handler
`headerComponent`	`JSX.Element`	Nein	Custom Header über dem Formular
`className`	`string`	Nein	CSS-Klasse für den Root-Container
`classNames`	`Partial<Record<'wrapper' \| 'base' \| 'header' \| 'body' \| 'footer', string>>`	Nein	CSS-Klassen für Unterelemente
`title`	`ReactNode`	Nein	Titel des Formulars
`customFieldComponents`	`DynamicUiFormFieldComponentMap`	Nein	Custom-Renderer für Feldtypen
`state`	`FormState`	Nein	Externer Formular-State
`onStateChange`	`(newValue, formFieldId, formState) => void`	Nein	Callback bei Wertänderung
`darkMode`	`true`	Nein	Dark-Mode aktivieren

Unterstützte Feldtypen

Boolean, Checkbox, Color, Date, Datetime-Local, Decimal, Email, Enum, File, Header, Hidden, Integer, Month, Paragraph, Password, Radio, Range, Select, Confirm, String, Tel, Textarea, Time, URL, Week, Custom

Custom Fields

Über customFieldComponents können eigene Renderer für bestimmte Feldtypen registriert werden:


<DynamicUi
  task={task}
  onSubmit={handleSubmit}
  customFieldComponents={{
    'my-custom-field': ({ field, value, onChange }) => (
      <input
        type="text"
        value={value}
        onChange={(e) => onChange(e.target.value)}
      />
    ),
  }}
/>

CSS

CSS wird beim Import der Komponente automatisch geladen.