アダプティブフォームブロックを使用したフォームの作成

複雑なプロセスを進める代わりに、スプレッドシートを使用してフォームを簡単に作成できます。フォーム構造を構成する行と列を定義できます。各行は、個々のフォームフィールドを表し、列ヘッダーは対応するフィールドプロパティを定義します。

例えば、行が enquiry フォームのフィールドの概要を示し、列ヘッダーがそのプロパティを定義する次のスプレッドシートを考えてみましょう。

フォームの作成を続行するには、以下の手順を実行します。

1. Microsoft SharePoint または Google Drive の AEM Edge Delivery プロジェクトフォルダーにアクセスします。

2. AEM Edge Delivery プロジェクトディレクトリ内の任意の場所で、Microsoft Excel ワークブックまたは Google シートを作成します。例えば、Google Drive の AEM Edge Delivery プロジェクトディレクトリに enquiry という名前のスプレッドシートを作成します。

   

3. プロジェクトに指定された設定に従って、シートが適切な AEM ユーザー（helix@adobe.com など）と共有されていることを確認します。ユーザにシートの編集権限を付与します。

4. 作成したスプレッドシートを開き、デフォルトのシートの名前を「shared-default」に変更します。

   

5. フォームフィールドを追加するには、行と列のヘッダーを「shared-default」シートに挿入します。各行は、フォームフィールドを表し、列ヘッダーが対応するフィールドのプロパティを定義する必要があります。

   すぐに開始するには、照会スプレッドシートの内容を、お使いのスプレッドシートにコピーすることを検討してください。内容をコピーした後、スプレッドシートを保存します。

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

6. AEM Sidekick を使用してシートをプレビューします。

   

   プレビュー時に、新しいブラウザータブにシートの内容が JSON 形式で表示されます。プレビュー URL を取り込む必要があります。これは、次のセクションでフォームをレンダリングする際に必要です。URL 形式は次のとおりです。

   code language-json
   https://<branch>--<repository>--<owner>.hlx.live/<form-path>/<form-file-name>.json

   • <branch> は、GitHub リポジトリのブランチを参照します。
   • <repository> は GitHub リポジトリを示します。
   • <owner> は、GitHub リポジトリをホストする GitHub アカウントのユーザー名を参照します。

   例えば、プロジェクトのリポジトリの名前が「portal」で、アカウント「wkndforms」の下にあり、「main」ブランチを使用している場合、URL は次のようになります。

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

ここまでで、フォームの構造の準備が整いました。フォームをプレビューする手順は次のとおりです。

1. Microsoft SharePoint または Google Drive アカウントを開き、AEM Edge Delivery プロジェクトディレクトリに移動します。

2. フォームを埋め込むドキュメントファイル（インデックスファイルなど）を開きます。または、新しいドキュメントを作成することもできます。

3. フォームを追加するドキュメント内の目的の場所に移動します。

4. フォームをレンダリングするフォームブロックを作成します。挿入／テーブルを選択し、1 列 2 行のテーブルを作成します。テーブルに「Form」という名前を付け、2 行目にプレビュー URL をペーストします。以下に示すように、URL がプレーンテキストではなく、ハイパーリンクとして書式設定されていることを確認します。

   table 0-row-1 1-row-1
   フォーム
   https://main–wefinance–wkndforms.hlx.live/enquiry.json

   

   このブロックは、フォームが埋め込まれるプレースホルダーとして機能します。ブロックの 2 行目に、<form>.json ファイルのプレビュー URL をハイパーリンクとして追加します。

   note important
   IMPORTANT
   URL がプレーンテキストとして表示されるのではなく、ハイパーリンクとして書式設定されていることを確認します。

5. AEM Sidekick を使用してドキュメントをプレビューします。これで、ページにフォームが表示されます。例えば、照会スプレッドシートに基づくフォームは次のとおりです。

   

   ここで、フォームに入力して送信ボタンをクリックすると、スプレッドシートがまだデータを受け入れるように設定されていないので、次のようなエラーが発生します。