アダプティブフォームフラグメント adaptive-form-fragments

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

アダプティブフォームの新規作成または AEM Sites ページへのアダプティブフォームの追加には、最新の拡張可能なデータキャプチャコアコンポーネントを使用することをお勧めします。これらのコンポーネントは、アダプティブフォームの作成における大幅な進歩を表し、ユーザーエクスペリエンスの向上を実現します。この記事では、基盤コンポーネントを使用してアダプティブフォームを作成する古い方法について説明します。

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

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

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

フラグメントの作成 create-a-fragment

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

フラグメントを最初から作成 create-fragment-from-scratch

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

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

  3. フラグメントのタイトル、名前、説明およびタグを指定します。

    note note
    NOTE
    フラグメントには一意の名前を指定してください。同じ名前を持つ別のフラグメントが存在する場合、フラグメントの作成は失敗します。
  4. フォームモデル」タブをクリックして開き、「次から選択」ドロップダウンメニューから、フラグメントに対して次のいずれかのモデルを選択します。

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

      note note
      NOTE
      コアコンポーネントに基づくアダプティブフォームでは、1 つのフォームフラグメントを 1 つのフォーム内で複数回使用できます。ベースがないのフォームフラグメントおよびスキーマベースのフォームフラグメントの両方をサポートします。
    • フォームテンプレート:AEM Forms にアップロードされた XDP テンプレートを使用して、フラグメントを作成する際に指定します。フラグメントのフォームモデルとして適当な XDP テンプレートを選択してください。

    フォームテンプレートをモデルとして使用したアダプティブフォームの作成

    選択したフォームテンプレート内でフラグメントとしてマークされたサブフォームも表示されます。ドロップダウンリストから、アダプティブフォームフラグメントのサブフォームを選択できます。

    指定したフォームテンプレートからサブフォームを選択する

    さらに、ドロップダウンボックスでサブフォームの SOM 式を指定することで、フォームテンプレート内でフラグメントとしてマークされていないサブフォームを使用したアダプティブフォームフラグメントを作成することもできます。

    • XML スキーマ:AEM Forms にアップロードされた XML スキーマを使用して、フラグメントを作成する際に指定します。フラグメントのフォームモデルとして使用可能な XML スキーマからアップロードまたは選択できます。

    モデルとして XML スキーマに基づいてアダプティブフォームフラグメントを作成

    ドロップダウンボックスから選択されたスキーマにある complexType を選択することで、アダプティブフォームフラグメントを作成することもできます。

    指定した XML スキーマモデルから複合タイプを選択する

  5. 作成」をクリックし、次に「開く」をクリックして、編集モードでデフォルトテンプレートを使ってフラグメントを開きます。

編集モードでは、AEM Sidekick から任意のアダプティブフォームコンポーネントをフラグメントにドラッグ&ドロップできます。アダプティブフォームのコンポーネントについて詳しくは、アダプティブフォームのオーサリングの概要を参照してください。

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

