Zuletzt geändert am:
Dieser Artikel beschreibt, wie Sie Formcentric-Formulare in Ihre Website einbetten.
Installieren Sie zunächst den Formcentric-Client in Ihrem Projekt:
Wenn Sie lokale SCSS-Dateien eines Themes einbinden möchten, benötigen Sie außerdem SASS:
Die Einbettung erfolgt über die Funktion mount() aus @formcentric/client. Da es derzeit keine offizielle Angular-Komponente gibt, empfiehlt es sich, eine kleine projektspezifische Angular-Wrapper-Komponente zu erstellen.
Eine mögliche Implementierung könnte so aussehen:
formcentric.component.ts:
formcentric.component.html:
Verwendung der Komponente:
Die Theme-Ressourcen können direkt als SCSS und JavaScript in die Angular-Anwendung integriert werden.
Importieren Sie die Styles des ausgewählten Themes zum Beispiel in src/styles.scss:
Importieren Sie anschließend die JavaScript-Templates des Themes in Ihre Angular-Anwendung, zum Beispiel in main.ts oder in Ihre lokale Wrapper-Komponente:
Ergänzen Sie danach die mount()-Konfiguration:
Beachten Sie dabei:
skipThemeLoad: true und skipTemplatesLoad: true wird verhindert, dass dieselben Ressourcen zusätzlich zur Laufzeit geladen werden.
Wenn Sie Theme-Variablen direkt übergeben möchten, können Sie diese zusätzlich in der Konfiguration setzen:
mount() liefert eine Instanz mit Lifecycle-Methoden zurück. Diese kann verwendet werden, um die eingebettete Form gezielt zu steuern.
Beispiel:
Dabei gilt:
ready wird aufgelöst, sobald die Initialisierung erfolgreich abgeschlossen wurde.reload() initialisiert das Formular im gleichen Container neu.stop() beendet die laufende Instanz, belässt das Ziel-Element jedoch im DOM.unmount() entfernt die Form und bereinigt die Instanz vollständig.Die SDK-Integration ist restart-basiert. Konfigurationswerte werden beim Initialisieren übernommen und nicht automatisch live in eine laufende Instanz übertragen.
Wenn sich Konfigurationswerte ändern, sollte die Einbettung explizit neu aufgebaut werden, zum Beispiel über ein kontrolliertes unmount() und anschließendes erneutes mount().
Für Angular empfiehlt sich hierfür ein eigener Input wie remountKey, der eine gezielte Reinitialisierung auslöst.
Dabei gilt:
remountKey sollten eine erneute Initialisierung auslösen.embedId oder formDefinition sollten zu einer erneuten Einbettung führen.embedId stabil bleiben.Für einfache Integrationsfälle können optionale Callbacks direkt in der Konfiguration verwendet werden:
onReady: wird nach erfolgreicher Initialisierung aufgerufenonError: wird bei Initialisierungs- oder Laufzeitfehlern aufgerufenBeispiel:
Wenn Sie eine eigene Angular-Wrapper-Komponente verwenden, können diese Callbacks zusätzlich über @Output()-Events nach außen weitergereicht werden, zum Beispiel als ready und error.
