コアコンポーネントベースのアダプティブフォームを作成 creating-an-adaptive-form-core-components

Last update: Mon Jul 15 2024 00:00:00 GMT+0000 (Coordinated Universal Time)

トピック：

作成対象：

管理者
開発者

アドビでは、コアコンポーネントを使用して、AEM Sites ページへのアダプティブフォームの追加やスタンドアロンのアダプティブフォームの作成を行うことをお勧めします。

バージョン

記事リンク

AEM as a Cloud Service

ここをクリックしてください

AEM 6.5

この記事

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

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

アダプティブフォームコアコンポーネント：標準化されたデータキャプチャコンポーネントです。これらのコンポーネントは、デジタル登録エクスペリエンスのカスタマイズ機能を提供し、開発時間を短縮し、メンテナンスコストを削減します。開発者は、これらのコンポーネントを簡単にカスタマイズし、スタイルを設定できます。アドビでは、これらの最新かつ拡張性の高いコンポーネントを活用してアダプティブフォームを開発することをお勧めします。
アダプティブフォーム基盤コンポーネント：従来の（古い）データキャプチャコンポーネントです。引き続きこれらを使用して、既存の基盤コンポーネントベースのアダプティブフォームを編集できます。フォームを作成する場合は、アダプティブフォームコアコンポーネントを使用してアダプティブフォームを作成することをお勧めします。

前提条件

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

環境でのアダプティブフォームコアコンポーネントの有効化：AEM アーキタイププロジェクトバージョン 41 以降は、使用する環境でコアコンポーネントを有効にすることが必要です。使用する環境でコアコンポーネントを有効にすると、アダプティブフォーム（コアコンポーネント） のテンプレートとカンバステーマが環境に追加されます。

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

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

note note

NOTE

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

アダプティブフォームのテーマ：テーマには、コンポーネントとパネル向けのスタイル設定の詳細が含まれます。スタイルには、背景カラー、ステートカラー、透明度、配置、サイズなどのプロパティが含まれます。テーマを適用すると、指定したスタイルが対応するコンポーネントに反映されます。使用する環境でコアコンポーネントを有効にすると、Canvas テーマがデフォルトで追加されます。標準のテーマをダウンロードしてカスタマイズすることができます。標準提供の テーマとして、サンプルテーマを環境にデプロイできます。これにより、フォームのスタイル設定を開始でき、ビジネス要件に応じてテーマを作成またはカスタマイズするための基本構造が提供されます。
権限：forms-users グループにユーザーを追加します。forms-users グループのメンバーには、アダプティブフォームを作成する権限があります。フォーム専用のユーザーグループの詳細なリストについて詳しくは、グループと権限を参照してください。

アダプティブフォームを作成 create-an-adaptive-form

ローカルの AEM オーサーインスタンスにログインします。
Experience Manager のログインページに資格情報を入力します。ログイン後、左上隅の Adobe Experience Manager／Forms／フォームとドキュメント を選択します。
作成／アダプティブフォームを作成 を選択します。
アダプティブフォームコアコンポーネントテンプレートを選択し、「次へ」をクリックします。
プロパティを追加 が表示されます。以下のプロパティフィールドの値を指定します。「タイトル」フィールドと「ドキュメント名」フィールドは必須です。
- タイトル： フォームの表示名を指定します。タイトルを指定すると、Experience Manager Forms ユーザーインターフェイス内のフォームを特定しやすくなります。
- 名前： フォームの名前を指定します。指定された名前のノードがリポジトリーに作成されます。タイトルを入力し始めると、名前フィールドの値が自動的に生成されます。候補として入力された値は変更可能です。名前フィールドには、英数字、ハイフン、アンダースコアのみを使用できます。
- 説明： フォームに関する詳細情報を入力します。
- テーマクライアントライブラリ： アダプティブフォームのテーマを指定します。デフォルトでは、adaptiveform.theme.canvas3 のテーマが選択されています。また、テーマクライアントライブラリ ドロップダウンメニューから別のテーマを選択できます。
- 設定コンテナ： アダプティブフォームの設定ファイルを保存する場所を定義します。これらの設定ファイルには、アダプティブフォームの動作と表示方法に関連する設定およびプロパティが含まれています。
- タグ： アダプティブフォームを一意に識別するためのタグを指定します。タグを指定すると、フォームを検索しやすくなります。タグを作成するには、「タグ」ボックスに新しいタグ名を入力します。
「作成」を選択します。アダプティブフォームが作成され、フォームを編集用に開くためのダイアログが表示されます。
「編集」を選択して、新規作成されたフォームを新しいタブで開きます。フォームが編集用に開かれ、テンプレート内の利用可能なコンテンツが表示されます。また、新規作成されたフォームをカスタマイズするサイドバーも表示されます。

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

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

アダプティブフォームの送信アクションを設定 configure-submit-action-for-form

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

コンテンツブラウザーを開き、アダプティブフォームの ガイドコンテナ コンポーネントを選択します。
ガイドコンテナプロパティアイコンをクリックします。アダプティブフォームコンテナダイアログボックスが開きます。
「送信」タブをクリックします。
必要に応じて、送信アクション を選択して設定します。送信アクションについて詳しくは、アダプティブフォームの送信アクションを参照してください。

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

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

コンテンツブラウザーを開き、アダプティブフォームの ガイドコンテナ コンポーネントを選択します。
ガイドコンテナプロパティアイコンをクリックします。アダプティブフォームコンテナダイアログボックスが開きます。
「送信」タブを開きます。
- リダイレクト URL を設定するには、「送信」オプションで、「URL にリダイレクト」オプションを選択し、AEM Sites ページを参照して選択するか、外部ページの URL を指定します。
- カスタムメッセージまたはお礼のメッセージを設定するには、「送信」オプションで「メッセージを表示」オプションを選択し、メッセージコンテンツ ボックスにメッセージを入力します。これはリッチテキストボックスで、全画面表示オプションを使用して、使用可能なすべてのリッチテキスト項目を表示できます。

アダプティブフォームのスキーマまたはフォームデータモデルを設定 configure-schema-or-data-model-for-form

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

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

フォームの JSON スキーマまたはフォームデータモデルを設定するには：

コンテンツブラウザーを開き、アダプティブフォームの ガイドコンテナ コンポーネントを選択します。
ガイドコンテナプロパティアイコンをクリックします。アダプティブフォームコンテナダイアログボックスが開きます。
「データモデル」タブを開きます。
要件に応じて、JSON スキーマまたはフォームデータモデルを選択し、設定します。
- 「フォームモデル」オプションを選択する場合は、「フォームデータモデルを選択」オプションを使用して、事前設定済みのフォームデータモデルを選択します。
- 「スキーマ」オプションを選択する場合は、「スキーマ」オプションを使用して、フォームの JSON スキーマを選択します。
「完了」をクリックします。

NOTE

ガイドコンテナプロパティを使用して、アダプティブフォームの JSON スキーマやフォームデータモデルを編集できます。

事前入力サービスを設定 configure-prefill-service-for-form

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

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

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

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