コアコンポーネントベースのアダプティブFormsを作成する

Adobeでは、コアコンポーネントを次のように使用することをお勧めします。 AEM SitesページへのアダプティブFormsの追加 または スタンドアロンのアダプティブFormsを作成する.

適用先： ✅アダプティブフォームのコアコンポーネント❎ アダプティブフォームの基盤コンポーネント.

アダプティブフォームを使用すると、魅力的でレスポンシブ、かつ動的でアダプティブなフォームを作成できます。AEM Formsは、ビジネスに適した UI を提供し、アダプティブFormsをすばやく作成します。 UI は、事前設定済みのテンプレート、スタイル設定、フィールド、送信オプションを簡単に選択して、アダプティブフォームを作成するためのクイックタブナビゲーションを提供します。

開始する前に、使用可能な Forms コンポーネントのタイプについて学習します。

• アダプティブフォームコアコンポーネント：標準化されたデータキャプチャコンポーネントです。これらのコンポーネントは、デジタル登録エクスペリエンスのカスタマイズ機能を提供し、開発時間を短縮し、メンテナンスコストを削減します。開発者は、これらのコンポーネントを簡単にカスタマイズし、スタイルを設定できます。Adobeでは、アダプティブFormsの開発に、最新で拡張可能なコンポーネントを使用することをお勧めします。

• アダプティブフォーム基盤コンポーネント：従来の（古い）データキャプチャコンポーネントです。引き続きこれらを使用して、既存の基盤コンポーネントベースのアダプティブフォームを編集できます。 フォームを作成する場合、Adobeでは アダプティブFormsコアコンポーネント アダプティブFormsを作成する

前提条件

アダプティブフォームを作成するには、以下が必要です。

• 環境でのアダプティブFormsコアコンポーネントの有効化:AEMアーキタイププロジェクトバージョン 41 以降は、 お使いの環境に合わせたコアコンポーネントの有効化. お使いの環境に対してコアコンポーネントを有効にすると、 アダプティブForms（コアコンポーネント） テンプレートとキャンバステーマが環境に追加されます。

• アダプティブフォームテンプレート：テンプレートは基本構造を提供し、アダプティブフォームのアピアランス（レイアウトとスタイル）を定義します。これには、特定のプロパティやコンテンツ構造を有するフォーマット済みのコンポーネントが含まれます。また、テーマと送信アクションを定義するオプションも提供されます。 テーマは、ルックアンドフィールと送信アクションを定義し、アダプティブフォームの送信時に実行するアクションを定義します。 また、サンプルテンプレートを環境にデプロイできます。これらは、フォームの作成を迅速に開始するのに役立ちます。

  メモ

  ご利用の環境に​アダプティブフォーム（コアコンポーネント）​テンプレートがない場合は、ご利用の環境のアダプティブフォームコアコンポーネントを有効にします。ご利用の環境でコアコンポーネントを有効にすると、アダプティブフォーム（コアコンポーネント）​テンプレートが環境に追加されます。

• アダプティブフォームのテーマ：テーマには、コンポーネントとパネル向けのスタイル設定の詳細が含まれます。 スタイルには、背景カラー、ステートカラー、透明度、配置、サイズなどのプロパティが含まれます。テーマを適用すると、指定したスタイルが対応するコンポーネントに反映されます。The Canvas コアコンポーネントを環境に対して有効にすると、テーマがデフォルトで追加されます。 以下が可能です。 標準のテーマをダウンロードしてカスタマイズする. の場合 すぐに 展開可能なテーマ サンプルテーマ を環境に追加します。 これらは、フォームのスタイル設定を開始できるようサポートし、ビジネス要件に応じてテーマを作成またはカスタマイズするための基本構造を提供します。

• 権限：forms-users グループにユーザーを追加します。forms-users グループのメンバーには、アダプティブフォームを作成する権限があります。フォーム専用のユーザーグループの詳細なリストについては、グループと権限を参照してください。

アダプティブフォームを作成

1. ローカルにログイン AEMオーサーインスタンス.