パネルをフラグメントとして保存 save-panel-as-a-fragment

  1. アダプティブフォームフラグメントとして保存するパネルが含まれているアダプティブフォームを開きます。

  2. パネルのツールバーで、「フラグメントとして保存」をクリックします。「フラグメントとして保存」ダイアログが開きます。

    note note
    NOTE
    フラグメントとして保存するパネルに子パネルが含まれている場合、そのフラグメントにも子パネルが含まれるようになります。
  3. 「フラグメントの作成」ダイアログで、次の情報を指定します。

    • 名前:フラグメントの名前。デフォルト値はパネルの要素名です。このフィールドは必須です。

      note note
      NOTE
      フラグメントには一意の名前を指定してください。同じ名前を持つ別のフラグメントが存在する場合、フラグメントの作成は失敗します。
    • タイトル:フラグメントのタイトル。デフォルト値はパネルのタイトルです。

    • 説明:フラグメントの説明。

    • タグ:フラグメントのタグメタデータ。

    • ターゲットパス:フラグメントが保存されるリポジトリパス。パスを指定しない場合、フラグメントと同じ名前を持つノードが、アダプティブフォームを含むノードの横に作成されます。フラグメントはこのノードに保存されます。

    • フォームモデル:アダプティブフォームのフォームモデルに応じて、このフィールドには「XML スキーマ」、「フォームテンプレート」、または「なし」が表示されます。このフィールドは編集できません。

    • フラグメントモデルルート:XSD ベースのアダプティブフォームにのみ表示されます。フラグメントモデルのルートを指定します。 ドロップダウンリストから / または XSD 複合タイプを選択できます。フラグメントを別のアダプティブフォームで再利用できるのは、フラグメントモデルルートとして複合タイプを選択した場合のみです。
      / をフラグメントモデルルートとして選択した場合、ルートからの完全な XSD ツリーは、「アダプティブフォームデータモデル」タブに表示されます。複合タイプのフラグメントモデルルートの場合、選択した複合タイプの子孫のみが、「アダプティブフォームデータモデル」タブに表示されます。フラグメントを作成し、フラグメントモデルルート ​として複合タイプを選択すると、その複合タイプが使用される場所((同じフォーム内や複数のフォーム間)で使用できます。

    • XSD 参照:XSD ベースのアダプティブフォームにのみ表示されます。XML スキーマの場所を表示します。

    • XDP 参照:XDP ベースのアダプティブフォームにのみ表示されます。XDP フォームテンプレートの場所を表示します。

    save-fragment

    フラグメントとして保存ダイアログ

  4. OK」をクリックします。

    パネルがリポジトリー内の指定した場所またはデフォルトの場所に保存されます。アダプティブフォームでは、パネルがフラグメントのスナップショットによって置き換えられます。以下に示すように、一般情報パネルとその子パネル、個人情報、アドレスは、フラグメントとして保存されます。

    フラグメントを編集するには、パネルツールバーで「アセットを編集」をクリックします。フラグメントが新しいタブまたはウィンドウ上に編集モードで開きます。

    フラグメントの編集

フラグメントの操作 working-with-fragments

フラグメントの外観の設定 configure-fragment-appearance

アダプティブフォームに挿入したフラグメントは、プレースホルダーの画像として表示されます。プレースホルダーには、フラグメント内の子パネルのタイトルが最大 10 個まで表示されます。AEM Forms を設定することにより、プレースホルダーの画像の代わりにすべてのフラグメントを表示することができます。

次の手順を実行すると、フォームのフラグメントをすべて表示できます。

  1. AEM web コンソールの設定ページ(https:[host]:[port]/system/console/configMgr)に移動します。

  2. アダプティブフォームとインタラクティブ通信の web チャネル設定」を検索および選択して、編集モードで開きます。

  3. フラグメントの代わりにプレースホルダーを有効にする」チェックボックスを無効にすると、プレースホルダーの画像の代わりにすべてのフラグメントを表示できます。

アダプティブフォームへのフラグメントの挿入 insert-a-fragment-in-an-adaptive-form

作成したアダプティブフォームフラグメントは、AEM コンテンツファインダーの「アダプティブフォームフラグメント」タブに表示されます。アダプティブフォームフラグメントをアダプティブフォーム内に挿入するには、次の手順を実行します。

  1. アダプティブフォームフラグメントを挿入するアダプティブフォームを編集モードで開きます。

  2. サイドバーの「Assets assets-browser 」をクリックします。アセットブラウザーで、ドロップダウンリストから「アダプティブフォームフラグメント」を選択します。

    すべてのアダプティブフォームフラグメントを表示することも、あるいはフォームモデル(フォームテンプレート、XML スキーマ、またはベーシック)に基づいてフィルタリングすることもできます。

  3. アダプティブフォームフラグメントをアダプティブフォームにドラッグアンドドロップします。

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

アダプティブフォームフラグメントは、アダプティブフォーム内の参照により挿入され、スタンドアロンのアダプティブフォームフラグメントと同期されます。このことは、アダプティブフォームフラグメントが更新されると、フラグメントが使用されているすべてのアダプティブフォーム内にその変更が反映されることを意味します。

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

次のサンプル画像に示されているように、追加されたフラグメントのパネルツールバー上にある「アセットを埋め込み: <fragmentName>」ボタンをクリックすることで、アダプティブフォームフラグメントをアダプティブフォームに埋め込むことができます。

フォームフラグメントのアダプティブフォーム内への埋め込み

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

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

入れ子のアダプティブフォームフラグメントを作成できます。このことはフラグメント内に別のフラグメントをドラッグ&ドロップし、入れ子のフラグメント構造を構築できることを意味します。

フラグメントの変更 change-fragments

アダプティブフォームフラグメントパネルのコンポーネントの編集ダイアログ内で​ フラグメントアセットを選択 ​プロパティを使用することで、アダプティブフォームフラグメントを別のフラグメントで置き換えたり変更したりできます。

アダプティブフォームフラグメントにおけるレコードのドキュメントの生成 generate-DOR-for-fragments

レコードのドキュメント(DOR)は、フォームの情報を印刷形式またはドキュメント形式で記録するのに役立ちます。そのため、後でいつでも顧客に関する情報を追跡できるようになり、レコードのドキュメントを使用してフォームとコンテンツを PDF 形式でまとめてアーカイブすることもできます。詳しくは、アダプティブフォームフラグメントのドキュメントのレコードの生成を参照してください

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

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

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

NOTE
  • アダプティブフォームでベースなしのフォームフラグメントを複数回使用すると、フラグメントのフィールド間でデータの同期に関する問題が発生します。データ同期の問題は、コアコンポーネントベースのフォームフラグメントでは発生しません。コアコンポーネントベースのフォームフラグメントでは、スキーマベースまたはベースなしのフラグメントをフォーム内で複数回使用できます。

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

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

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

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

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

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

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

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

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

フラグメントを含むアダプティブフォームのローカライズ localizing-adaptive-form-containing-fragments

アダプティブフォームフラグメントを含んだアダプティブフォームをローカライズするには、フラグメントとフォームを別々にローカライズする必要があります。考え方としては、フラグメントを一度ローカライズし、それを複数のアダプティブフォーム内で再利用します。

NOTE
フラグメント内のローカライゼーションキーは、アダプティブフォームの XLIFF ファイル内には表示されません。

フラグメントで作業するときの考慮事項 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

フォームを作成するために使用できるリファレンスアダプティブフォームフラグメントが提供されています。詳しくは、リファレンスフラグメントを参照してください。

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