アダプティブフォームを作成します creating-an-adaptive-form-core-components
アダプティブフォームを使用すると、魅力的でレスポンシブ、かつ動的でアダプティブなフォームを作成できます。AEM Forms は、アダプティブフォームを素早く作成するための、ビジネスユーザーにとってわかりやすいウィザードを提供します。このウィザードはクイックタブナビゲーションを備えており、アダプティブフォームを作成するための事前設定済みのテンプレート、スタイル設定、フィールド、送信オプションを簡単に選択することができます。
開始する前に、使用可能な Forms コンポーネントのタイプについて学習します。
-
アダプティブフォームコアコンポーネント:標準化されたデータキャプチャコンポーネントです。これらのコンポーネントは、デジタル登録エクスペリエンスのカスタマイズ機能を提供し、開発時間を短縮し、メンテナンスコストを削減します。開発者は、これらのコンポーネントを簡単にカスタマイズし、スタイルを設定できます。アドビでは、これらの最新かつ拡張性の高いコンポーネントを活用してアダプティブフォームを開発することをお勧めします。
-
アダプティブフォーム基盤コンポーネント:従来の(古い)データキャプチャコンポーネントです。引き続きこれらを使用して、既存の基盤コンポーネントベースのアダプティブフォームを編集できます。 新しいフォームを作成する場合は、アダプティブフォームコアコンポーネントを使用してアダプティブフォームを作成することをお勧めします。
前提条件
アダプティブフォームを作成するには、以下が必要です。
-
お使いの環境でのアダプティブフォームコアコンポーネントの有効化:アダプティブフォームコアコンポーネントは、プログラムを作成した時点でお使いの環境で有効になります。アーキタイプ 39 以前の Forms as a Cloud Service 環境をご利用の場合は、ご利用の環境でアダプティブフォームコアコンポーネントを有効にします。ご利用の環境でコアコンポーネントを有効にすると、アダプティブ Forms(コアコンポーネント) のテンプレートとテーマが環境に追加されます。 AEM SDK バージョンが 2023.02.0 より前の場合は、2023.02.0 リリースより前にアダプティブフォームのコアコンポーネントがプレリリースの一部であったので、お使いの環境で
prerelease
フラグが有効になっていることを確認してください。 -
アダプティブフォームテンプレート:テンプレートは基本構造を提供し、アダプティブフォームのアピアランス(レイアウトとスタイル)を定義します。これには、特定のプロパティやコンテンツ構造を有するフォーマット済みのコンポーネントが含まれます。また、テーマと送信アクションを定義するオプションも提供されます。 テーマは、ルックアンドフィールと送信アクションを定義し、アダプティブフォームの送信時に実行するアクションを定義します。 例えば、収集したデータをデータソースに送信する場合などです。 クラウドサービスでは、空白という名前の OOTB テンプレートが提供されます。
blank
テンプレートは、すべての新しい AEM Forms as a Cloud Service プログラムに含まれています。- パッケージマネージャーを使用して参照パッケージをインストールし、AEM Forms as a Cloud Service プログラムに
blank
テンプレートを追加できます。 - 最初からアダプティブフォームテンプレート(コアコンポーネント)を作成することもできます。
- また、サンプルテンプレートを環境にデプロイできます。これらは、フォームの作成を迅速に開始するのに役立ちます。
-
アダプティブフォームのテーマ:テーマには、コンポーネントとパネル向けのスタイル設定の詳細が含まれます。 スタイルには、背景カラー、ステートカラー、透明度、配置、サイズなどのプロパティが含まれます。テーマを適用すると、指定したスタイルが対応するコンポーネントに反映されます。
Canvas
テンプレートは、すべての新しい AEM Forms as a Cloud Service プログラムに含まれています。また、サンプルテーマを環境にデプロイできます。これらは、フォームのスタイル設定を開始できるようサポートし、ビジネス要件に応じてテーマを作成またはカスタマイズするための基本構造を提供します。 -
権限:forms-users グループにユーザーを追加します。forms-users グループのメンバーには、アダプティブフォームを作成する権限があります。フォーム専用のユーザーグループの詳細なリストについて詳しくは、グループと権限を参照してください。
アダプティブフォームを作成します create-an-adaptive-form-core-components
-
Experience Manager Forms オーサーインスタンスにログインします。Cloud インスタンスまたはローカル開発インスタンスの場合があります。
-
Experience Manager のログインページに資格情報を入力します。ログイン後、左上隅の Adobe Experience Manager/Forms/フォームとドキュメント を選択します。
-
作成/アダプティブフォーム を選択します。ウィザードが開きます。ソースタブで、テンプレートを選択します。
テンプレートを選択すると、テンプレートで指定されたテーマと送信アクションが自動的に選択され、作成 ボタンが有効になります。「スタイル」または「送信」タブを使用して、別のテーマや送信アクションを選択することができます。 選択したテンプレートでテーマが指定されていない場合、作成ボタンは無効のままです。「スタイル」タブに進み、テーマを手動で選択することができます。
note note NOTE ご利用の環境に アダプティブフォーム(コアコンポーネント) テンプレートがない場合は、ご利用の環境のアダプティブフォームコアコンポーネントを有効にします。ご利用の環境でコアコンポーネントを有効にすると、アダプティブフォーム(コアコンポーネント) テンプレートが環境に追加されます。 -
「スタイル」タブで、テーマを選択します。
-
選択したテンプレートでテーマを指定すると、ウィザードでテーマが自動的に選択されます。 「スタイル」タブから別のテーマを選択することもできます。
-
選択したテンプレートにテーマが指定されていない場合は、「スタイル」タブを使用してテーマを選択することができます。 この「作成」ボタンは、テーマが選択された後にのみ有効になります。
-
-
(オプション)「データ」タブで、データモデルを選択します。
-
フォームデータモデル(FDM):フォームデータモデルを使用すると、異なるデータソースのエンティティやサービスをアダプティブフォームに統合することができます。作成するアダプティブフォームで、複数のデータソースに対するデータの取得と書き込みが必要になる場合は、フォームデータモデル(FDM)を選択します。
-
JSON スキーマ:JSON スキーマ コアコンポーネントベースのアダプティブフォームは、生成または消費されるデータの構造を表す JSON スキーマを関連付ける機能により、自社のバックエンドシステムとシームレスに統合できます。この関連付けにより、作成者はスキーマの要素を使用して、アダプティブフォームにコンテンツを動的に追加できます。スキーマの要素には、オーサリングプロセスでコンテンツブラウザーの「データモデルオブジェクト」タブから容易にアクセスできます。すべてのフィールドは、作成されたアダプティブフォームに自動的に追加されます。
デフォルトでは、関連付けられた JSON スキーマのすべてのフィールドが自動的に選択され、対応するアダプティブフォームコンポーネントに変換されるので、オーサリングプロセスを合理化できます。ウィザードでは、チェックボックスを使用してアダプティブフォームに含めるフィールドを選択できる、さらに便利な機能が用意されています。
-
-
「送信」タブで、送信アクションを選択します。
-
テンプレートを選択すると、テンプレートで指定された送信アクションが自動選択されます。 「送信」タブから、別の送信アクションを選択することができます。 「送信」タブには、使用可能なすべての送信アクションが表示されます。
-
選択したテンプレートで送信アクションが指定されていない場合は、「送信」タブを使用して送信アクションを選択することができます
-
-
(オプション)「配信」タブで、アダプティブフォームの公開日または非公開日を指定することができます。
-
「作成」を選択します。アダプティブフォームを保存するためのタイトル、名前および場所を指定するためのダイアログが表示されます。
- タイトル:フォームの表示名を指定します。タイトルを指定すると、Experience Manager Forms ユーザーインターフェイス内のフォームを特定しやすくなります。
- 名前: フォームの名前を指定します。指定された名前のノードがリポジトリーに作成されます。タイトルを入力し始めると、名前フィールドの値が自動的に生成されます。候補として入力された値は変更可能です。「ドキュメント名」フィールドには、英数字、ハイフン、アンダースコアのみを使用できます。無効な入力は、すべてハイフンに置き換えられます。
- パス:アダプティブフォームを保存する場所を指定します。 アダプティブフォームは、
/content/dam/formsanddocuments
に直接保存することができます。または、/content/dam/formsanddocuments/adaptiveforms
などのフォルダーを作成して、アダプティブフォームを保存することができます。フォルダーをパスで使用する前に、必ずフォルダーを作成してください。 「パス」フィールドでは、フォルダーは自動的には作成されません。
-
「作成」を選択します。アダプティブフォームが作成され、アダプティブフォームエディターで開きます。エディターに、テンプレートで使用可能なコンテンツが表示されます。 アダプティブフォームのタイプに応じて、関連する JSON スキーマまたはフォームデータモデル(FDM)に存在するフォーム要素が、サイドバーの コンテンツブラウザー の「データモデルオブジェクト」タブに表示されます。これらの要素もドラッグ&ドロップしてアダプティブフォームを作成できます。
これで、アダプティブフォームのコアコンポーネントをアダプティブフォームのコンテナにドラッグ&ドロップし、フォームをデザインおよび作成できます。また、https://aemcomponents.dev/ では、使用可能なコアコンポーネントの動作を確認できます。
アダプティブフォームの送信アクションを設定 configure-submit-action-for-form
送信アクションを使用すると、アダプティブフォーム経由で取り込んだデータの送信先を選択できます。送信アクションは、ユーザーがアダプティブフォームの「送信」ボタンをクリックするとトリガーされます。アダプティブフォームには、すぐに使用できる送信アクションがいくつか含まれています。デフォルトの送信アクションを拡張して、独自のカスタム送信アクションを作成することもできます。フォームの送信アクションを設定するには、次の手順を実行します。
-
コンテンツブラウザーを開き、アダプティブフォームの ガイドコンテナ コンポーネントを選択します。
-
ガイドコンテナプロパティ アイコンをクリックします。アダプティブフォームコンテナダイアログボックスが開きます。
-
「送信」タブをクリックします。
-
必要に応じて、送信アクション を選択して設定します。送信アクションについて詳しくは、アダプティブフォームの送信アクションを参照してください。
ユーザーをページにリダイレクトするか、フォーム送信時にお礼のメッセージを表示
フォームの送信時に、ユーザーを別の web ページまたはメッセージにリダイレクトできます。ユーザーをリダイレクトするか、お礼のメッセージを設定するには、次の手順を実行します。
-
コンテンツブラウザーを開き、アダプティブフォームの ガイドコンテナ コンポーネントを選択します。
-
ガイドコンテナプロパティ アイコンをクリックします。アダプティブフォームコンテナダイアログボックスが開きます。
-
「送信」タブを開きます。
-
リダイレクト URL を設定するには、「送信」オプションで、「URL にリダイレクト」オプションを選択し、AEM Sites ページを参照して選択するか、外部ページの URL を指定します。
-
カスタムメッセージまたはお礼のメッセージを設定するには、「送信」オプションで「メッセージを表示」オプションを選択し、メッセージコンテンツ ボックスにメッセージを入力します。これはリッチテキストボックスで、全画面表示オプションを使用して、使用可能なすべてのリッチテキスト項目を表示できます。
-
アダプティブフォームのスキーマまたはフォームデータモデル(FDM)の設定 configure-schema-or-data-model-for-form
フォームデータモデル(FDM)を使用してフォームをデータソースに接続し、ユーザーのアクションに基づいてデータを送受信することができます。また、フォームを JSON スキーマに接続して、送信されたデータを事前に定義した形式で受信することもできます。要件に基づいて、次のようにフォームを JSON スキーマまたはフォームデータモデル(FDM)に接続します。
フォームの JSON スキーマまたはフォームデータモデル(FDM)の設定
フォームの JSON スキーマまたはフォームデータモデル(FDM)を設定するには:
-
コンテンツブラウザーを開き、アダプティブフォームの ガイドコンテナ コンポーネントを選択します。
-
ガイドコンテナプロパティ アイコンをクリックします。アダプティブフォームコンテナダイアログボックスが開きます。
-
「データモデル」タブを開きます。
-
要件に応じて、JSON スキーマまたはフォームデータモデル(FDM)を選択し、設定します。
- 「フォームモデル」オプションを選択する場合は、「フォームデータモデルを選択」オプションを使用して、事前設定済みのフォームデータモデル(FDM)を選択します。
- 「スキーマ」オプションを選択する場合は、「スキーマ」オプションを使用して、フォームの JSON スキーマを選択します。
-
「完了」をクリックします。
事前入力サービスを設定 configure-prefill-service-for-form
事前入力サービスを使用すると、既存のデータを使用してアダプティブフォームのフィールドに自動入力できます。ユーザーがフォームを開くと、これらのフィールドの値は事前入力されています。以下の操作を実行できます。
フォームデータモデルの事前入力サービスを使用して、アダプティブフォームのフィールドに事前入力 fdm-prefill-service
フォームデータモデルの事前入力サービスでは、フォームデータモデル事前入力サービス、またはカスタムの事前入力サービスを使用して、アダプティブフォームのフィールドに事前入力できます。フォームデータモデルの事前入力サービスでは、設定済みのフォームデータモデルのサービスを取得を使用して、データを取得します。アダプティブフォームでフォームデータモデルの事前入力サービスを使用するには、次の手順を実行します。
- コンテンツブラウザーを開き、アダプティブフォームの ガイドコンテナ コンポーネントを選択します。
- ガイドコンテナプロパティ アイコンをクリックします。アダプティブフォームコンテナダイアログボックスが開きます。
- アダプティブフォームコンテナプロパティ(
アイコン)をクリックします。データモデルを設定するためのアダプティブフォームコンテナダイアログボックスが開きます。
- フォームデータモデル(FDM)を選択します。「基本」タブを開きます。事前入力サービスで、「フォームデータモデルの事前入力サービス」を選択します。
- 「完了」をクリックします。これで、アダプティブフォームがフォームデータモデルの事前入力を使用するように設定されました。ルールエディターを使用して、フォームのフィールドに事前入力するルールを作成できるようになりました。
アダプティブフォームのフォームモデルプロパティの編集 edit-form-model
-
アダプティブフォームを選択し、 /プロパティを開く をクリックします。フォームプロパティページが開きます。
-
「フォームモデル」タブをクリックし、フォームモデルを選択します。アダプティブフォームにフォームモデルがない場合は、JSON スキーマまたはフォームデータモデル(FDM)を選択できます。一方、アダプティブフォームが既にフォームモデルに基づいている場合は、同じタイプの別のフォームモデルに切り替えることもできます。例えば、フォームが JSON スキーマを使用している場合、別の JSON スキーマに容易に切り替えることができます。同様に、フォームがフォームデータモデル(FDM)を使用している場合は、別のフォームデータモデル(FDM)に切り替えることができます。
-
「保存」を選択して、プロパティを保存します。
AEM アダプティブフォームの名前を変更する方法 rename-an-AEM-Adaptive-Form
アダプティブフォームの名前を変更するには、次の手順を実行します。
- AEM Forms ユーザーインターフェイスでアダプティブフォームを選択します。
- 上部パネルにある「プロパティ」をクリックします。
- 下の画像に示すように、「タイトル」タブでフォームの名前を変更します。
- 「保存して閉じる」をクリックします。
関連トピック see-also
- AEM アダプティブフォームの作成
- AEM Sites ページへの AEM アダプティブフォームの追加
- AEM アダプティブフォームへテーマを適用
- AEM アダプティブフォームへコンポーネントを追加
- AEM アダプティブフォームでの Captcha の使用
- AEM アダプティブフォームの PDF バージョン(DoR)の生成
- AEM アダプティブフォームを翻訳
- フォームの使用状況を追跡するアダプティブフォームの Adobe Analytics を有効にする
- Microsoft SharePoint へアダプティブフォームを接続
- Microsoft Power Automate へアダプティブフォームを接続
- Microsoft OneDrive へアダプティブフォームを接続
- Microsoft Azure Blob Storage へアダプティブフォームを接続
- Salesforce へアダプティブフォームを接続
- AEM アダプティブフォームで Adobe Sign を使用
- アダプティブフォームの新しいロケールを追加
- データベースへアダプティブフォームデータを送信
- REST エンドポイントへアダプティブフォームデータを送信
- AEM ワークフローへアダプティブフォームデータを送信
- フォームポータルを使用して AEM web サイト上の AEM アダプティブフォームを一覧表示
- アダプティブフォームへのバージョン管理、コメント、注釈の追加
- アダプティブフォームの比較
- ルールエディターを使用してフォームに動的な動作を追加
- 画面サイズやデバイスタイプに応じてフォームのレイアウトを設定