Show Menu
THEMEN×

Tutorial: Publish your adaptive form

Diese Schulung ist ein Schritt in der Serie Erstellen Sie Ihr erstes adaptives Formular . Es wird empfohlen, der Serie in chronologischer Reihenfolge zu folgen, um den vollständigen Anwendungsfall zu verstehen, auszuführen und zu demonstrieren.
Nachdem das adaptive Formular fertig ist, können Sie es veröffentlichen, um es für Endbenutzer verfügbar zu machen. Die Endbenutzer können das veröffentlichte Formular auf jedem Gerät und in jedem Internetbrowser öffnen. Wenn ein adaptives Formular veröffentlicht wird, werden das Formular und der zugehörige Inhalt von einer AEM-Autoreninstanz in eine AEM-Veröffentlichungsinstanz kopiert. Das Formular wird dem Endbenutzer über die Veröffentlichungsinstanz zur Verfügung gestellt.
Sie haben die folgenden Methoden, um ein adaptives Formular zu veröffentlichen:

Bevor Sie beginnen

  • Einrichten einer AEM Forms-Veröffentlichungsinstanz : Die Veröffentlichungsinstanz ist eine öffentliche Instanz von AEM Forms, die im Veröffentlichungsmodus ausgeführt wird. In einer Produktions-Umgebung befindet sich die Veröffentlichungsinstanz außerhalb der Firewall des Unternehmens.
  • Richten Sie Replizierung und umgekehrte Replizierung ​ein: Replizierung kopiert Inhalte aus der Autoreninstanz in eine Veröffentlichungsinstanz und gibt Benutzereingaben (z. B. Formulareingaben) aus der Veröffentlichungsinstanz an die Autoreninstanz zurück.

Veröffentlichen des adaptiven Formulars als AEM-Seite

Wenn das adaptive Formular als AEM-Seite veröffentlicht wird, enthält die gesamte Webseite nur das veröffentlichte Formular. Sie können die URL des adaptiven Formulars verwenden, um es von einer anderen Webseite aus zu verknüpfen. So veröffentlichen Sie das adaptive Formular shipping-address-add-update-form als AEM-Seite:
  1. Melden Sie sich bei der Autoreninstanz von AEM Forms an und suchen Sie das adaptive Formular shipping-address-add-update-form in der AEM Forms-Benutzeroberfläche. https://localhost:4502/aem/forms.html/content/dam/formsanddocuments
  2. Wählen Sie das adaptive Formular "shipping-address-add-update-form"und klicken Sie auf Veröffentlichen . Ein Dialogfeld mit Assets, die mit dem adaptiven Formular in Verbindung stehen, wird angezeigt. Tippen Sie auf Veröffentlichen . Das adaptive Formular wird veröffentlicht und ein Dialogfeld mit Erfolg wird angezeigt.
  3. Öffnen Sie das Formular in der Veröffentlichungsinstanz. Das Formular kann vom Endbenutzer ausgefüllt und gesendet werden. https://localhost:4503/content/forms/af/shipping-address-add-update-form.html

Einbetten des adaptiven Formulars in eine AEM-Siteseite

Mit AEM Forms können Formularentwickler adaptive Formulare nahtlos in eine AEM-Siteseite einbetten. Das eingebettete adaptive Formular ist voll funktionsfähig und Benutzer können es ausfüllen und senden, ohne die Seite zu verlassen. Es hilft Benutzern, im Kontext anderer Elemente auf der Webseite zu bleiben und gleichzeitig mit dem Formular zu interagieren.
AEM Forms bietet eine Komponente, AEM Forms Container, um ein adaptives Formular in eine AEM-Siteseite einzubetten. Standardmäßig ist die Komponente nicht im AEM Sites Container sichtbar. Führen Sie die folgenden Schritte aus, um die AEM Forms Container-Komponente zu aktivieren und das adaptive Formular in eine AEM-Siteseite einzubetten:
  1. Erstellen und öffnen Sie eine Seite auf der Website We.Retail zur Bearbeitung. Beispiel: https://localhost:4502/editor.html/content/we-retail/us/en/user/shipping-and-billing-address.html . Das adaptive Formular ist in die Siteseite eingebettet.
    Sie können das adaptive Formular auch in eine bestehende Website von We.Retail einbetten. Zum Beispiel die Seite "ABOUT US" https://localhost:4502/editor.html/content/we-retail/us/en/about-us.html . Dadurch sparen Sie Zeit, eine Seite zu erstellen. Die folgenden Schritte verwenden die neu erstellte Seite.
    Die Website We.Retail wird mit AEM ausgeliefert. Wenn Sie die Website "We.Retail"nicht installiert haben, lesen Sie die Informationen unter We.Retail Reference Implementation installieren.
  2. Tippen Sie auf die -Seiteninformationen und wählen Sie auf der neu erstellten Website "Wir.Einzelhandel"die Option "Vorlage ​bearbeiten"aus. Die Vorlage der Seite wird in einer neuen Registerkarte des Browsers geöffnet.
  3. Tippen Sie im Feld Layout-Container auf . Erweitern Sie auf der Registerkarte " Zulässige Komponenten "das Akkordeon " Allgemein ", wählen Sie die Option " AEM Form "und tippen Sie auf . Die AEM Forms Container-Komponente ist für die Seite aktiviert.
  4. Öffnen Sie die Browser-Registerkarte mit der Seite AEM-Sites, die in Schritt 1 geöffnet wurde. Tippen Sie auf das Feld Komponenten hierher ​ziehen und dann auf +. Tippen Sie im Feld Neue Komponente ​einfügen auf AEM Form. Die AEM Forms-Container -Komponente wird der Seite hinzugefügt.
  5. Tippen Sie auf die AEM Forms Container -Komponente und dann auf . Ein Dialogfeld mit Eigenschaften von AEM Forms Container wird angezeigt. Suchen Sie im Feld Asset Path das adaptive Formular shipping-address-add-update-form und wählen Sie es aus. Tippen . Das adaptive Formular ist in die Seite eingebettet.
  6. Veröffentlichen Sie sowohl das adaptive Formular als auch die Siteseite. Beachten Sie dabei Folgendes:
    • Wenn Sie die AEM-Siteseite zum ersten Mal veröffentlichen und sie ein eingebettetes Formular enthält, veröffentlichen Sie die Siteseite und das eingebettete Formular.
    • Wenn Sie nur das eingebettete Formular auf einer veröffentlichten Siteseite ändern, veröffentlichen Sie das Originalformular und die Änderungen werden auf der veröffentlichten Siteseite übernommen. Die veröffentliche Siteseite enthält einen Verweis auf das Formular ein und erfordert kein erneutes Veröffentlichen der Seite.
    • Wenn Sie die Siteseite und das eingebettete Formular ändern, veröffentlichen Sie die Siteseite und das Formular erneut.
    Formular zur Änderung der Liefer- und Rechnungsadresse, das zu einer AEM-Siteseite hinzugefügt wurde.

Einbetten des adaptiven Formulars in eine externe Webseite

Sie können ein adaptives Formular in eine externe Webseite einbetten (eine Nicht-AEM-Webseite, die außerhalb von AEM gehostet wird), indem Sie einige Zeilen JavaScript in die externe Webseite einfügen. Der JavaScript-Code sendet eine HTTP-Anforderung an den AEM Forms-Server für das adaptive Formular und zugehörige Ressourcen und fügt das adaptive Formular der Webseite hinzu. Ausführliche Anweisungen finden Sie unter Einbetten des adaptiven Formulars in eine externe Webseite .