Formulare

AEM bietet einen Formularservice, der gesendete Daten in ein Microsoft Excel- oder Google Sheets-Dokument aufnimmt.

Daten, die über Formulare auf Ihrer Website übermittelt werden, fließen direkt in Tabellen ein, wodurch sie für Geschäftsbenutzer leicht zugänglich sind. Solche Daten können auch mit komplexeren automatisierten Workflows interagieren, da sowohl Google Sheets als auch Microsoft Excel und SharePoint Zugriff auf ein lebendiges Ökosystem und robuste APIs bieten.

Vorbereiten eines Blatts für die Datenaufnahme

  1. Erstellen Sie eine Excel-Arbeitsmappe oder ein Google-Blatt an einer beliebigen Stelle in Ihrem Projektverzeichnis. Dieses Dokument verwendet ein Blatt in OneDrive namens email-form.xlsx im Stammverzeichnis eines AEM-Projekts.

  2. Stellen Sie sicher, dass der AEM-Benutzer (z. B. helix@adobe.com), die für Ihr Projekt konfiguriert wurde, hat Berechtigung bearbeiten auf dem Blatt.

  3. Öffnen Sie die erstellte Arbeitsmappe und benennen Sie das Standardblatt in um. incoming.


    Hinweis: AEM sendet keine Daten an diese Arbeitsmappe, wenn incoming Blatt existiert nicht.

  4. Zeigen Sie eine Vorschau des Blattes im Sidekick an.
    Hinweis: Selbst wenn ein Blatt zuvor in der Vorschau angezeigt wurde, muss es nach dem Erstellen des Formulars erneut in der Vorschau angezeigt werden incoming Blatt zum ersten Mal.

  5. Richten Sie das Blatt mit den Kopfzeilen ein, die den aufgenommenen Daten entsprechen. Sie können dies entweder manuell tun oder indem Sie eine POST-Anfrage an die Formularroute im AEM Admin Service senden. Der Admin-Service untersucht die Daten im Hauptteil der POST und erstellt die erforderlichen Kopfzeilen/Tabellen und Blätter, die erforderlich sind, um Daten aufzunehmen und den Forms-Service optimal zu nutzen.
    Einzelheiten zum Format der POST-Anforderung zum Einrichten des Blatts finden Sie in der Admin-API Dokumentation sowie das folgende Beispiel:

    Anfrage:

    code language-none
    POST /form/{owner}/{repo}/{ref}/en/email-form.json HTTP/1.1
    {"data":{"firstName":"test"}}
    

    Antwort:

    code language-none
    HTTP/1.1 200 OK
    {"rowCount":2,"columns":["firstName"]}
    

    Sie können ein Tool wie curl oder Postman verwenden, um diese POST-Anfrage zu stellen. Zum Beispiel:

    code language-none
    curl -s -i -X POST 'https://admin.hlx.page/form/{owner}/{repo}/{ref}/en/email-form.json' \
    --header 'Content-Type: application/json' \
    --data '{"data":{"firstName":"test"}}'
    

    Durch die obige Anfrage zur POST stellen wir Beispieldaten bereit, d. h. die Formularfelder und Beispielwerte, die vom Admin-Service für die Einrichtung des Formulars verwendet werden.
    Der Admin-Service wird empfohlen, Ihr Blatt einzurichten. Wenn Sie die Kopfzeilen jedoch manuell erstellen möchten, lesen Sie bitte das Dokument . Manuelle Forms Sheet-Einrichtung.

  6. Nach dem Versand von POST Um den Admin-Service anzufordern, werden die folgenden Änderungen an Ihrer Arbeitsmappe angezeigt.

    1. Ein Blatt mit dem Namen helix-default wird erstellt. Die Daten in diesem Blatt werden zurückgegeben, wenn ein GET Anforderung wird an das Blatt gesendet. Dies ist ein hervorragender Ort, um Tabellenformeln zu verwenden, um die Daten aus dem incoming Blatt für den Verbrauch anderswo.

      Hinweis: Die helix-default Das Blatt sollte niemals persönlich identifizierbare Informationen oder andere Daten enthalten, wenn Sie mit der öffentlichen Zugänglichkeit nicht einverstanden sind.

    2. Ein Blatt mit dem Namen slack wurde erstellt. Hier können Sie automatische Benachrichtigungen für einen Slack-Kanal einrichten, wenn Daten in Ihre Tabelle aufgenommen werden. Derzeit unterstützt AEM nur Benachrichtigungen an die AEM Engineering Slack-Organisation sowie die Adobe Enterprise Support-Organisation.

      1. Um Slack-Benachrichtigungen einzurichten, geben Sie Folgendes ein: teamId des Arbeitsbereichs Slack und der channel Name oder ID. Sie können auch den Slack-Bot fragen (mit dem debug Befehl) für die teamId und die channel ID. Verwenden des channel Die ID anstelle des Namens ist vorzuziehen, da sie die Kanalumbenennungen übersteht.

        Hinweis: Ältere Formulare hatten nicht die teamId Spalte. Die teamId war in der channel Spalte, durch ein # oder /.
      2. Eingeben beliebiger Werte Anrede Sie möchten und unter Felder Geben Sie die Namen der Felder ein, die in der Slack-Benachrichtigung angezeigt werden sollen. Jede Überschrift sollte durch ein Komma (z. B. name, email).

