Tutorial: Veröffentlichen Sie Ihr adaptives Formular

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 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 Internetbrowser ö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 die folgenden Methoden, 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, die im Veröffentlichungsmodus Forms 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 aus der Autoreninstanz in eine Veröffentlichungsinstanz und gibt Benutzereingaben (z. B. Formulareingaben) aus der Veröffentlichungsinstanz in die Autoreninstanz zurück.

Veröffentlichen Sie das adaptive Formular als AEM Seite

Wenn das adaptive Formular als AEM 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 AEM Forms Autoreninstanz 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 tippen Sie auf Publish. Ein Dialogfeld mit Assets, die mit dem adaptiven Formular verknüpft sind, 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 Sites-Seite

AEM Forms ermöglicht es Formularentwicklern, adaptive Formulare nahtlos in eine AEM Sites einzubetten. Das eingebettete adaptive Formular ist voll funktionsfähig und Benutzer können es 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 Formular zu interagieren.

AEM Forms stellen Sie eine Komponente AEM Forms Container bereit, um ein adaptives Formular in eine AEM Sites-Seite einzubetten. Standardmäßig ist die Komponente im Container Sites nicht sichtbar AEM. 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 auf der Site "We.Retail"zur Bearbeitung. Beispiel: https://localhost:4502/editor.html/content/we-retail/us/en/user/shipping-and-billing-address.html. Das adaptive Formular wird in die Seite Sites eingebettet.

    Sie können das adaptive Formular auch in eine vorhandene We.Retail-Seite Site’s einbetten. Zum Beispiel die Seite ÜBER 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 Site "We.Retail"wird mit AEM ausgeliefert. Wenn Sie die Site "We.Retail"nicht installiert haben, lesen Sie We.Retail Reference Implementation installieren Sie die Site.

  2. Tippen Sie auf properties Seiteninformationen und wählen Sie die Option Vorlage bearbeiten auf der neu erstellten Site-Seite We.Retail aus. 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 Feedmanagement. Erweitern Sie auf der Registerkarte Zulässige Komponenten das Akkordeon Allgemein, wählen Sie die Option AEM Formular und tippen Sie auf save_icon. Die AEM Forms Container-Komponente ist für die Seite aktiviert.

  4. Öffnen Sie die Browser-Registerkarte mit AEM Seite Sites, 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 Formular AEM. Die Komponente AEM Forms Container wird der Seite hinzugefügt.

  5. Tippen Sie auf die Komponente AEM Forms-Container und tippen Sie auf configure-icon. Ein Dialogfeld mit den Eigenschaften AEM Forms Container wird angezeigt. Suchen Sie im Feld Asset-Pfad das adaptive Formular shipping-address-add-update-form und wählen Sie es aus. Tippen Sie auf save_icon. Das adaptive Formular ist in die Seite eingebettet.

  6. Veröffentlichen Sie sowohl das adaptive Formular als auch die Seite Sites . 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 Seite Sites und das eingebettete Formular.

    • Wenn Sie nur das eingebettete Formular in einer veröffentlichten Site-Seite ändern, 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 Seite Sites und das eingebettete Formular ändern, veröffentlichen Sie die Seite Sites und das Formular erneut.

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

Einbetten des adaptiven Formulars in eine externe Webseite

Sie können ein adaptives Formular in eine externe Webseite einbetten (eine 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 für das adaptive Formular und die zugehörigen Ressourcen an den AEM Forms-Server und fügt das adaptive Formular zur Webseite hinzu. Ausführliche Anweisungen finden Sie unter Einbetten des adaptiven Formulars in eine externe Webseite.

Auf dieser Seite