2. Experience Manager のログインページに資格情報を入力します。ログイン後、左上隅の「 」を選択します。 Adobe Experience Manager > Forms > Forms & Documents.

3. 選択 作成 > アダプティブFormsの作成.

4. アダプティブFormsコアコンポーネントテンプレートを選択し、 次へ.

5. The プロパティを追加 が表示されます。 以下のプロパティフィールドの値を指定します。「タイトル」フィールドと「ドキュメント名」フィールドは必須です。

   • タイトル：​フォームの表示名を指定します。タイトルを指定すると、Experience Manager Forms ユーザーインターフェイス内のフォームを特定しやすくなります。
   • 名前：​フォームの名前を指定します。指定された名前のノードがリポジトリーに作成されます。タイトルを入力し始めると、名前フィールドの値が自動的に生成されます。候補として入力された値は変更可能です。名前フィールドに使用できるのは、英数字、ハイフン、アンダースコアのみです。
   • 説明：​フォームに関する詳細情報を指定します。
   • テーマクライアントライブラリ: アダプティブフォームのテーマを指定します。 デフォルトでは、 adaptiveform.theme.canvas3 テーマが選択されている。 また、 テーマクライアントライブラリ ドロップダウンメニュー。
   • 設定コンテナ： アダプティブFormsの設定ファイルを保存する場所を定義します。 これらの設定ファイルには、アダプティブFormsの動作と外観に関連する設定とプロパティが含まれています。
   • タグ：​アダプティブフォームを一意に識別するためのタグを指定します。タグを指定すると、フォームを検索しやすくなります。タグを作成するには、「タグ」ボックスに新しいタグ名を入力します。

6. 「作成」を選択します。アダプティブフォームが作成され、フォームを編集用に開くためのダイアログが表示されます。

7. 選択 編集 をクリックして、新しく作成されたフォームを新しいタブで開きます。 フォームが編集用に開かれ、テンプレート内の利用可能なコンテンツが表示されます。また、新しく作成されたフォームをカスタマイズするサイドバーも表示されます。

アダプティブFormsコアコンポーネントを使用したフォームの作成

フォームを編集用に開いた後、使用可能なアダプティブFormsコアコンポーネントを使用して、フォームフィールドをフォームに追加できます。 ドラッグ&ドロップするか、「+」を使用します [コンポーネントを挿入] オプションを使用して、これらのコンポーネントをフォームに追加できます。 利用可能な情報については、 AEMコアコンポーネントのドキュメントを参照してください アダプティブFormsコアコンポーネント. また、https://aemcomponents.dev/ では、使用可能なコアコンポーネントの動作を確認できます。

アダプティブフォームの送信アクションの設定

送信アクションを使用すると、アダプティブフォーム経由で取り込んだデータの送信先を選択できます。送信アクションは、ユーザーがアダプティブフォームの「送信」ボタンをクリックするとトリガーされます。アダプティブフォームには、すぐに使用できる送信アクションがいくつか含まれています。デフォルトの送信アクションを拡張して、独自のカスタム送信アクションを作成することもできます。フォームの送信アクションを設定するには、次の手順を実行します。

1. コンテンツブラウザーを開き、アダプティブフォームの​ガイドコンテナ​コンポーネントを選択します。

2. ガイドコンテナのプロパティをクリックします。 アイコン。 アダプティブフォームコンテナダイアログボックスが開きます。

3. 「グループ」タブをクリックします。

   

4. 必要に応じて、「送信アクション」を選択して設定します。送信アクションについて詳しくは、アダプティブフォーム送信アクションを参照してください。

フォーム送信時に、ユーザーをページにリダイレクトする、またはお礼のメッセージを表示する

フォームの送信時に、ユーザーを別の web ページまたはメッセージにリダイレクトできます。ユーザーをリダイレクトするか、お礼のメッセージを設定するには、次の手順を実行します。

1. コンテンツブラウザーを開き、アダプティブフォームの​ガイドコンテナ​コンポーネントを選択します。

2. ガイドコンテナのプロパティをクリックします。 アイコン。 アダプティブフォームコンテナダイアログボックスが開きます。

