Tutorial: Veröffentlichen des adaptiven Formulars

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 bereit ist, können Sie das Formular 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 Internet-Browser öffnen. Wenn ein adaptives Formular veröffentlicht wird, werden das Formular und der zugehörige Inhalt aus einer AEM-Autoreninstanz in eine AEM-Veröffentlichungsinstanz kopiert. Das Formular wird dem Endbenutzer über die Veröffentlichungsinstanz zur Verfügung gestellt.

Sie haben folgende Möglichkeiten, um ein adaptives Formular zu veröffentlichen:

Bevor Sie beginnen

  • Einrichten einer AEM Forms-Veröffentlichungsinstanz: Die Veröffentlichungsinstanz ist eine öffentlich zugängliche Instanz von AEM Forms die im Veröffentlichungsmodus ausgeführt wird. In einer Produktionsumgebung befindet sich die Veröffentlichungsinstanz außerhalb der Firewall des Unternehmens.
  • Einrichten der Replikation und Rückwärtsreplikation: Die Replikation kopiert Inhalte von der Autoreninstanz an eine Veröffentlichungsinstanz und gibt Benutzereingaben (beispielsweise Formulareingaben) von 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 veröffentlichte Formulare. 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 AEM Forms-Autoreninstanz an und suchen Sie in der AEM Forms-Benutzeroberfläche das adaptive Formular „shipping-address-add-update-form“.
    https://localhost:4502/aem/forms.html/content/dam/formsanddocuments
  2. Wählen Sie das angepasste Formular „shipping-address-add-update-form“ aus und tippen Sie auf Veröffentlichen. Es wird ein Dialogfeld mit Assets für das adaptive Formular angezeigt. Tippen Sie auf Veröffentlichen. Das adaptive Formular wird veröffentlicht und eine Erfolgsmeldung erscheint.
  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 eines adaptiven Formulars in eine AEM Sites-Seite

AEM Forms ermöglicht es Formularentwicklern, adaptive Formulare nahtlos in eine AEM-Sites-Seite einzubetten. 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, zum Einbetten eines adaptiven Formulars in eine AEM Sites-Seite. Standardmäßig ist die Komponente im AEM Sites-Container nicht sichtbar. Führen Sie die folgenden Schritte aus, um die AEM Forms-Container-Komponente zu aktivieren und das adaptive Formular in eine AEM Sites-Seite einzubetten:

  1. Erstellen und öffnen Sie eine Seite in der „We.Retail“-Website zur Bearbeitung. Zum Beispiel: https://localhost:4502/editor.html/content/we-retail/us/en/user/shipping-and-billing-address.html. Das adaptive Formular ist in die Sites-Seite eingebettet.

    Sie können das adaptive Formular auch in eine vorhandene We.Retail-Site’s-Seite einbetten. Zum Beispiel die Seite „ÜBER UNS“ https://localhost:4502/editor.html/content/we-retail/us/en/about-us.html. Es spart Ihnen die Zeit, eine Seite zu erstellen. Die folgenden Schritte verwenden die neu erstellte Seite.

    Die „We.Retail“-Seite wird mit AEM ausgeliefert. Wenn Sie die „We.Retail“-Seite nicht installiert haben, lesen Sie „We.Retail“-Verweis-Implementierung um die Seite zu installieren.

  2. Tippen Sie auf Eigenschaften Seiteninformationen und wählen Sie die Option Vorlage bearbeiten auf der neu erstellten „We.Retail“-Webseite. Die Vorlage der Seite wird in einer neuen Registerkarte des Browsers geöffnet.

  3. Tippen Sie in das Feld Layout-Container und tippen Sie auf Feed-Management. Erweitern Sie auf der Registerkarte Erlaubte Komponenten das Akkordeon Allgemein, wählen Sie die Option AEM Form und tippen Sie auf save_icon. Die AEM Forms-Container-Komponente ist für die Seite aktiviert.

  4. Öffnen Sie die Browser-Registerkarte mit der AEM Sites-Seite, die in Schritt 1 geöffnet wurde. Tippen Sie auf das Feld Komponenten hierher ziehen und tippen Sie auf +. Tippen Sie im Feld Neue Komponente einfügen auf AEM-Forms. Die AEM Forms-Container-Komponente wird der Seite hinzugefügt.

  5. Tippen Sie auf die AEM Forms-Container-Komponente und tippen Sie auf configure-icon. Es wird ein Dialogfeld mit den Eigenschaften des AEM Forms-Containers angezeigt. Durchsuchen Sie das Feld Asset-Pfad nach dem adaptiven Formular „shipping-address-add-update-form“ und wählen Sie es aus. Tippen Sie auf save_icon. Das adaptive Formular wird in die Seite eingebettet.

  6. Veröffentlichen Sie sowohl das adaptive Formular als auch die Sites-Seite. Beachten Sie dabei Folgendes:

    • Wenn Sie die AEM Sites-Seite zum ersten Mal veröffentlichen und sie ein eingebettetes Formular enthält, veröffentlichen Sie die Sites-Seite und das eingebettete Formular.

    • Wenn Sie nur das eingebettete Formular in einer veröffentlichte Site-Seite geändert haben, veröffentlichen Sie das Originalformular, und die Änderungen werden auf der veröffentlichten Site-Seite übernommen. Die veröffentliche Siteseite enthält einen Verweis auf das Formular ein und erfordert kein erneutes Veröffentlichen der Seite.

    • Wenn Sie die Sites-Seite und das eingebettete Formular geändert haben, veröffentlichen Sie die Sites-Seite und das Formular erneut.

      embed-in-aem-sites
      Formular zur Änderung der Versand- und Rechnungsadresse zu einer AEM Sites-Seite hinzugefügt.

Einbetten des adaptiven Formulars in eine externe Web-Seite

Sie können ein adaptives Formular in eine externe Web-Seite (d. h. eine von AEM verschiedene Web-Seite, die außerhalb von AEM gehostet wird) einbetten, indem Sie einige Zeilen JavaScript in die externe Web-Seite einfügen. Der JavaScript-Code sendet eine HTTP-Anfrage an den AEM Forms-Server für das adaptive Formular und die zugehörigen Ressourcen und fügt das adaptive Formular der Web-Seite hinzu. Detaillierte Anweisungen dazu finden Sie unter Einbetten des adaptiven Formulars in eine externe Web-Seite.

Auf dieser Seite