Tutorial: Veröffentlichen des adaptiven Formulars tutorial-publish-your-adaptive-form
Dieses Tutorial ist ein Teil der Serie Erstellen Ihres ersten adaptives Formulars. Es wird empfohlen, die Serie in chronologischer Reihenfolge zu durchlaufen, um den vollständigen Anwendungsfall des Tutorials zu verstehen, durchzufü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 before-you-start
- 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 publish-the-adaptive-form-as-an-aem-page
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:
- 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 - Wählen Sie das adaptive Formular „shipping-address-add-update-form“ und dann Veröffentlichen aus. Es wird ein Dialogfeld mit den Assets, die sich auf das adaptive Formular beziehen, angezeigt. Wählen Sie Veröffentlichen aus. Das adaptive Formular wird veröffentlicht und eine Erfolgsmeldung erscheint.
- Ö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 embed-the-adaptive-form-in-an-aem-sites-page
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:
-
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.
-
Wählen Sie die Seiteninformation
-
Wählen Sie im Feld Layout-Container die Option
-
Öffnen Sie die Browser-Registerkarte mit der AEM Sites-Seite, die in Schritt 1 geöffnet wurde. Wählen Sie das Feld Komponenten hierher ziehen und +. Wählen Sie im Feld Neue Komponente einfügen die Option AEM-Forms aus. Die Komponente AEM Forms-Container wird der Seite hinzugefügt.
-
Wählen Sie die Komponente AEM Forms-Container und dann
-
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.
Formular zur Änderung der Versand- und Rechnungsadresse zu einer AEM Sites-Seite hinzugefügt.
-
Einbetten des adaptiven Formulars in eine externe Web-Seite embed-the-adaptive-form-in-an-external-webpage
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.