3. 「送信」タブを開きます。

   

   • リダイレクト URL を設定するには、「送信時」オプションで「URL にリダイレクト」オプションを選択し、AEM Sites ページを参照して選択するか、外部ページの URL を指定します。

   • カスタムメッセージまたはお礼のメッセージを設定するには、「送信」オプションで「メッセージを表示」オプションを選択し、メッセージコンテンツ​ボックスにメッセージを入力します。これはリッチテキストボックスで、全画面表示オプションを使用して、使用可能なすべてのリッチテキスト項目を表示できます。

アダプティブフォームのスキーマまたはフォームデータモデルの設定

フォームデータモデルを使用してフォームをデータソースに接続し、ユーザーのアクションに基づいてデータを送受信することができます。また、フォームを JSON スキーマに接続して、送信されたデータを事前定義済みの形式で受信することもできます。要件に基づいて、次のようにフォームを JSON スキーマまたはフォームデータモデルに接続します。

• JSON スキーマの作成と環境へのアップロード
• フォームデータモデルを作成

フォームの JSON スキーマまたはフォームデータモデルの設定

フォームの JSON スキーマまたはフォームデータモデルを設定するには、次の手順を実行します。

1. コンテンツブラウザーを開き、アダプティブフォームのアダプティブフォームの​ガイドコンテナ​コンポーネントを選択します。

2. ガイドコンテナのプロパティをクリックします。 アイコン。 アダプティブフォームコンテナダイアログボックスが開きます。

3. 「データモデル」タブを開きます。

   

4. 要件に応じて、JSON スキーマまたはフォームデータモデルを選択し、設定します。

   • 「フォームモデル」オプションを選択する場合は、「フォームデータモデルを選択」オプションを使用して、事前設定済みのフォームデータモデルを選択します。
   • 「スキーマ」オプションを選択する場合は、「スキーマ」オプションを使用して、フォームの JSON スキーマを選択します。

5. 「完了」をクリックします。

事前入力サービスを設定

事前入力サービスを使用すると、既存のデータを使用してアダプティブフォームのフィールドに自動入力できます。ユーザーがフォームを開くと、これらのフィールドの値は事前入力されています。以下の操作を実行できます。

• カスタム事前入力サービスを作成
• フォームデータモデルの事前入力サービスを使用

フォームデータモデルの事前入力サービスを使用して、アダプティブフォームのフィールドを事前入力する

フォームデータモデルの事前入力サービスでは、フォームデータモデルまたはカスタム事前入力サービスを使用して、アダプティブフォームのフィールドに事前入力できます。フォームデータモデルの事前入力サービスでは、設定済みのフォームデータモデルのサービスを取得を使用して、データを取得します。アダプティブフォームでフォームデータモデルの事前入力サービスを使用するには、次の手順を実行します。

1. コンテンツブラウザーを開き、アダプティブフォームの​ガイドコンテナ​コンポーネントを選択します。
2. ガイドコンテナのプロパティをクリックします。 アイコン。 アダプティブフォームコンテナダイアログボックスが開きます。
3. アダプティブフォームコンテナプロパティ（アイコン）をクリックします。データモデルを設定するためのアダプティブフォームコンテナダイアログボックスが開きます。
   
4. フォームデータモデルを選択. 「基本」タブを開きます。事前入力サービスで、「フォームデータモデルの事前入力サービス」を選択します。
5. 「完了」をクリックします。アダプティブフォームでフォームデータモデルの事前入力を使用するように設定しました。 ルールエディターを使用して、フォームのフィールドに事前入力するルールを作成できるようになりました。

次の手順

• ルールエディターを使用して、フォームに動的な動作を追加します。
• コアコンポーネントベースのアダプティブFormsのテーマを作成またはカスタマイズする

関連トピック

• コアコンポーネントベースのアダプティブフォームの作成
• アダプティブフォームを作成するか、AEM Sitesページまたはエクスペリエンスフラグメントに追加する
• サンプルのテーマ、テンプレートおよびフォームデータモデル