Mit AEM Forms können Formularentwickler adaptive Formulare und interaktive Kommunikation nahtlos in eine AEM Sites-Einzelseiten-App (SPA) einbetten. Das eingebettete adaptive Formular und die interaktive Kommunikation sind voll funktionsfähig und Benutzer können das Formular ausfüllen und senden, ohne die Seite zu verlassen. Dies hilft Benutzern, im Kontext anderer Elemente auf der Webseite zu bleiben und gleichzeitig mit dem adaptiven Formular oder der interaktiven Kommunikation zu interagieren.
In AEM Sites-Einzelseitenanwendungen können Sie ein adaptives Formular oder eine interaktive Kommunikation mithilfe der Komponente AEM Forms SPA Container hinzufügen. Es handelt sich um eine AEM Forms-Komponente für AEM Sites-SPA, die Sie Ihrer Sites-Seite hinzufügen können.
Weitere Informationen zum Einbetten eines adaptiven Formulars in ein nicht SPA AEM Sites finden Sie unter Einbetten eines adaptiven Formulars oder einer interaktiven Kommunikation in die AEM Sites-Seite.
Um ein adaptives Formular oder eine interaktive Kommunikation in AEM Sites einzubetten, SPA die AEM Forms SPA Container-Komponente verwenden, stellen Sie sicher, dass Sie Folgendes installiert haben:
Führen Sie die folgenden Schritte aus, um die AEM Forms SPA Container-Komponente zu installieren:
Klonen oder laden Sie die AEM Forms-Komponente für SPA herunter.
Installieren Sie die AEM Forms-Komponente für SPA. Die Anweisungen zum Installieren der Komponente finden Sie in der Datei README.md .
Die Komponente enthält eine Beispiel-React-Komponente , die verwendet werden kann, um SPA Container-Komponente in ein React-basiertes SPA-Projekt zu integrieren.
Klonen oder laden Sie ein React-basiertes SPA-Projekt herunter.
Integrieren Sie SPA Container-Komponente in ein React-basiertes SPA-Projekt mithilfe der Anweisungen in der Datei README.md .
Nachdem Sie die AEM Forms SPA Container-Komponente installiert und die Komponente in ein React-basiertes SPA-Projekt integriert haben, können Sie adaptive Formulare und interaktive Kommunikation in die AEM Sites-Seite einbetten.
So betten Sie ein adaptives Formular oder eine interaktive Kommunikation mit AEM Forms für SPA Container-Komponente ein:
Öffnen Sie die Seite AEM Sites im Bearbeitungsmodus, in die Sie ein adaptives Formular oder interaktive Kommunikation einbetten möchten.
Fügen Sie die Komponente AEM Formular für SPA mit einer der folgenden Optionen auf der Seite ein:
Tippen Sie auf den Layout-Container auf der Seite "Sites"auf + und wählen Sie die Komponente AEM Formular für SPA aus.
Ziehen Sie die Komponente AEM Formular für SPA aus dem Komponenten-Browser auf die Seite.
Suchen Sie nach einem adaptiven Formular oder einer interaktiven Kommunikation im Assets-Browser und ziehen Sie es auf die Seite "Sites". Es bettet das Formular in einen AEM Forms für SPA Komponentencontainer ein.
Das Rendern mehrerer AEM Forms SPA Container-Komponenten auf einer Seite wird nicht unterstützt. Sie können mehrere AEM Forms SPA-Container auf einer Seite haben, es wird jedoch jeweils nur eine Komponente gerendert. Stellen Sie sicher, dass nur eine Komponente auf einer Seite sichtbar ist, um Diskrepanzen zu vermeiden.
Tippen Sie auf die eingebettete AEM Forms SPA Container-Komponente auf der Siteseite und dann auf in der Aktionsleiste. Das Dialogfeld AEM Forms SPA Container bearbeiten wird geöffnet.
Geben Sie im Dialogfeld AEM Forms-Container bearbeiten Folgendes an:
Asset-Typ: Wählen Sie den Typ des einzubettenden Assets. Die Optionen sind Adaptives Formular und Interaktive Kommunikation
Asset-Pfad: Suchen Sie das einzubettende adaptive Formular oder die interaktive Kommunikation und wählen Sie es aus. Das Feld wird automatisch ausgefüllt, wenn ein adaptives Formular oder eine interaktive Kommunikation mithilfe des Assets-Browsers eingefügt wird.
Kanal (nur interaktive Kommunikation): Wählen Sie den Typ des einzubettenden interaktiven Kanals aus. Die Optionen sind Webkanal und Druckkanal.
Design: Wählen Sie ein Design aus, das die Formatierung für Komponenten Ihres adaptiven Formulars oder der interaktiven Kommunikation definiert. Die Formatierung enthält Erscheinungsbildeigenschaften wie Schriftart, Hintergrundfarbe, Größe und Ausrichtung ein.
Tippen Sie auf , um die Einstellungen zu speichern. Das adaptive Formular oder die interaktive Kommunikation ist jetzt in die Seite eingebettet.
Beachten Sie die folgenden Szenarien zum Veröffentlichen eines eingebetteten Assets (adaptives Formular oder interaktive Kommunikation) auf der AEM Sites-Seite:
AEM Siteseite behält einen Verweis auf das adaptive Formular und die interaktive Kommunikation im AEM Forms-Container bei. Daher werden alle Konfigurationen und Eigenschaften wie das Design, die Stile und die Sendeaktion, die im ursprünglichen adaptiven Formular konfiguriert sind, sowie die interaktive Kommunikation im eingebetteten adaptiven Formular und in der interaktiven Kommunikation beibehalten.
Um eine Konfiguration oder Eigenschaft des eingebetteten adaptiven Formulars und der interaktiven Kommunikation zu ändern, führen Sie einen der folgenden Schritte aus.
Beachten Sie die folgenden Punkte, wenn Sie adaptive Formulare in AEM-Siteseiten einbetten: