Zuletzt geändert am:
Die gemeinsame Semantik der Formcentric-Keys, die Priorität der Konfigurationsquellen und die Zuordnung zwischen Static, SDK, React und Vue sind zentral in Client (Allgemein) dokumentiert.
Diese Seite beschreibt daher vor allem:
data-fc-*window.formcentricDie Konfiguration im Static-Modus erfolgt primär über data-fc-* Attribute am Formular-Container. Alle Attributwerte sind im HTML zunächst Strings. JSON-basierte Werte müssen daher als JSON-String übergeben werden.
Die fachliche Bedeutung der folgenden Felder ist zentral in Client (Allgemein) beschrieben. Hier geht es nur um die Static-Schreibweise.
| Static-Syntax | Entspricht | Hinweis |
data-fc-id |
Formular-ID / embedId |
lokal erforderlich, wenn keine Formular-Definition verwendet wird |
data-fc-form-definition |
Formular-Definition / formDefinition |
Alternative zu data-fc-id |
data-fc-src-url |
srcUrl |
kann zusätzlich browser-global als Default gesetzt werden |
data-fc-data-url |
dataUrl |
kann zusätzlich browser-global als Default gesetzt werden |
data-fc-formapp-url |
formappUrl |
kann zusätzlich browser-global als Default gesetzt werden |
data-fc-design-url |
designUrl |
kann zusätzlich browser-global als Default gesetzt werden |
| Static-Syntax | Entspricht | Hinweis |
data-fc-vars |
vars |
JSON-String; nicht browser-global |
data-fc-params |
params |
JSON-String; nicht browser-global |
data-fc-refs |
refs |
nicht browser-global |
data-fc-token |
token |
kann zusätzlich browser-global als Default gesetzt werden |
data-fc-request-headers |
requestHeaders |
JSON-String mit String-Werten |
data-fc-language |
language |
kann zusätzlich browser-global als Default gesetzt werden |
data-fc-locale |
locale |
kann zusätzlich browser-global als Default gesetzt werden |
data-fc-locales-path |
localesPath |
kann zusätzlich browser-global als Default gesetzt werden |
data-fc-name |
Formularname / formName |
nicht browser-global |
data-fc-instance-id |
instanceId |
nicht browser-global |
data-fc-content-handler |
contentHandler |
kann zusätzlich browser-global als Default gesetzt werden |
data-fc-env |
env |
kann zusätzlich browser-global als Default gesetzt werden |
data-fc-parent-url |
parentUrl |
kann zusätzlich browser-global als Default gesetzt werden |
data-fc-configuration |
configuration |
JSON-String; Objektwerte werden mit Defaults zusammengeführt |
Wichtig bei data-fc-vars:
data-fc-vars als auch URL-Parameter denselben Schlüssel enthalten, überschreibt der URL-Parameter den Wert aus data-fc-vars.| Static-Syntax | Entspricht | Hinweis |
data-fc-theme-dir |
themeDir |
kann zusätzlich browser-global als Default gesetzt werden |
data-fc-theme |
theme |
kann zusätzlich browser-global als Default gesetzt werden |
data-fc-theme-url |
themeUrl |
kann zusätzlich browser-global als Default gesetzt werden |
data-fc-theme-variable-url |
themeVariableUrl |
kann zusätzlich browser-global als Default gesetzt werden |
data-fc-template-url |
templateUrl |
kann zusätzlich browser-global als Default gesetzt werden |
data-fc-theme-variables |
themeVariables |
JSON-String; Objektwerte werden mit Defaults zusammengeführt |
data-fc-skip-theme-load |
skipThemeLoad |
nur relevant, wenn explizit gesetzt |
data-fc-skip-templates-load |
skipTemplatesLoad |
nur relevant, wenn explizit gesetzt |
data-fc-skip-form-load |
skipFormLoad |
fortgeschrittene Option |
Hinweis zum Theme-Verhalten:
data-fc-theme-dir und data-fc-theme gemeinsam oder data-fc-theme-url und data-fc-theme-variable-url gemeinsam gesetzt sind.data-fc-template-url oder die Kombination aus data-fc-theme-dir und data-fc-theme benötigt.| Static-Syntax | Entspricht | Hinweis |
data-fc-max-width |
maxWidth |
kann zusätzlich browser-global als Default gesetzt werden |
data-fc-height |
height |
kann zusätzlich browser-global als Default gesetzt werden |
data-fc-debug |
debug |
kann zusätzlich browser-global oder am Script-Tag gesetzt werden |
data-fc-watch |
Static-only |
beobachtet Attributänderungen am Container |
Am Script-Tag selbst werden zusätzliche Static-spezifische Steuerungen ausgewertet:
| Attribut | Entspricht | Hinweis |
data-fc-debug="true" |
debug |
Static-spezifische Schreibweise direkt am Script-Tag |
data-fc-dynamic-init="true" |
dynamicInit |
Static-only; automatische Initialisierung neu hinzugefügter Container |
Beispiel:
Die verfügbaren browser-globalen Default-Keys sind nicht primär Static-spezifisch. Dieselben Default-Werte werden auch vom SDK und damit indirekt von React und Vue ausgewertet. Static-spezifisch ist vor allem die direkte Arbeit mit window.formcentric.
| Mechanismus | Typischer Einsatz | Beschreibung |
direkte Mutation von window.formcentric |
Static, SDK, React, Vue |
Setzt browser-globale Defaults direkt am Window-Objekt. Diese Form funktioniert auch schon vor dem Laden von formcentric.js. |
window.formcentric.configure({...}) |
Static nach dem Laden von formcentric.js |
Validiert die übergebenen browser-globalen Defaults und ersetzt die zuvor gesetzten Default-Werte. |
configure({...}) aus @formcentric/client |
SDK, React, Vue |
Entspricht funktional window.formcentric.configure({...}), wird aber in modulbasierten Integrationen direkt aus dem Client-Paket importiert. |
Die gemeinsame Priorität, Merge-Semantik und die Liste der browser-globalen Default-Keys sind zentral in Client (Allgemein) beschrieben.
Für Static gilt zusätzlich:
data-fc-* Attribute am Container überschreiben browser-globale Defaults.dynamicInit ist eine Static-only-Erweiterung.Die vollständige Liste der gemeinsamen browser-globalen Default-Keys steht zentral in Client (Allgemein).
Im Static-Pfad kommt zusätzlich dynamicInit als Static-only Erweiterung hinzu.
| API | Beschreibung |
window.formcentric.initFormcentric() |
Initialisiert alle aktuell vorhandenen Static-Container. |
window.formcentric.stopAll() |
Stoppt alle laufenden Instanzen. |
window.formcentric.unmountAll() |
Unmountet alle laufenden Instanzen. |
window.formcentric.getInstance(embedId) |
Liefert die aktuelle Instanz zu einer embedId. |
window.formcentric.setInstanceOptions(embedId, options) |
Setzt vor der Initialisierung instanzspezifische Optionen für eine bestimmte embedId. Im Code wird dies ignoriert, wenn die Instanz bereits läuft. |
Beispiel für browser-globale Defaults vor dem Laden des Scripts:
Beispiel für validierte browser-globale Defaults nach dem Laden des Scripts:
Die fachliche Semantik von parentUrl ist in Client (Allgemein) beschrieben. Im Static-Pfad wird derselbe gemeinsame Key als Attribut data-fc-parent-url gesetzt.
Wenn data-fc-parent-url nicht gesetzt ist, verwendet der Client standardmäßig window.location.href.
Beispiel:
Die fachliche Semantik von vars und das gemeinsame Verhalten mit URL-Parametern sind in Client (Allgemein) beschrieben. Im Static-Pfad wird der gemeinsame Key als Attribut data-fc-vars gesetzt.
Beispiel:
Beim Laden des Formulars wird der URL-Parameter in die Initialisierungsvariablen übernommen.
Die gemeinsame Semantik von localesPath und die Struktur der Übersetzungsdatei sind in Client (Allgemein) beschrieben. Im Static-Pfad kann dieser gemeinsame Key entweder lokal über data-fc-locales-path oder browser-global über window.formcentric.localesPath gesetzt werden.
Die Datei muss als JavaScript-Modul vorliegen und per export default exportiert werden.
Beispiel:
Beispiel für eine Lokalisierungsdatei:
