コアコンポーネントに基づくアダプティブフォームテンプレートの作成 adaptive-form-templates

フォームを作成する場合、フィールドとコンポーネントを追加して、フォーム構造、コンテンツ、アクションをエディターで定義します。フィールドとコンポーネントは、フォームコンテナの guideRootPanel に追加します。テンプレートエディターを使用すると、フォームの作成時に使用できる基本構造と初期コンテンツを含んだテンプレートを作成できます。

例えば、すべての作成者に登録フォームで特定のテキストボックス、ナビゲーションボタン、送信ボタンを使用させるようにします。他の登録フォームと統一のとれたフォームを作成者が作成できるようにコンポーネントを追加してテンプレートを作成できます。作成者がテンプレートを使用してアダプティブフォームを作成する場合、新しいフォームは、テンプレートで指定した構造とコンポーネントを継承します。テンプレートエディターでは、以下のことが行えます。

  • 構造レイヤーでフォームのヘッダーおよびフッターコンポーネントを追加できます。
  • フォームの初期コンテンツを提供できます。
  • テーマや送信アクションを指定できます。

前提条件

お使いの環境でのアダプティブフォームコアコンポーネントの有効化:アダプティブフォームコアコンポーネントは、プログラムを作成した時点でお使いの環境で有効になります。AEM アーキタイプ 39 以前の Forms as a Cloud Service 環境をご利用の場合は、ご利用の環境でアダプティブフォームコアコンポーネントを有効にします

NOTE
アーキタイプ 45 に基づくForms as a Cloud Service 環境のデプロイ時に、アダプティブフォーム(コアコンポーネント) ​テンプレートとコアコンポーネントベースのテーマが環境に追加されます。

テンプレートの操作 working-with-templates

ツールメニューからテンプレートエディターにアクセスするには、Adobe Experience Managerツール一般テンプレート ​に移動します。テンプレートが、編集可能なテンプレートが有効になっているフォルダーで整理されています。

NOTE
コアコンポーネント固有のフォルダーには、コアコンポーネントベースの編集可能なテンプレートがあります。

Experience Manager には、テンプレートを整理するためのグローバルフォルダーが用意されています。ただし、このフォルダーはデフォルトでは無効になっています。グローバルフォルダーを有効にするように管理者に依頼することも、テンプレート用のフォルダーを作成することもできます。フォルダーの作成方法について詳しくは、「テンプレートフォルダー」を参照してください。

テンプレートの作成 create-template

フォルダーの作成後、フォルダーを開いて以下の手順を実行し、テンプレートを作成します。

  1. 作成したフォルダー内で「作成」を選択します。

  2. テンプレートタイプを選択」セクションで、「アダプティブフォーム(コアコンポーネント)テンプレート」を選択し、「次へ」を選択します。

  3. テンプレート詳細」セクションで、テンプレートのタイトル ​を指定し、「作成」を選択します。
    説明を入力することもできます。

  4. 完了」を選択してコンソールに戻るか、「開く」を選択してテンプレートをエディターで開きます。

テンプレートエディター UI template-editor-ui

編集対象のテンプレートを開くと、以下の AEM エディターコンポーネントが表示されます。

  • ページツールバー
    以下のオプションが含まれています。

    • サイドパネルを切り替え:サイドバーの表示と非表示を切り替えることができます。
    • ページ情報:公開/非公開の時間、サムネール、クライアントサイドライブラリ、ページポリシー、ページデザインのクライアントサイドライブラリなどの情報を指定できます。
    • モードセレクター:モードを変更できます。構造 ​モード、初期コンテンツレイアウト制御 ​モードを選択できます。構造モードを使用すると、ヘッダーとフッターを追加してカスタマイズできます。初期コンテンツモードを使用すると、フォームコンテンツをカスタマイズできます。
    • プレビュー:テンプレート公開時の外観をプレビューできます。「レイヤーセレクター」と「プレビュー」を使用して、編集モードとプレビューモードを切り替えることができます。
  • サイドバー:コンテンツブラウザー、プロパティブラウザー、アセットブラウザー、コンポーネントブラウザーを提供します。

  • コンポーネントツールバー:コンポーネントを選択すると、コンポーネントをカスタマイズできるツールバーが表示されます。

  • ページ:コンテンツを追加してテンプレートを作成する領域です。

テンプレートの編集 editing-a-template

テンプレートの適切な側面を選択および編集する各種のモードは、次のとおりです。

画面の右上隅の「プレビュー」オプションの横にあるレイヤーセレクターを使用します。

構造 structure

テンプレートエディターで構造レイヤーを選択すると、テンプレートに関連付けられたアダプティブフォームを作成する際に、変更できないコンテンツを事前定義するのに役立ちます。

構造レイヤー内のレイアウトコンテナ