Senden von Daten an Ihr Blatt

Das Blatt ist jetzt zur Datenaufnahme bereit und Sie können Folgendes senden POST Anfragen direkt an das Blatt am hlx.page, hlx.live oder Ihre Produktions-Domain.

POST https://ref–repo–owner.hlx.(page|live)/email-form
POST https://my-domain.com/email-form

Hinweis: Die URL sollte Folgendes nicht enthalten .json Erweiterung. Das Blatt muss veröffentlicht werden für POST Vorgänge, an denen gearbeitet werden soll .live oder auf der Produktions-Domain.

Es gibt einige verschiedene Möglichkeiten, die Formulardaten im Formular zu formatieren POST Textkörper.

  • Als Array von Name/Wert-Paaren
    https://gist.github.com/dylandepass/9ba6b83700dfce1fa90a47bde62c2e9
  • Als Objekt mit Schlüssel/Wert-Paaren
    <script src=“https://gist.github.com/dylandepass/2b5f694723dfdb3d304fcafc613d6595.js”></script>
  • Als x-www-form-urlencoded Textkörper (content-type -Kopfzeile muss auf gesetzt sein application/x-www-form-urlencoded)
    <script src=“https://gist.github.com/dylandepass/b72b2e30313bc80beb02e12b1d7201ff.js”></script>

Das war's! Der Forms-Service wird jede Minute ausgeführt, damit Sie Ihre in das Blatt aufgenommenen Daten schnell sehen können.

Author-created Forms

In vielen Fällen ist es wünschenswert, dass Autoren Formulare erstellen und entscheiden, welche Formularfelder dem Besucher Ihrer Website präsentiert werden sollen. Es ist üblich, die Variable helix-default Blatt in derselben Tabelle, die für die Übermittlung des Formulars verwendet wird, als Ort, an dem der Autor seine Formulare definieren kann.

Normalerweise gibt es einen Formularblock, der einen Verweis auf die Tabelle nimmt, das Formular rendert und den Benutzerfluss durch die Übermittlung verarbeitet.

Ein einfaches Beispiel für ein solches form Block kann gefunden werden hier und der Adaptive Forms-Block verfügbar ist hier.

Wenn Sie Formulare mit Funktionen wie reCAPTCHA, Barrierefreiheit, Datei-Uploads, Feldvalidierungen, E-Signierung, Leistungsüberwachung, tabellenbasierte Regeln, Datensatzdokument (DoR) und mehr benötigen, verwenden Sie das 🔗 Adaptiver Forms-Block. Es unterstützt eine breite Palette von Formularen, von einfachen Formularen zur Erfassung grundlegender Informationen (wie Kontaktformulare oder Service-Anfragen) bis hin zu komplexen Formularen mit mehreren Abschnitten, Regeln und Integrationen mit Adobe Sign, Adobe Workfront und externen Systemen. Sie können damit sogar Daten an Tabellen senden oder eine Verbindung zu externen Systemen für Formulare auf Unternehmensebene herstellen. Weitere Informationen finden Sie unter 🔗 Dokumentation zu AEM Forms Edge Delivery Services.

Sehen Sie sich das folgende Beispiel an, wie die Tabelle für die Formulardefinition aussehen könnte.

Die unterstützten Formularfelder sind erweiterbar und die form sollte als Beispiel angesehen werden, das Ihnen einen Ausgangspunkt bietet.

Als Beispiel wurde dieser Seite ein voll funktionsfähiges Formular hinzugefügt, indem die zuvor aufgeführte Code-Basis verwendet wurde, indem einfach der folgende Block im Google-Dokument hinzugefügt wurde:

Sie können es ausprobieren und sehen, wie die Formulardaten in die Eingangsbogen. Es kann eine Minute dauern, vom Formular-Service zur Tabelle zu gelangen.

recommendation-more-help
10a6ce9d-c5c5-48d9-8ce1-9797d2f0f3ec