Zuletzt geändert am:
Dieser Artikel beschreibt, wie Sie Formcentric-Formulare in Ihre Website einbetten.
Installieren Sie die Vue-Komponente und das benötigte Client-Paket:
Die Vue-Komponente benötigt @formcentric/client als Peer-Abhängigkeit und lädt die Formular-Runtime aus diesem Paket. Der Import der Komponente erfolgt weiterhin aus @formcentric/client-vue.
Der Anwendungs-Bundler verarbeitet die Runtime und ihre dynamischen Imports. Veröffentlichen Sie alle erzeugten Chunks unter der konfigurierten Asset-Basis-URL. Die Anforderungen an Paket-Bundling und direkte Auslieferung finden Sie unter Client (Allgemein) bei Runtime & Auslieferung.
Wenn Sie lokale SCSS-Dateien eines Themes einbinden möchten, benötigen Sie außerdem SASS, zum Beispiel mit Vite:
Die Einbettung erfolgt über die Komponente FormcentricForm. Die Konfiguration wird über Props übergeben. data-fc-* Attribute und ein globaler Initialisierungsaufruf sind für die Vue-Integration nicht erforderlich.
Ein einfaches Beispiel:
Neben den Props am einzelnen FormcentricForm unterstützt Vue zwei weitere Ebenen für gemeinsame Defaults:
| Quelle | Reichweite | Priorität | Beschreibung |
browser-globale Defaults über configure(...) oder window.formcentric |
gesamte Browser-Seite | niedrig | werden vom zugrunde liegenden SDK-Mount als Defaults gelesen |
FormcentricConfigProvider |
Vue-Teilbaum | mittel | liefert subtree-weite Defaults für alle FormcentricForm Komponenten darunter |
Props an FormcentricForm |
einzelne Form | hoch | überschreiben Browser-Globals und Provider-Defaults |
Dabei gilt:
| Thema | Verhalten |
| verschachtelte Provider | Mehrere FormcentricConfigProvider werden zusammengeführt. Innere Provider überschreiben äußere Werte. |
| Objektwerte | requestHeaders, themeVariables und configuration werden zusammengeführt. Bei gleichen Schlüsseln gewinnt die nähere beziehungsweise lokale Konfiguration. |
| Remount-Verhalten | Änderungen an Provider-Defaults oder browser-globalen Defaults wirken nicht automatisch auf bereits laufende Formulare. Für eine laufende Instanz muss zusätzlich remountKey geändert oder die Komponente neu gemountet werden. |
| Static-only | dynamicInit ist kein Vue-Prop und hat für komponentenbasierte Mounts keine Wirkung. |
Die vollständige Liste der gemeinsamen Keys und ihrer Semantik steht zentral in Client (Allgemein).
Nicht als gemeinsame Defaults gedacht sind insbesondere embedId, formDefinition, vars, params, refs, formName, instanceId, conflictBehavior, remountKey, containerProps, onReady und onError.
Beispiel mit FormcentricConfigProvider:
Für browser-globale Defaults außerhalb von Vue-spezifischem Code kann zusätzlich configure(...) aus @formcentric/client verwendet werden.
Die Theme-Ressourcen können direkt als SCSS und JavaScript in die Anwendung integriert werden.
Beachten Sie dabei, dass die Anwendung für die Verwendung von SCSS konfiguriert sein sollte.
Mit Vite genügt es, hierfür SASS zu installieren:
Danach können Sie die Styles des ausgewählten Themes in eine eigene index.scss Datei importieren:
Importieren Sie anschließend die Theme-Dateien in Ihre Vue-Anwendung:
Wenn Sie Theme-Variablen direkt übergeben möchten, können Sie diese zusätzlich als Prop setzen:
Die Vue-Komponente ist als Integrations-Bridge konzipiert und nicht als vollständig kontrolliertes Vue-Widget. Die meisten Props wirken nur beim Initialisieren der Form.
Wenn sich Konfigurationswerte zur Laufzeit ändern, sollte das Formular explizit neu initialisiert werden. Hierfür steht das Prop remountKey zur Verfügung.
Beispiel:
Für einfache Integrationsfälle können optionale Callbacks verwendet werden:
onReady: wird nach erfolgreicher Initialisierung aufgerufenonError: wird bei Initialisierungs- oder Laufzeitfehlern aufgerufenBeispiel:
onReady signalisiert, dass die Initialisierung erfolgreich abgeschlossen wurde. Es ist jedoch kein separater Garant für einen „ersten sichtbaren Render-Zeitpunkt“ des Formulars.
