アダプティブフォームブロックを使用したフォームの作成
AEM Forms Edge Delivery には、アダプティブフォームブロックと呼ばれるブロックが用意されており、フォームを簡単に作成して、キャプチャしたデータを保存するのに役立ちます。アダプティブフォームブロックで事前設定された新しい AEM プロジェクトを作成 するか、アダプティブフォームブロックを既存の AEM プロジェクトに追加できます。
これらのフォームは、Microsoft Excel または Google Sheets ファイルに直接データを送信します。これにより、Google Sheets、Microsoft Excel、Microsoft SharePoint の活発なエコシステムと堅牢な API を使用して、送信されたデータを簡単に処理したり、既存のビジネスワークフローを開始したりできます。
前提条件
開始する前に、次の手順が完了していることを確認してください。
- AEM Forms ボイラープレートを使用した AEM プロジェクトを設定するか、アダプティブフォームブロックを既存の AEM プロジェクトに追加して、ローカルマシン上に対応する GitHub リポジトリのクローンを作成します。
このドキュメントでは、Edge Delivery Services（EDS）プロジェクトのローカルフォルダーを[EDS Project repository]と呼びます。 - Google Sheets または Microsoft SharePoint へのアクセス権があることを確認します。Microsoft SharePoint をコンテンツソースとして設定するには、SharePoint の使用方法を参照してください。
フォームの作成
複雑なプロセスを進める代わりに、スプレッドシートを使用してフォームを簡単に作成できます。フォーム構造を構成する行と列を定義できます。各行は、個々のフォームフィールドを表し、列ヘッダーは対応するフィールドプロパティを定義します。
例えば、行が enquiry フォームのフィールドの概要を示し、列ヘッダーがそのプロパティを定義する次のスプレッドシートを考えてみましょう。
フォームの作成を続行するには、以下の手順を実行します。
-
Microsoft SharePoint または Google Drive の AEM Edge Delivery プロジェクトフォルダーにアクセスします。
-
AEM Edge Delivery プロジェクトディレクトリ内の任意の場所で、Microsoft Excel ワークブックまたは Google シートを作成します。例えば、Google Drive の AEM Edge Delivery プロジェクトディレクトリに
enquiryという名前のスプレッドシートを作成します。
-
プロジェクトに指定された設定に従って、シートが適切な AEM ユーザー（
helix@adobe.comなど）と共有されていることを確認します。ユーザにシートの編集権限を付与します。 -
作成したスプレッドシートを開き、デフォルトのシートの名前を「shared-default」に変更します。
-
フォームフィールドを追加するには、行と列のヘッダーを「shared-default」シートに挿入します。各行は、フォームフィールドを表し、列ヘッダーが対応するフィールドのプロパティを定義する必要があります。
すぐに開始するには、照会スプレッドシートの内容を、お使いのスプレッドシートにコピーすることを検討してください。内容をコピーした後、スプレッドシートを保存します。
embed -
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
ここまでで、フォームの構造の準備が整いました。フォームをプレビューする手順は次のとおりです。
-
Microsoft SharePoint または Google Drive アカウントを開き、AEM Edge Delivery プロジェクトディレクトリに移動します。
-
フォームを埋め込むドキュメントファイル（インデックスファイルなど）を開きます。または、新しいドキュメントを作成することもできます。
-
フォームを追加するドキュメント内の目的の場所に移動します。
-
フォームをレンダリングするフォームブロックを作成します。挿入／テーブルを選択し、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 がプレーンテキストとして表示されるのではなく、ハイパーリンクとして書式設定されていることを確認します。 -
AEM Sidekick を使用してドキュメントをプレビューします。これで、ページにフォームが表示されます。例えば、照会スプレッドシートに基づくフォームは次のとおりです。
ここで、フォームに入力して送信ボタンをクリックすると、スプレッドシートがまだデータを受け入れるように設定されていないので、次のようなエラーが発生します。
