Konfiguration

Zuletzt geändert am:

Die Konfiguration erfolgt in React über Props an FormcentricForm. Die fachliche Semantik der gemeinsamen Formcentric-Keys ist zentral in Client (Allgemein) dokumentiert.

Diese Seite zeigt daher vor allem die React-Schreibweise und React-spezifische Besonderheiten.

Größen und Layout

Die gemeinsame Semantik von height und maxWidth ist in Formcentric Client (Allgemein) beschrieben. In React können diese Werte direkt als Props oder über containerProps am Wrapper gesetzt werden.

Beispiel mit Props:



Beispiel mit containerProps:


Parent URL / Double-Opt-in

Die fachliche Semantik von parentUrl ist in Formcentric Client (Allgemein) beschrieben.

In React wird derselbe gemeinsame Key direkt als Prop parentUrl gesetzt, zum Beispiel wenn sich das Formular in einem Modal befindet.


Beispiel:


Formulare mit dynamischen Werten vorbelegen

Die fachliche Semantik von vars und das gemeinsame Verhalten mit URL-Parametern sind in Formcentric Client (Allgemein) beschrieben. In React wird der gemeinsame Key direkt als Prop vars gesetzt.


Beispiel:


Sprache und Locale

Die gemeinsame Semantik von language und locale ist in Formcentric Client (Allgemein) beschrieben. In React werden dieselben Keys direkt als Props gesetzt.

Beispiel:


Eigene Übersetzungen einbinden

Die gemeinsame Semantik von localesPath und die Struktur der Übersetzungsdatei sind in Formcentric Client (Allgemein) beschrieben. In React wird derselbe gemeinsame Key direkt als Prop localesPath gesetzt.


Beispiel:



Beispiel für eine Lokalisierungsdatei:


Captcha Provider konfigurieren

Die gemeinsame Semantik von configuration ist in Formcentric Client (Allgemein) beschrieben. In React wird derselbe gemeinsame Key direkt als Prop configuration gesetzt.


Beispiel:


Formularname und weitere Metadaten

Die gemeinsame Semantik von formName, refs, requestHeaders und weiteren Metadaten ist in Formcentric Client (Allgemein) beschrieben. In React werden diese gemeinsamen Keys direkt als Props gesetzt.


Beispiel:


Vollständige Props-Referenz

Die Komponente FormcentricForm unterstützt alle Mount-Konfigurationswerte als Top-Level-Props sowie einige React-spezifische Zusatz-Props.

React-spezifische Props

  1. remountKey?: string | number
    Erzwingt eine vollständige Reinitialisierung des Formulars. Dieses Prop sollte verwendet werden, wenn sich init-time Props zur Laufzeit ändern.
  2. containerProps?: React.HTMLAttributes<HTMLDivElement>
    Übergibt Attribute an das umschließende <div>, zum Beispiel className, style, id, role, aria-* oder Event-Handler.
  3. onReady?: () => void
    Callback nach erfolgreicher Initialisierung.
  4. onError?: (error: Error) => void
    Callback bei Initialisierungs- oder Laufzeitfehlern.

Instanz- und Konfliktverhalten

  1. conflictBehavior?: 'throw' | 'stop-existing'
    Steuert das Verhalten, wenn dieselbe embedId bereits auf einer anderen oder derselben DOM-Instanz aktiv ist.
    Im React-Wrapper ist standardmäßig stop-existing aktiv.

Identifikation und Formquelle

Die fachliche Semantik der gemeinsamen Props ist in Fomcentric Client (Allgemein) beschrieben.
In React heißen sie:

Prop
embedId
formDefinition
srcUrl
dataUrl
formappUrl
designUrl

Theme- und Asset-Konfiguration

Die fachliche Semantik der gemeinsamen Props ist in Formcentric Client (Allgemein) beschrieben.
In React heißen sie:

Prop
designUrl
themeUrl
themeVariableUrl
themeVariables
templateUrl
themeDir
theme
skipThemeLoad
skipTemplatesLoad
skipFormLoad

Vorbelegung, Request-Kontext und Metadaten

Die fachliche Semantik der gemeinsamen Props ist in Formcentric Client (Allgemein) beschrieben.
In React heißen sie:

Prop
vars
params
refs
token
requestHeaders
formName
instanceId
contentHandler
env
parentUrl
configuration

Internationalisierung, Layout und Debugging

Die fachliche Semantik der gemeinsamen Props ist in Formcentric Client (Allgemein) beschrieben.
In React heißen sie:

Prop
language
locale
localesPath
debug
maxWidth
height

Wichtige Verhaltensregeln und Defaults

  1. Mindestens eines von embedId oder formDefinition muss gesetzt sein.
  2. Die meisten Konfigurations-Props sind reine Initialisierungs-Props. Änderungen daran werden nicht automatisch in eine laufende Instanz übernommen.
  3. Änderungen an embedId, formDefinition oder remountKey führen zu einer erneuten Einbettung.
  4. Änderungen an FormcentricConfigProvider Werten oder browser-globalen Defaults wirken ebenfalls erst nach einer erneuten Einbettung.
  5. containerProps, onReady und onError verhalten sich wie normale React-Props und können ohne Reinitialisierung aktualisiert werden.
  6. Im React-Wrapper ist conflictBehavior standardmäßig auf stop-existing gesetzt.
  7. skipThemeLoad und skipTemplatesLoad werden nur berücksichtigt, wenn sie explizit gesetzt sind.
  8. Wenn Sie dasselbe Formular bewusst weiterverwenden möchten, sollte embedId stabil bleiben.
  9. Für eine erzwungene Neuinitialisierung sollte remountKey verwendet werden, nicht ein wechselnder React-key.
  10. Objektbasierte Props wie vars, params, themeVariables und configuration sollten als serialisierbare Objekte übergeben werden.
  11. Wenn parentUrl nicht explizit gesetzt wird, kann die aktuelle Seiten-URL als Rücksprungkontext verwendet werden.

Feedback