アダプティブフォームテンプレートの作成

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

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

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

ソフトウェア配布ポータルから AEM Forms リファレンスコンテンツパッケージをダウンロードしてインストールし、参照テーマとテンプレートを環境に読み込むことができます。

テンプレートの操作

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

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

テンプレートの作成

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

1. 作成したフォルダー内で「作成」をタップします。

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

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

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

テンプレートエディター UI

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

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

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

• サイドバー：コンテンツブラウザー、プロパティブラウザー、アセットブラウザー、コンポーネントブラウザーを提供します。

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

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

テンプレートの編集

アダプティブフォームテンプレートは、2 つのレイヤーを使用して作成されます。

• 構造
• 初期コンテンツ

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

構造

テンプレートエディターで構造レイヤーを選択すると、アダプティブフォームコンテナの上および下にレイアウトコンテナを表示できます。作成者はこれらのレイアウトコンテナをヘッダーとフッターに使用できます。ヘッダーとフッターは追加、編集、カスタマイズできます。テンプレートのヘッダーをカスタマイズするには、アダプティブフォームコンテナの上にあるレイアウトコンテナにアダプティブフォームのヘッダーコンポーネントをドラッグ＆ドロップします。テンプレートのフッターをカスタマイズするには、アダプティブフォームコンテナの下にあるレイアウトコンテナにアダプティブフォームのフッターコンポーネントをドラッグ＆ドロップします。

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

A. ヘッダーコンポーネントのレイアウトコンテナ B. フッターコンポーネントのレイアウトコンテナ

アダプティブフォームコンテナの上にあるレイアウトコンテナにアダプティブフォームのヘッダーコンポーネントをドラッグ＆ドロップします。コンポーネントを追加したら、プロパティを指定し、ロゴを追加してそのタイトルを指定できます。

同様に、アダプティブフォームコンテナの下にあるレイアウトコンテナにフッターコンポーネントをドラッグ＆ドロップすると、著作権情報や会社の詳細を指定できます。

構造レイヤーに追加されたヘッダーとフッター

構造レイヤー内のコンポーネントのロック／ロック解除

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

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

初期コンテンツ

「初期コンテンツ」オプションを選択すると、テンプレートのアダプティブフォームコンテナがアダプティブフォームと同様に開いて編集可能になります。アダプティブフォームを作成する場合と同様、テーマや送信アクションの選択などの初期設定を指定できます。

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

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

タブとパネルを使用したアダプティブフォームテンプレートの作成

例えば、以下のタブを使用してテンプレートを作成するとします。

• 一般情報
• 職業情報

ロゴを追加し、タイトルを指定して、構造レイヤーにフッターを追加しています。ヘッダーとフッターをロックし、フォーム作成者がテンプレートを使用してフォームを作成する際にヘッダーとフッターが編集されないようにします。

レイヤーを構造から初期コンテンツに変更し、コンテンツをフォームに追加します。タブ付きの構造を作成するには、アダプティブフォームコンテナの guideRootPanel に子パネルを追加します。パネルを追加するには、以下の手順を実行します。

• 「コンポーネントをここにドラッグ」オプションを選択する際に + ボタンをタップすることで、パネルを追加できます。

• パネルコンポーネントは、サイドバーのコンポーネントブラウザーからドラッグ＆ドロップできます。

• コンポーネントツールバーから guideRootPanel の子パネルを追加できます。

「一般情報」および「職業情報」タブを作成するには、2 つのパネルを guideRootPanel の子パネルに追加します。パネルを選択して をタップし、サイドバーでプロパティを開きます。要素名を general-info および professional-info に変更し、タイトルを「一般情報」および「職業情報」にそれぞれ変更します。サイドバーでコンテンツをタップし、コンテンツブラウザーを開きます。「フォームオブジェクト」タブで、guideRootPanel を選択します。エディターで guideRootPanel が選択されます。コンポーネントツールバーで をタップし、プロパティを開きます。パネルレイアウトフィールドで、「上部のタブ」を選択し、「完了」をタップします。タブ付きのテンプレート構造が適用されます。

タブへのコンテンツの追加

パネルを追加してタブとして構造化したら、タブ内にフィールドを追加できます。エディターでタブを選択すると、「コンポーネントをここにドラッグ」オプションが表示されます。テキストボックス、リスト項目、ボタンなどのコンポーネントをドラッグ＆ドロップできます。コンポーネントは、サイドバーのコンポーネントブラウザーからドラッグ＆ドロップできます。

各コンポーネントには、データの取得と操作を強化するプロパティが存在します。例えば、コンポーネントの「必須フィールド」プロパティを有効にできます。作成者は、顧客が必須フィールドの入力をスキップした場合に表示されるメッセージを指定できます。「必須フィールドメッセージ」プロパティにメッセージを指定します。

名前、電話番号、生年月日フィールドが例のテンプレートの「一般情報」タブに追加されます。現在の職業、雇用タイプ、学歴フィールドが「職業情報」タブに追加されます。

フィールドを追加したら、「送信」、「リセット」などのボタンを追加できます。

テンプレートの有効化

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

1. Adobe Experience Manager／ツール／テンプレート​に移動して、テンプレートの作成先のフォルダーを開きます。

2. 作成したテンプレートは、ドラフトとしてマークされます。

3. テンプレートを選択して、ツールバーで「有効」をタップします。アダプティブフォームの作成時に、テンプレートの選択を求められる際にこのテンプレートがリストに表示されるようになります。

テンプレートの読み込みまたは書き出し

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

フォームデータモデルスキーマのテンプレートへの関連付け

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

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

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

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

アダプティブフォームをテンプレートとして保存

アダプティブフォームをテンプレートとして保存し、後で使用することもできます。 アダプティブフォームをテンプレートとして保存するには、次の手順に従います。

1. アダプティブフォームを選択し、テンプレートとして保存します。

2. 「テンプレートとして保存」をクリックします。ダイアログボックスが表示されます。

3. テンプレートの「タイトル」（必須フィールド）、「場所」（必須フィールド）と「説明」（オプションのフィールド）を指定します。

4. 「作成」をクリックします。

   

推奨事項

• テンプレートエディターでフォームのプロパティを変更する際は、BindReference プロパティを使用しないようにしてください。
• ブレークポイントを追加する場合は、アダプティブフォームテンプレートの作成時にブレークポイントを作成します。ブレークポイントについて詳しくは、「レスポンシブレイアウト」を参照してください。

Business.Adobe.com リソース