ドキュメントAEM as a Cloud Serviceユーザーガイド

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

Last update: Tue Mar 04 2025 00:00:00 GMT+0000 (Coordinated Universal Time)

作成対象：

  • 管理者
  • 開発者

video poster

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

AEM Forms Edge Delivery には、アダプティブフォームブロックと呼ばれるブロックが用意されており、フォームを簡単に作成して、キャプチャしたデータを保存するのに役立ちます。 アダプティブフォームブロックで事前設定された新しい AEM プロジェクトを作成 するか、アダプティブフォームブロックを既存の AEM プロジェクトに追加できます。

これらのフォームは、Microsoft Excel または Google Sheets ファイルに直接データを送信します。これにより、Google Sheets、Microsoft Excel、Microsoft SharePoint の活発なエコシステムと堅牢な API を使用して、送信されたデータを簡単に処理したり、既存のビジネスワークフローを開始したりできます。

ドキュメントベースのオーサリングエコシステム

前提条件

開始する前に、次の手順が完了していることを確認してください。

  • Google Sheets または Microsoft SharePoint へのアクセス権があることを確認します。 Microsoft SharePoint をコンテンツソースとして設定するには、SharePoint の使用方法を参照してください。

フォームの作成

手順 1：Microsoft Excel または Google Sheets を使用してフォームを作成します。

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

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

照会スプレッドシート

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

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

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

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

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

    デフォルトのシート名を「shared-default」に変更

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

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

    embed

    video poster

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

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

    AEM Sidekick を使用してシートをプレビュー

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

    code language-json 
        https://<branch>--<repository>--<owner>.aem.live/<form-path>/<form-file-name>.json
    • <branch> は、GitHub リポジトリのブランチを参照します。
    • <repository> は GitHub リポジトリを示します。
    • <owner> は、GitHub リポジトリをホストする GitHub アカウントのユーザー名を指します。

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

https://main--wefinance--wkndform.aem.page/enquiry.json
<!–(https://main–wefinance–wkndform.aem.page/enquiry.json)–>

手順 2:Edge Delivery Servicesページを使用してフォームをプレビューする

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

  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--wkndform.aem.live/enquiry.json

    アダプティブフォームブロックを web ページに追加

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

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

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

    EDS フォームのサンプル

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

    フォーム送信時のエラー

次の手順

フォーム送信時にデータの受け入れを開始できるようにスプレッドシートを準備します。

関連トピック

recommendation-more-help
fbcff2a9-b6fe-4574-b04a-21e75df764ab