構造レイヤー内のコンポーネントのロック/ロック解除 locking-unlocking-components-in-the-structure-layer

構造レイヤーを選択してテンプレートを編集する際は、テンプレートのヘッダーとフッターのロックを解除できます。テンプレート内のコンポーネントがロック解除されると、フォーム作成者はそのテンプレートを使用するアダプティブフォーム内のコンポーネントを編集できます。コンポーネントをロックすると、フォーム作成者はアダプティブフォーム内でそのコンポーネントを編集できなくなります。ロックオプションはコンポーネントツールバーにあります。

例えば、ヘッダーコンポーネントをテンプレートに追加するとします。コンポーネントを選択すると、コンポーネントツールバーにロックオプションが表示されます。通常、ヘッダーには会社名とロゴが含まれており、フォーム作成者がテンプレート内のロゴとヘッダーを変更できないようにする必要があります。ヘッダーコンポーネントをロックしたテンプレートを使用して作成したアダプティブフォームでは、フォーム作成者はロゴと会社名を変更できません。

NOTE
ヘッダーコンポーネント内の画像またはロゴを個々にロックまたはロック解除することはお勧めしません。ヘッダーコンポーネントはロック解除できます。

初期コンテンツ initial-content

「初期コンテンツ」オプションを選択すると、テンプレートのアダプティブフォームコンテナがアダプティブフォームと同様に開いて編集可能になります。事前定義済みのコンテンツを作成できます。コンテンツは、テンプレートに関連付けられたアダプティブフォームを作成する際に変更できます。アダプティブフォームを作成する場合と同様、テーマや送信アクションの選択などの初期設定を指定できます。

フォーム作成者はこれをベースにしてフォームを作成します。コンテンツのフロー構造は、テンプレートの初期コンテンツレイヤーで指定されます。フォームテンプレートの初期コンテンツの編集に切り替えるには、ページツールバーでプレビューを実行する前に、 canvas-drop-down 初期コンテンツ ​を選択します。

初期コンテンツレイヤーに追加されたヘッダーとフッター

初期コンテンツレイヤー内で、作成者がベースとして使用するアダプティブフォームテンプレートを作成します。テンプレートの作成はフォームの作成と同様です。サイドバーにあるオプションを使用します。サイドバーは、コンテンツブラウザー、プロパティブラウザー、アセットブラウザー、コンポーネントブラウザーを提供します。

NOTE
送信アクションとして「コンテンツを保存」または「PDF を保存」を選択すると、ストレージパスを指定するオプションを使用できます。テンプレートでパスを指定した場合、このテンプレートから作成されたすべてのフォームには同じパスが指定されます。正しいストレージパスを指定するか、またはフォーム作成者がストレージパスを更新してすべてのフォームのデータが同じ場所に保存されないようにします。

レイアウト layout

テンプレートを編集する際にレイアウトを定義できます。これには、標準のレスポンシブレイアウトが使用されます。このレイアウトを使用すると、デバイスの幅に基づいてコンポーネントの幅を管理し、レスポンシブなアダプティブフォームのデザインを容易にすることができます。

構造レイヤー内のレイアウトコンテナ

詳しくは、レスポンシブレイアウトについての記事を参照してください。

テンプレートの有効化 enabling-the-template

作成したテンプレートは、ドラフトとして追加されます。テンプレートを有効にして、アダプティブフォームの作成に使用できるようにします。テンプレートを有効にするには、以下の手順を実行します。

  1. Adobe Experience Managerツールテンプレート ​に移動して、テンプレートの作成先のフォルダーを開きます。
    作成したテンプレートは、ドラフトとしてマークされます。
  2. テンプレートを選択して、ツールバーで「有効」を選択します。
    アダプティブフォームの作成時に、テンプレートの選択を求められる際にこのテンプレートがリストに表示されるようになります。

テンプレートの読み込みまたは書き出し importing-or-exporting-a-template

フォームは、テンプレートと連携しています。カスタマイズしたテンプレートを使用して作成したアダプティブフォームをダウンロードする場合、テンプレートはダウンロードされません。別の AEM Forms インスタンス上のフォームを読み込む場合は、テンプレートなしで読み込まれます。フォームが読み込まれてもテンプレートを使用できない場合、フォームはレンダリングされません。/conf にある https://<server>:<port>/crx/packmgr ノードからカスタムテンプレートをパッケージ化し、フォームをアップロードする AEM Forms インスタンスに移植できます。また、AEM アーキタイプを使用してテンプレートを作成し、Cloud Services インスタンスにデプロイすることもできます。

NOTE

フォームデータモデルスキーマのテンプレートへの関連付け associating-form-data-model-schema-in-template

