Zuletzt geändert am:
Analog zur Einbettung auf herkömmlichen Websites erfolgt die Einbettung des Formcentric-Clients in React ebenfalls über die Einbindung der hierfür notwendigen JavaScript-Dateien.
Der im Artikel Allgemeine Einbettung beschriebene Einbettungsansatz lässt sich in der Regel auch in Single-Page-Anwendungen anwenden. Die im Folgenden beschriebenen Einbettungsschritte werden jedoch empfohlen, um eine schnellere Ladezeit der Ressourcen und mehr Freiraum bei der Entwicklung zu gewährleisten.
Navigieren Sie hierzu in das Root-Verzeichnis Ihres Projekts und führen Sie folgenden Befehl mit dem Package Manager Ihrer Wahl aus:
npm install @formcentric/client
Danach sollte in Ihrem node_modules Verzeichnis der Formcentric-Client lokal installiert sein.
Erstellen Sie im Anschluss, analog zur allgemeinen Einbettung, einen Formular-Container in der gewünschten Komponente, hier jedoch als Vue-Template, anstatt als HTML
Eine dynamisch konfigurierbare Formcentric-Komponente könnte zum Beispiel folgendermaßen aussehen:
<script setup lang="ts">
import { onMounted } from 'vue'
import '@formcentric/client/dist/formapp.js'
import '@formcentric/client/dist/formcentric.js'
interface FormcentricProps {
id: string
}
declare global {
interface Window {
formcentric: {
initFormcentric: () => void
}
}
}
const props = defineProps<FormcentricProps>()
onMounted(() => {
window.formcentric.initFormcentric()
})
</script>
<template>
<section>
<div
:data-fc-id="id"
data-fc-src-url="https://form.formcentric.com"
/>
</section>
</template>
Beachten Sie, dass mit der oben dargestellten Implementierung Themes nach wie vor über Formcentric ausgeliefert werden. Um die Ressourcen synchron zur Laufzeit bereitzustellen, müssen Sie diese noch in den Build-Prozess integrieren. Hierfür stehen Ihnen mehrere Möglichkeiten zur Verfügung, abhängig von den von Ihnen verwendeten Technologien und Ihren persönlichen Präferenzen.
Die Theme-Ressourcen können direkt als SCSS und JavaScript in die Anwendung integriert werden, ähnlich wie die Client-Skripte.
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:
npm i sass --save-dev
Danach können Sie die Styles des ausgewählten Themes als SCSS Dateien in die Anwendung importieren. Das Injizieren von CSS-Variablen wird dadurch überflüssig. Sowohl die Variablen als auch das Theme selbst können Sie dann in eine angelegte index.scss Datei importieren:
@import '@formcentric/client/dist/themes/hamburg/variables/variables.scss';
@import '@formcentric/client/dist/themes/hamburg/styles.scss';
Importieren Sie anschließend die index.scss Datei mit import 'styles/index.scss' und die JavaScript-Templates mit import '@formcentric/client/dist/themes/hamburg/script.js' in die Anwendung:
<script setup lang="ts">
import { onMounted } from 'vue'
import 'styles/index.scss'
import '@formcentric/client/dist/themes/hamburg/script.js';
import '@formcentric/client/dist/formapp.js'
import '@formcentric/client/dist/formcentric.js'
declare global {
interface Window {
formcentric: {
initFormcentric: () => void
}
}
}
interface FormcentricProps {
id: string
}
const props = defineProps<FormcentricProps>()
onMounted(() => {
window.formcentric.initFormcentric()
})
</script>
<template>
<section>
<div
:data-fc-id="id"
data-fc-src-url="https://form.formcentric.com"
data-fc-skip-templates-load="true"
/>
</section>
</template>
