Submitter

const Submitter: React.FC<ISubmitter>

Experimental

Anzeige-Karte für die Daten eines Einbringers.

WIP — Props und Layout können sich ohne Deprecation-Phase ändern. Für Produktiv-Sachbearbeiter-Cockpits noch nicht freigegeben.

Vorschau

dataSource darf ein Query-Ergebnis oder direkt ein JSON-Objekt liefern — das Widget unterscheidet beides am refetch-Callback. Für die Vorschau genügt deshalb ein einfaches Objekt, ohne Query-Kontext.

Vorschau

Anna Steiner

Geburtsdatum

01. März 1985

Adresse

1010 Wien

anna.steiner@example.org

Code

import { Submitter } from '@gentics/cockpit/widgets';
import { usePerson } from '@gentics/cockpit/core';

<Submitter
  dataSource={() => usePerson(personId)}
  additionalFields={[
    { label: 'Geburtsdatum', path: 'dateOfBirth' },
    { label: 'Adresse', path: ['zip', 'city'] },  // beide Werte in EINER Zeile
    { path: 'email' },                            // ohne Label: Field übernimmt
  ]}
/>

Im Sachbearbeiter-Cockpit verwenden

Die üblichen Daten kommen aus usePerson(personId) — der Hook läuft nur mit gesetzter Id und braucht einen Mandanten. Zum Zusammenspiel von Query-Ergebnis und einfachem Objekt siehe Datenquellen.

Props

Experimental

Props des Submitter-Widgets.

WIP — Feldnamen und Defaults können sich noch ändern.

Properties

additionalFields?

optional additionalFields?: object[]

Experimental

Weitere Werte unterhalb des Namens. path ist ein einzelner Pfad oder eine Liste von Pfaden, deren Werte nebeneinander in EINER Zeile stehen (z.B. PLZ + Ort). Ohne label und mit genau einem Pfad übernimmt Field die Anzeige.

label?

optional label?: string

Überschrift über dem Wert. Fehlt sie und ist path ein einzelner String, übernimmt Field die Anzeige samt eigener Formatierung und Skeleton.

path

path: string | string[]

Ein Pfad — oder mehrere, deren Werte durch Leerzeichen getrennt in derselben Zeile stehen (z. B. ["zip", "city"] → „4020 Linz").

---

className?

optional className?: string

Experimental

Zusätzliche Klassen für die Karte. Sie werden an die Default-Klassen angehängt (keine Konfliktauflösung wie beim Field).

---

dataSource?

optional dataSource?: () => JsonObject | UseQueryResult<JsonObject, Error>

Experimental

Datenquelle des Einbringers. Erlaubt ist beides: eine Query-Funktion (() => usePerson(id)) oder eine Funktion, die direkt ein JsonObject liefert — ein reines Objekt wird intern auf eine Query-Quelle normalisiert. Unterschieden wird an der refetch-Methode, die nur ein echtes Query-Ergebnis hat.

Ohne dataSource bleibt die Karte im Ladezustand (Skeleton im Kopf).

Returns

JsonObject | UseQueryResult<JsonObject, Error>

---

namePath?

optional namePath?: string

Experimental

Pfad zum Vornamen im dataSource-Objekt. Default "firstName".

---

style?

optional style?: CSSProperties

Experimental

Inline-Styles für die Karte.

---

surNamePath?

optional surNamePath?: string

Experimental

Pfad zum Nachnamen im dataSource-Objekt. Default "lastName".

Wertformatierung

Die Zusatzfelder werden vor der Anzeige aufbereitet:

Eingabewert	Anzeige
ISO-Datum ("1985-03-01")	ausgeschrieben auf Deutsch: 01. März 1985 (Format DD. MMMM YYYY)
true / false	Ja / Nein
null, undefined, ""	—
alles andere	unverändert als Text

Der Kopfbereich zeigt Vor- und Nachname; solange dataSource keine Daten liefert, erscheint dort ein Skeleton.