Forms

AEM では、送信されたデータを Microsoft Excel または Google Sheets ドキュメントに取り込むフォームサービスを提供します。

Web サイト上のフォームを通じて送信されたデータをスプレッドシートに直接送ることで、ビジネスユーザーがデータに簡単にアクセスできるようになります。 また、このようなデータは、Google Sheets やMicrosoft Excel および SharePoint の両方が活発なエコシステムと堅牢な API へのアクセスを提供するので、より複雑な自動ワークフローとやり取りすることもできます。

データ取り込み用のシートの準備

  1. プロジェクト ディレクトリの任意の場所に Excel ブックまたはGoogle シートを作成します。 このドキュメントでは、OneDrive のシートを使用します email-form.xlsx AEM プロジェクトのルートで指定します。

  2. AEM ユーザーであることを確認します(例: helix@adobe.com)が含まれています 権限を編集 シートに。

  3. 作成したワークブックを開き、デフォルトシートの名前をに変更します incoming.


    注意: 次の場合、AEMではこのワークブックにデータが送信されません incoming シートが存在しません。

  4. Sidekick でシートをプレビューします。
    注意: シートが以前にプレビューされている場合でも、シートを作成した後に再度プレビューする必要があります。 incoming 初めてシートを作成します。

  5. 取り込まれるデータに一致するヘッダーを含むシートを設定します。 手動で実行するか、AEM Admin Service のフォームルートにPOSTリクエストを送信することで実行できます。 管理サービスは、POST本文のデータを確認し、データの取り込みと Forms サービスからの最大限の活用に必要なヘッダー/テーブルおよびシートを作成します。
    シートを設定するためのPOSTリクエストのフォーマットについては、を参照してください。 管理 API のドキュメントと次の例を参照してください。

    リクエスト:

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

    応答:

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

    curl やPostmanなどのツールを使用して、このPOSTリクエストを行うことができます。 次に例を示します。

    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"}}'
    

    上記のPOSTリクエストを通じて、フォームを設定するために管理サービスで使用されるフォームフィールドとサンプル値のサンプルデータを提供しています。
    シートを設定するには Admin サービスをお勧めしますが、ヘッダーを手動で作成する場合は、ドキュメントを参照してください Forms シートの手動設定.

  6. 送信後 POST admin サービスへのリクエスト ワークブックには、次のような変更が表示されます。

    1. というシート helix-default が作成されました。 このシートのデータは、 GET シートに対してリクエストが行われます。 スプレッドシートの数式を使用して、 incoming 他の場所で消費するためのシート。

      注意: この helix-default シートには、個人を特定できる情報や、公開アクセスが許可されていない他のデータを含めないでください。

    2. というシート slack 作成されました。 ここでは、データがスプレッドシートに取り込まれるたびに、Slackチャネルに自動通知を設定できます。 現在、AEMは、AEM Engineering Slack 組織とAdobeエンタープライズサポート組織への通知のみをサポートしています。

      1. Slack通知を設定するには、 teamId Slackワークスペースおよびの channel 名前または ID。 slack-bot に debug command)を使用して、 teamId および channel ID。 使用, channel チャネルの名前は変更できないので、名前の代わりに ID をお勧めします。

        注意: 古いフォームにはありませんでした teamId 列。 この teamId はに含まれていました channel 列(で区切る) # または /.
      2. 次のいずれかを入力 タイトル あなたはとの下に欲しい フィールド Slack通知に表示するフィールドの名前を入力します。 各見出しはコンマで区切る必要があります(例: name, email)に設定します。

シートへのデータの送信

これで、シートのデータ取り込みの準備が整い、以下を送信できるようになります POST シートに直接要求する hlx.page, hlx.live または実稼動ドメイン。

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

注意: URL には次を含めないでください .json 拡張機能。 シートをパブリッシュする必要があります POST 作業する操作 .live または実稼動ドメインで上書きできます。

でフォームデータをフォーマットする方法はいくつかあります。 POST 本文。

  • 名前と値のペアの配列として
    https://gist.github.com/dylandepass/9ba6b83700dfce1fa90a47bde62c2e9
  • キーと値のペアを持つオブジェクトとして
    <script src=“https://gist.github.com/dylandepass/2b5f694723dfdb3d304fcafc613d6595.js”></script>
  • As x-www-form-urlencoded 本文(content-type ヘッダーはに設定する必要があります application/x-www-form-urlencoded
    <script src=“https://gist.github.com/dylandepass/b72b2e30313bc80beb02e12b1d7201ff.js”></script>

それだ! Forms サービスは毎分実行されるので、シートに取り込まれたデータがすばやく表示されます。

作成者:Forms

多くの場合、作成者にフォームを作成させ、web サイトの訪問者に表示するフォームフィールドを決定してもらうことが望ましいです。 を使用するのが一般的です helix-default 作成者がフォームを定義できる場所として、フォームの送信に使用するのと同じスプレッドシートのシート。

通常は、スプレッドシートを参照し、フォームをレンダリングして送信時のユーザーフローを処理するフォームブロックが使用されます。

その簡単な例 form ブロックが見つかりました こちら アダプティブ Forms ブロックが使用できるようになります こちら.

reCAPTCHA、アクセシビリティ、ファイルアップロード、フィールド検証、電子サイン、パフォーマンス監視、スプレッドシートベースのルール、レコードのドキュメント(DoR)などの機能を備えたフォームが必要な場合は、 🔗 アダプティブ Forms ブロック. サポートするフォームは、基本情報(連絡先フォームやサービスリクエストなど)を収集する単純なフォームから、複数のセクション、ルール、Adobe Sign、Adobe Workfront、外部システムとの統合を持つ複雑なフォームまで、多岐にわたります。 データをスプレッドシートに送信したり、エンタープライズレベルのフォーム用に外部システムと接続したりすることもできます。 詳しくは、こちらをご覧ください 🔗 AEM FormsEdge Delivery Servicesドキュメント.

次に、フォーム定義のスプレッドシートの例を示します。

サポートされているフォームフィールドは拡張可能で、 form 出発点を示す例として捉える必要があります。

例えば、Google ドキュメントに次のブロックを追加するだけで、完全に機能するフォームがこのページに追加され、以前にリストされたコードベースを使用しています。

自由に試して、フォームデータがに送られるのを確認します。 受信シート. フォームサービスからスプレッドシートに移動するのに数分かかる場合があります。

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