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

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

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

前提条件

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

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

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

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

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

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

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

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

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

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

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

構造 structure

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

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

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

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

初期コンテンツ initial-content

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

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

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

レイアウト layout

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

関連トピック see-also