DokumentationAEM as a Cloud ServiceBenutzerhandbuch

Erstellen eines Formulars mithilfe des adaptiven Formularbausteins

Letzte Aktualisierung: 8. Mai 2025
  • Gilt für:
  • Experience Manager as a Cloud Service
  • Themen:
  • Edge Delivery Services

Erstellt für:

  • Admin
  • Entwickler

video poster

https://video.tv.adobe.com/v/3427881?quality=12&learn=on

AEM Forms Edge Delivery bietet einen Baustein, der als adaptiver Formularbaustein bezeichnet wird und mit dem Sie mühelos Formulare erstellen können, um erfasste Daten zu erfassen und zu speichern. Sie können ein neues AEM-Projekt vorkonfiguriert mit einem Block für ein adaptives Formular erstellen oder den Block für ein adaptives Formular zu einem bestehenden AEM-Projekt hinzufügen..

Diese Formulare senden Daten direkt an eine Microsoft Excel- oder Google Tabellen-Datei, sodass Sie ein dynamisches Ökosystem und robuste APIs von Google Tabellen, Microsoft Excel und Microsoft SharePoint verwenden können, um die übermittelten Daten einfach zu verarbeiten oder einen bestehenden Business-Workflow zu initiieren.

Ökosystem des dokumentenbasierten Authorings

Voraussetzungen

Bevor Sie beginnen, stellen Sie sicher, dass Sie die folgenden Schritte ausgeführt haben:

  • Richten Sie ein AEM-Projekt mit der AEM Forms-Bausteinvorlage ein, fügen Sie einen adaptiven Formularblock zu Ihrem bestehenden AEM-Projekt hinzu und klonen Sie das entsprechende GitHub-Repository auf Ihrem lokalen Computer.
  • Stellen Sie sicher, dass Sie Zugriff auf Google Tabellen oder Microsoft SharePoint haben. Informationen zum Einrichten von Microsoft SharePoint als Inhaltsquelle finden Sie unter Verwenden von Sharepoint.

Erstellen eines Formulars

Schritt 1: Erstellen Sie ein Formular mit Microsoft Excel oder Google Tabellen.

Anstatt durch komplexe Prozesse zu navigieren, kann das Erstellen eines Formulars mühelos mithilfe einer Tabelle erfolgen. Sie können die Zeilen und Spalten definieren, aus denen die Formularstruktur besteht. Jede Zeile stellt ein einzelnes Formularfeld dar und die Spaltenüberschriften definieren die entsprechenden Feldeigenschaften.

Sehen Sie sich beispielsweise die folgende Tabelle an, bei der die Zeilen Felder für eine Tabelle enquiry darstellen und die Spaltenüberschriften ihre Eigenschaften definieren:

Abfragetabelle

So setzen Sie die Formularerstellung fort:

  1. Rufen Sie den AEM Edge Delivery-Projektordner in Microsoft SharePoint oder Google Drive auf.

  2. Erstellen Sie eine Microsoft Excel-Arbeitsmappe oder ein Google-Blatt an einer beliebigen Stelle in Ihrem AEM Edge Delivery-Projektverzeichnis. Erstellen Sie beispielsweise eine Tabelle mit dem Namen enquiry im AEM Edge Delivery-Projektverzeichnis auf Google Drive.

  3. Stellen Sie sicher, dass das Blatt für die entsprechenden AEM-Benutzenden (z. B. forms@adobe.com) gemäß den für Ihr Projekt angegebenen Konfigurationen freigegeben ist. Gewähren Sie für das Blatt die Berechtigung zum Bearbeiten durch Benutzende.

  4. Öffnen Sie die erstellte Tabelle und benennen Sie das Standardblatt in „shared-aem“ um.

    Umbenennen des Standardblatts in „shared-default“

  5. Fügen Sie zum Hinzufügen der Formularfelder Zeilen und Spaltenüberschriften in das Blatt „shared-aem“ ein. Jede Zeile sollte ein Formularfeld darstellen, wobei die Spaltenüberschriften die entsprechenden Feldeigenschaften definieren.

    Für einen schnellen Start können Sie den Inhalt der Abfragetabelle in Ihre Tabelle kopieren. Speichern Sie die Tabelle, nachdem Sie den Inhalt kopiert haben.

    video poster

    https://video.tv.adobe.com/v/3427468?quality=12&learn=on

  6. Verwenden Sie AEM Sidekick, um eine Vorschau des Blattes anzuzeigen.

    Verwenden von AEM Sidekick, um eine Vorschau der Tabelle anzuzeigen

    Bei der Vorschau werden die Inhalte des Blattes in neuen Browser-Registerkarten im JSON-Format angezeigt. Stellen Sie sicher, dass Sie die Vorschau-URL erfassen, da dies für das Rendern des Formulars im nächsten Abschnitt erforderlich ist. Die URL hat das folgende Format:

        https://<branch>--<repository>--<owner>.aem.live/<form-path>/<form-file-name>.json
    
    • <branch> bezieht sich auf die Verzweigung Ihres GitHub-Repositorys.
    • <repository> bezeichnet Ihr GitHub-Repository.
    • <owner> bezieht sich auf den Benutzernamen Ihres GitHub-Kontos, das Ihr GitHub-Repository hostet.

    Wenn das Repository Ihres Projekts beispielsweise „wefinance“ heißt, sich unter dem Konto „wkndform“ befindet und Sie die Verzweigung „main“ verwenden, sieht die URL wie folgt aus:

