Erstellen eines Formulars mithilfe des adaptiven Formularbausteins

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.

Betrachten Sie beispielsweise die folgende Tabelle, in der die Zeilen Felder für ein enquiry-Formular darstellen und die Spaltenüberschriften ihre Eigenschaften definieren:

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. helix@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-default“ um.

   

5. Fügen Sie zum Hinzufügen der Formularfelder Zeilen und Spaltenüberschriften in das Blatt „shared-default“ 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.

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

6. Verwenden Sie AEM Sidekick, um eine Vorschau des Blattes 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:

   code language-json
   https://<branch>--<repository>--<owner>.hlx.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 „Portal“ heißt, befindet es sich unter dem Konto „wkndforms“. Wenn Sie die Verzweigung „main“ verwenden, sieht die URL wie folgt aus:

   https://main--portal--wkndforms.hlx.page/enquiry.json

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. Alternativ können Sie ein neues Formular 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:

   table 0-row-1 1-row-1
   Formular
   https://main–wefinance–wkndforms.hlx.live/enquiry.json

   

   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.

   note important
   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:

   

   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.