Übung: 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 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 Instanz im Veröffentlichungsmodus ist eine öffentliche Instanz AEM, die im Veröffentlichungsmodus Forms 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 Sie das adaptive Formular als AEM Seite

Wenn das adaptive Formular als AEM 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 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 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 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 geben Sie eine Komponente AEM Forms-Container ein, um ein adaptives Formular in eine AEM Sites-Seite einzubetten. Standardmäßig ist die Komponente im Container AEM Sites nicht sichtbar. Führen Sie die folgenden Schritte aus, um die Komponente AEM Forms Container zu aktivieren und das adaptive Formular in eine AEM Sites-Seite 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 wird in die Seite Sites eingebettet.

    Sie können das adaptive Formular auch in eine bestehende Web.Retail Site’s-Seite einbetten. Beispielsweise 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 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 Website. Die Vorlage der Seite wird in einer neuen Registerkarte des Browsers geöffnet.

  3. Tippen Sie im Feld layout Container auf feed management. 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 Registerkarte "Browser", die AEM Sites Seite enthält, 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 Formular. Die Komponente AEM Forms Container wird der Seite hinzugefügt.

  5. Tippen Sie auf die Komponente AEM Forms Container und dann auf configure-icon. Ein Dialogfeld mit den Eigenschaften AEM Forms-Containers wird angezeigt. Suchen Sie im Feld Asset Path 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 das adaptive Formular und 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 Sites-Seite 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 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 Liefer- und Rechnungsadresse, das einer AEM Sites hinzugefügt wird.

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 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 der Webseite hinzu. Ausführliche Anweisungen finden Sie unter Einbetten des adaptiven Formulars in eine externe Webseite.

Auf dieser Seite

Adobe Maker Awards Banner

Time to shine!

Apply now for the 2021 Adobe Experience Maker Awards.

Apply now
Adobe Maker Awards Banner

Time to shine!

Apply now for the 2021 Adobe Experience Maker Awards.

Apply now