https://main--wefinance--wkndform.aem.page/enquiry.json
<!–(https://main–wefinance–wkndform.aem.page/enquiry.json)–>

Schritt 2: Zeigen Sie mithilfe Ihrer Edge Delivery Service-Seite eine Vorschau des Formulars an.

Bis jetzt haben Sie die Struktur des Formulars vorbereitet. So zeigen Sie nun eine Vorschau des Formulars an:

  1. Öffnen Sie Ihr Microsoft SharePoint- oder Google Drive-Konto und navigieren Sie zu Ihrem AEM Edge Delivery-Projektverzeichnis.

  2. Öffnen Sie eine Dokumentdatei (zum Beispiel die Index-Datei), um das Formular einzubetten. Sie können auch ein neues Dokument erstellen.

  3. Wechseln Sie an die gewünschte Stelle im Dokument, an der Sie das Formular hinzufügen möchten.

  4. Erstellen eines Formularbausteins zum Rendern des Formulars. Wählen Sie „Einfügen“ > „Tabelle“ und erstellen Sie eine Tabelle mit einer Spalte und zwei Zeilen. Nennen Sie die Tabelle „Formular“ und fügen Sie die Vorschau-URL in die zweite Zeile ein. Stellen Sie sicher, dass die URL als Hyperlink und nicht als reiner Text formatiert ist, wie unten dargestellt:

    Formular
    https://main--wefinance--wkndform.aem.live/enquiry.json

    Hinzufügen eines adaptiven Formularbausteins zu Ihrer Web-Seite

    Dieser Block dient als Platzhalter, in den das Formular eingebettet ist. Fügen Sie in der zweiten Zeile des Bausteins die Vorschau-URL Ihrer <form>.json-Datei als Hyperlink ein.

    IMPORTANT
    Stellen Sie sicher, dass die URL als Hyperlink formatiert ist und nicht nur als reiner Text angezeigt wird.
  5. Verwenden Sie AEM Sidekick, um eine Vorschau des Dokuments anzuzeigen. Das Formular wird jetzt auf der Seite angezeigt. Hier basiert das Formular beispielsweise auf der Abfragetabelle:

    Beispiel für ein EDS-Formular

    Füllen Sie nun das Formular aus und klicken Sie auf die Schaltfläche „Absenden“. Es tritt ein Fehler ähnlich dem folgenden auf, da die Tabelle noch nicht für das Akzeptieren der Daten konfiguriert ist.

    Fehler bei Formularübermittlung

Nächster Schritt

Bereiten Sie die Tabellenkalkulation vor, um Daten bei der Formularübermittlung zu akzeptieren.

Siehe auch

  • Erste Schritte mit Edge Delivery Services für AEM Forms
  • Erstellen eines Formulars mit Google Tabellen oder Microsoft Excel
  • Einrichten von Google Tabellen- oder Microsoft Excel-Dateien, um Daten zu akzeptieren
  • Veröffentlichen des Formulars und Starten der Datenerfassung
  • Anpassen des Erscheinungsbilds von Formularen
  • Hinzufügen wiederholbarer Abschnitte zu einem Formular
  • Anzeigen einer benutzerdefinierten Dankesnachricht nach der Formularübermittlung
  • Komponenten von adaptiven Formularblöcken und ihre Eigenschaften
  • Verwenden des Formularübermittlungsdiensts
recommendation-more-help
fbcff2a9-b6fe-4574-b04a-21e75df764ab