コアコンポーネントに基づくアダプティブフォームでのアダプティブフォームフラグメントの作成と使用 adaptive-form-fragments

バージョン
記事リンク
AEM 6.5
この記事
AEM as a Cloud Service
ここをクリックしてください

すべてのフォームは特定の目的のために設計されますが、ほとんどのフォームにはいくつかの共通するセグメントがあります(例:名前と住所、家族の詳細、収入の詳細などの個人情報を入力するためのセグメント)。フォームのデベロッパーは、新しいフォームを作成するたびに、こうした共通セグメントを作成する必要があります。

アダプティブフォームには、パネルやフィールドグループなどのフォームセグメントを 1 回だけ作成するための便利な機能が用意されています。作成したフォームセグメントは、アダプティブフォームで再利用することができます。この再利用可能なスタンドアロンのセグメントは、アダプティブフォームフラグメントと呼ばれます。

フォームフラグメントは複数のフォームにシームレスに統合され、一貫性のあるプロフェッショナルな外観のフォームを効率的に作成できます。フォームフラグメントは、「一度変更すればすべてに反映」機能を通じて、再利用性、標準化、ブランドの一貫性を確保します。1 か所で行われた更新が、これらのフラグメントを利用するすべてのフォームに自動反映されるので、メンテナンス性と効率性が向上します。

フラグメントを 1 つのドキュメントに複数回追加し、そのコンポーネントのデータ連結プロパティを使用すると、フラグメントを別のデータソースやスキーマに結び付けることができます。例えば、同じアドレスフラグメントを永続アドレス、通信アドレス、請求先アドレスに使用し、それをデータソースやスキーマの様々なフィールドに接続することができます。

NOTE
フォームフラグメントコンポーネントの設定ダイアログとデザインダイアログを使用して、ユーザーのフラグメントエクスペリエンスを簡単にカスタマイズできます。

フォームフラグメントを作成 create-a-fragment