作成者はテンプレートエディターで、フォームデータモデルスキーマをアダプティブフォームテンプレートに関連付けることができます。作成者は、スキーマをテンプレートエディターから選択できます。 スキーマをテンプレートに関連付け、フォーム作成者がそのテンプレートに基づいてフォームを作成すると、フォームのスキーマが事前に選択されます。フォーム作成者がスキーマの使用を規制し、フォーム作成者の時間も節約できます。テンプレートエディターでフォームデータモデルスキーマを選択するには、次の手順に従います。

  1. 左側にある​ コンテンツブラウザー ​を選択します。
  2. フォームコンテナの「設定」に移動します。
  3. データモデル ​を選択します。
  4. からフォームデータモデル(FDM)を選択する フォームデータモデルを選択 設定を保存します。

Form-Data-Model-Association-in-Forms

テンプレートポリシーを使用してアダプティブフォームコンポーネントにカスタムプロパティを追加

カスタムプロパティを使用すると、フォームテンプレートを使用してカスタム属性(キーと値のペア)をアダプティブフォームのコアコンポーネントに関連付けることができます。カスタムプロパティは、コンポーネントのヘッドレスレンディションの「プロパティ」セクションに反映されます。これにより、カスタム属性値に基づいて適応する動的なフォーム動作を作成できます。例えば、開発者は、モバイル、デスクトップ、web プラットフォーム上にヘッドレスフォームコンポーネントの様々なレンディションをデザインできるので、幅広いデバイスでのユーザーエクスペリエンスが大幅に向上します。

アダプティブフォームのコアコンポーネントフィールドにカスタムプロパティを追加する手順は次のとおりです。

テンプレートエディターのポリシーでカスタムグループ名を追加 add-a-custom-group-name

  1. Adobe Experience Managerツール一般テンプレート ​に移動します。
  2. コアコンポーネントに基づいてテンプレートを選択し、編集モードで開きます。
  3. カスタムプロパティの定義が必要なアダプティブフォームコアコンポーネントフィールドの「ポリシー ポリシー アイコンをクリックします。アダプティブフォームフィールド ​ダイアログが表示されます。
  4. カスタムプロパティ」タブを選択します。
  5. ポリシー」セクションの下で​ ポリシーのタイトル ​を指定します。
  6. グループ名 ​を指定し、特定のグループに関連付けられたキーと値のペアを追加します。グループ名は、コンポーネントの編集ダイアログでフォーム作成者に表示されます。グループ名を選択した場合、関連付けられているすべてのキーと値のペアが 1 つのコンポーネントに適用されます。
  7. [完了]」をクリックします。

テンプレートエディターでカスタムプロパティグループ名を追加

テンプレートポリシーを使用して 1 つ以上のカスタムプロパティグループを追加する場合、「詳細」タブは、対応するコアコンポーネントの編集ダイアログに表示されます。

コアコンポーネントの編集ダイアログでカスタムグループ名を選択 select-a-custom-group-name

  1. アダプティブフォームを編集モードで開きます。
  2. テンプレートエディターでカスタムプロパティを定義したコンポーネントを選択し、 settings_icon を選択してコンポーネントの編集ダイアログを開きます。
  3. 詳細」タブを選択します。
  4. カスタムプロパティの選択 ​ドロップダウンからカスタムプロパティグループ名を選択します。定義済みのすべてのカスタムグループ名が、ドロップダウンリストに自動的に入力されます。
  5. 完了」を選択して、プロパティを保存します。

カスタムプロパティグループ名を選択

NOTE
  • 追加のカスタムプロパティ」チェックボックスを使用すると、テンプレートポリシーで提供されるプロパティに加えて、コンポーネント固有のカスタムプロパティを動的に追加できます。キー名の値が一致する場合、特定のコンポーネントのカスタムプロパティは、テンプレートポリシーで設定されたカスタムプロパティよりも優先されます。

テンプレートを使用したアダプティブフォームの作成 creating-an-adaptive-form-using-the-template

テンプレートを作成して有効にすると、アダプティブフォームを作成する際に Forms Manager でそのテンプレートを使用できます。テンプレートを使用したアダプティブフォームの作成方法については、コアコンポーネントに基づいたアダプティブフォームの作成を参照してください。

ベストプラクティス best-practices

  • コアコンポーネントに基づくコンポーネント(アダプティブフォームテキスト、アダプティブフォームコンテナなど)を使用して、テンプレートを作成します。アダプティブフォームコアコンポーネントの情報を入手するには、 ここをクリックします。
  • Web サイトで使用できる基本的に異なるフォームタイプに一致するテンプレートの数を制限する
  • テンプレートで使用されているカスタムコンポーネントに必要な柔軟性および設定機能を提供する。

関連トピック see-also

recommendation-more-help
fbcff2a9-b6fe-4574-b04a-21e75df764ab