アダプティブフォームフラグメントは、最初から作成することも、既存のアダプティブフォーム内のパネルをフラグメントとして保存することもできます。フォームフラグメントを作成するには、次の手順を行います。

  1. AEM Forms オーサーインスタンス(https://[hostname]:[port]/aem/forms.html)にログインします。

  2. 作成/アダプティブフォームフラグメント ​をクリックします。

  3. フラグメントのタイトル、名前、説明、タグを指定します。フラグメントには一意の名前を指定してください。同じ名前を持つ別のフラグメントが存在する場合、フラグメントの作成は失敗します。

  4. フォームテンプレートを選択します。コアコンポーネントベースのアダプティブフォーム、または基盤コンポーネントベースのアダプティブフォーム用のフォームフラグメントを作成できます。

    • コアコンポーネントベースのフォームフォームフラグメントを作成するには、コアコンポーネントベースのテンプレートを選択します。
    • 基盤コンポーネントベースのフォーム用のフォームフラグメントを作成するには、基盤コンポーネントテンプレートを選択します。例えば、/libs/fd/af/templateForFragment/defaultFragmentTemplate のように指定します。

    コアコンポーネントベースのフォーム用のフォームフラグメントを作成する場合は、「フォームテーマを選択」オプションを使用して、コアコンポーネントベースのテーマを選択します。

  5. フォームモデル」タブをクリックして開き、「次から選択」ドロップダウンメニューから、フラグメントに対して次のいずれかのモデルを選択します。

    「フォームモデル」タブにモデルタイプを表示

    • なし:フォームモデルを使用しないで最初からフラグメントを作成するときに指定します。

      note note
      NOTE
      アダプティブフォームでは、(コアコンポーネントに基づく)単一のフォームフラグメントを複数回使用できます。ベースがないのフォームフラグメントおよびスキーマベースのフォームフラグメントの両方をサポートします。
    • スキーマ:AEM フォームにアップロードされた XML または JSON スキーマを使用してフラグメントを作成する場合に指定します。アップロードするかまたはフラグメントのフォームモデルとして使用可能な XML または JSON スキーマから選択できます。XML スキーマを選択する場合、「XML スキーマの複合型」ドロップダウンボックスから選択したスキーマ内に存在する complexType を選択することにより、アダプティブフォームフラグメントを作成することもできます。JSON スキーマを選択する場合、「JSON スキーマの定義」ドロップダウンボックスから選択したスキーマ内に存在するスキーマを選択することにより、アダプティブフォームフラグメントを作成することもできます。

    • フォームデータモデル:フォームデータモデルを使用してフラグメントを作成する場合に指定します。フォームデータモデル内の 1 つのデータモデルオブジェクトのみに基づいて、アダプティブフォームフラグメントを作成できます。フォームデータモデル定義ドロップダウンを展開します。指定したフォームデータモデル内のすべてのデータモデルオブジェクトがリスト表示されます。リストから、データモデルオブジェクトを選択します。

    フォームデータモデル

  6. 作成」をクリックし、次に「開く」をクリックして、編集モードでデフォルトのテンプレートを使ってフラグメントを開きます。編集モードでは、任意のアダプティブフォームコンポーネントをフラグメントに追加できます。

さらに、フラグメントのフォームモデルとして、XML スキーマまたは XDP フォームテンプレートを選択していた場合は、フォームモデル階層を示す新しいタブがコンテンツファインダーに表示されます。これにより、フォームモデルの要素をフラグメントにドラッグ&ドロップできます。追加されたフォームモデルの要素はフォームコンポーネントに変換されますが、関連の XDP または XSD からの元のプロパティは保持されます。

スキーマまたはフォームデータモデルに基づいてアダプティブフォームフラグメントを作成すると、アダプティブフォームエディターのコンテンツブラウザーの「データソース」タブにフォームデータモデルまたはスキーマ要素が表示されます。フォームモデルの要素をフラグメントにドラッグ&ドロップできます。追加されたフォームモデルの要素はフォームコンポーネントに変換されますが、関連したスキーマからの元のプロパティは保持されます。

アダプティブフォームにフラグメントを追加 insert-a-fragment-in-an-adaptive-form

アダプティブフォームフラグメントをアダプティブフォームに追加するには、次の手順を実行します。

  1. アダプティブフォームを編集モードで開きます。

  2. アダプティブフォームフラグメント ​コンポーネントをフォームに追加します。

  3. サイドバーの Assets コンテンツブラウザーをクリックします。アセットブラウザーのパスの下で、「アダプティブフォームフラグメント」オプションを選択します。フォームのモデルに応じて、フォームで使用可能なすべてのアダプティブフォームフラグメントが表示されます。

    「アダプティブフォームフラグメント」オプションを選択

  4. アダプティブフォームフラグメントを、アダプティブフォームの​ アダプティブフォームフラグメント ​コンポーネントにドラッグ&ドロップします。

    note note
    NOTE
    アダプティブフォーム内で、アダプティブフォームフラグメントをオーサリング用には使用できません。また、JSON ベースのアダプティブフォームで XSD ベースのフラグメントを使用することも、その逆の方法で使用することもできません。

アダプティブフォームフラグメントは、アダプティブフォーム内の参照により追加され、スタンドアロンのアダプティブフォームフラグメントと同期されたままとなります。つまり、アダプティブフォームフラグメントに加えた変更は、そのフラグメントがアダプティブフォームに組み込まれるすべてのインスタンスに反映されます。

フラグメントのアダプティブフォーム内への埋め込み embed-a-fragment-in-adaptive-form

アダプティブフォーム内にアダプティブフォームフラグメントを埋め込むには、追加されたフラグメントのパネルツールバーの「 埋め込み 」アイコンをクリックします。

埋め込まれたフラグメントはスタンドアロンのフラグメントとリンクされなくなります。埋め込まれたフラグメント内のコンポーネントは、アダプティブフォーム内から編集できます。

フラグメント内でのフラグメントの使用 using-fragments-within-fragments

ネストされたアダプティブフォームフラグメントを作成できます。つまり、フラグメントを別のフラグメントにドラッグ&ドロップでき、ネストされたフラグメント構造を持つことができます。

アダプティブフォーム内でのフォームフラグメントの複数回の使用 using-form-fragment-mutiple-times-in-af

ベースがないフォームフラグメントおよびスキーマベースのフォームフラグメントをアダプティブフォーム内で複数回使用して、各フォームフラグメントフィールドに対して一意にデータを保存できます。例えば、住所フォームフラグメントを使用して、ローン申し込みフォームの本住所、連絡先住所、および現居住住所に関する詳細な住所を収集できます。

アダプティブフォームでの複数のフラグメントの使用

データ連結のためのフラグメントの自動マッピング auto-mapping-of-fragments-for-data-binding

XFA フォームテンプレートまたは XSD 複合タイプを使用してアダプティブフォームフラグメントを作成し、フラグメントをアダプティブフォームにドラッグ&ドロップすると、XFA フラグメントまたは XSD 複合タイプは、フラグメントモデルルートが XFA フラグメントまたは XSD 複合タイプにマッピングされている、対応アダプティブフォームフラグメントに自動的に置き換えられます。

コンポーネントの編集ダイアログから、フラグメントアセットとその連結を変更できます。

また、AEM コンテンツファインダーのアダプティブフォームフラグメントライブラリからバインドされたアダプティブフォームフラグメントをドラッグアンドドロップし、アダプティブフォームフラグメントパネルのコンポーネントの編集ダイアログから正しいバインド参照を与えることもできます。

フラグメントの管理 manage-fragments

AEM Forms UI を使用して、アダプティブフォームフラグメントに対して複数の操作を実行できます。

  1. https://[hostname]/aem/forms.html にアクセスします。

  2. AEM Forms UI ツールバーで「選択」をクリックし、アダプティブフォームフラグメントを選択します。ツールバーには、選択されているアダプティブフォームフラグメントに対して実行できる次の操作が表示されます。

操作
説明
編集
選択されているアダプティブフォームフラグメントを編集モードで開きます。
プロパティ
プロパティパネルを開きます。 プロパティパネルから、プロパティの表示や編集、プレビューの生成、選択したフラグメントのサムネール画像のアップロードができます。詳しくは、「メタデータの管理」を参照してください。
コピー
選択したフラグメントをコピーします。貼り付けボタンがツールバーに表示されます。
ダウンロード
選択されているフラグメントをダウンロードします。
プレビュー
フラグメントを HTML でプレビューするか、あるいは XML ファイルからのデータをフラグメントとマージしてカスタムプレビューを生成するかのオプションが与えられます。詳しくは、フォームのプレビューを参照してください。
レビューの開始/レビューの管理
選択されているフラグメントのレビューを開始したり管理したりできます。詳しくは、レビューの作成と管理を参照してください。
辞書を追加
選択されているフラグメントをローカライズするための辞書を生成します。詳しくは、アダプティブフォームのローカライズを参照してください。
公開/非公開
選択されているフラグメントを公開/非公開します。
削除
選択されているフラグメントを削除します。

フラグメントで作業するときの考慮事項 key-points-to-remember-when-working-with-fragments

  • フラグメント名が一意であることを確認します。同じ名前の既存のフラグメントが存在する場合、フラグメントの作成は失敗します。
  • XDP ベースのアダプティブフォームでは、別の XDP フラグメントを含むフラグメントとしてパネルを保存すると、生成されるフラグメントは子 XDP フラグメントへと自動的にバインドされます。XSD ベースのアダプティブフォームの場合、結果のフラグメントはスキーマルートにバインドされます。
  • アダプティブフォームフラグメントを作成すると、フラグメントノードが作成されます。これは CRXDE Lite における、アダプティブフォームの guideContainer ノードに類似したものです。
  • 異なるフォームデータモデルを使用するアダプティブフォーム内のフラグメントは、サポートされていません。例えば、XSD ベースのアダプティブフォームでは、XDP ベースのフラグメントはサポートされていません(その逆についても同様です)。
  • アダプティブフォームフラグメントは、AEM コンテンツファインダー内の「アダプティブフォームフラグメント」タブを通して使用できます。
  • スタンドアロンのアダプティブフォームフラグメント内の式、スクリプト、またはスタイルは、アダプティブフォームの参照によって挿入された場合や埋め込まれた場合にも保持されます。
  • アダプティブフォームフラグメントを編集することはできません。これはアダプティブフォーム内から参照によって挿入されたものです。編集するには、スタンドアロンのアダプティブフォームフラグメントを編集するか、アダプティブフォームにフラグメントを埋め込みます。
  • アダプティブフォームを公開する場合、参照によってアダプティブフォームに挿入されたスタンドアロンのアダプティブフォームフラグメントを公開する必要があります。
  • 更新されたアダプティブフォームフラグメントを再公開すると、フラグメントが使用されているアダプティブフォームの公開済みインスタンスに変更が反映されます。
  • 検証コンポーネントが含まれているアダプティブフォームの場合、匿名ユーザーはサポートされません。また、アダプティブフォームフラグメントで検証コンポーネントを使用することはお勧めしません。
  • Mac のみ)フォームフラグメント機能がすべてのシナリオで正しく動作するようにするには、/private/etc/hosts ファイルに次のエントリを追加します。
    127.0.0.1 <Host machine> ホストマシン:AEM Forms がデプロイされている Apple Mac マシン。

リファレンスフラグメント reference-fragments

フォームの作成に使用できるアダプティブフォームフラグメントを参照します。

関連トピック see-also

recommendation-more-help
19ffd973-7af2-44d0-84b5-d547b0dffee2