テンプレートエディター UI
編集対象のテンプレートを開くと、以下の AEM エディターコンポーネントが表示されます。
-
ページツールバー
以下のオプションが含まれています。-
サイドパネルを切り替え:サイドバーの表示と非表示を切り替えます。
-
ページ情報:公開/非公開の時間、サムネール、クライアントサイドライブラリ、ページポリシー、ページデザインのクライアントサイドライブラリなどの情報を指定できます。
-
エミュレーター:異なるデバイスの外観をシミュレートしてカスタマイズできます。
-
レイヤーセレクター: レイヤーを変更できます。構造 レイヤーまたは 初期コンテンツ レイヤーを選択できます。構造レイヤーを使用すると、ヘッダーとフッターを追加してカスタマイズできます。初期コンテンツレイヤーを使用すると、フォームコンテンツをカスタマイズできます。
-
プレビュー:テンプレート公開時の外観をプレビューできます。「レイヤーセレクター」と「プレビュー」を使用して、編集モードとプレビューモードを切り替えることができます。
-
-
サイドバー:コンテンツブラウザー、プロパティブラウザー、アセットブラウザー、コンポーネントブラウザーを提供します。
-
コンポーネントツールバー:コンポーネントを選択すると、コンポーネントをカスタマイズできるツールバーが表示されます。
-
ページ:コンテンツを追加してテンプレートを作成する領域です。
- 構造
- 初期コンテンツ
画面の右上隅の「プレビュー」オプションの横にあるレイヤーセレクターを使用します。
構造
テンプレートエディターで構造レイヤーを選択すると、アダプティブフォームコンテナの上および下にレイアウトコンテナを表示できます。作成者はこれらのレイアウトコンテナをヘッダーとフッターに使用できます。ヘッダーとフッターは追加、編集、カスタマイズできます。テンプレートのヘッダーをカスタマイズするには、アダプティブフォームコンテナの上にあるレイアウトコンテナにアダプティブフォームのヘッダーコンポーネントをドラッグ&ドロップします。テンプレートのフッターをカスタマイズするには、アダプティブフォームコンテナの下にあるレイアウトコンテナにアダプティブフォームのフッターコンポーネントをドラッグ&ドロップします。
構造レイヤー内のレイアウトコンテナ
A. ヘッダーコンポーネントのレイアウトコンテナ B. フッターコンポーネントのレイアウトコンテナ
アダプティブフォームコンテナの上にあるレイアウトコンテナにアダプティブフォームのヘッダーコンポーネントをドラッグ&ドロップします。コンポーネントを追加したら、プロパティを指定し、ロゴを追加してそのタイトルを指定できます。
同様に、アダプティブフォームコンテナの下にあるレイアウトコンテナにフッターコンポーネントをドラッグ&ドロップすると、著作権情報や会社の詳細を指定できます。
構造レイヤーに追加されたヘッダーとフッター
構造レイヤー内のコンポーネントのロック/ロック解除
構造レイヤーを選択してテンプレートを編集する際は、テンプレートのヘッダーとフッターのロックを解除できます。テンプレート内のコンポーネントがロック解除されると、フォーム作成者はそのテンプレートを使用するアダプティブフォーム内のコンポーネントを編集できます。コンポーネントをロックすると、フォーム作成者はアダプティブフォーム内でそのコンポーネントを編集できなくなります。ロックオプションはコンポーネントツールバーにあります。
例えば、ヘッダーコンポーネントをテンプレートに追加するとします。コンポーネントを選択すると、コンポーネントツールバーにロックオプションが表示されます。通常、ヘッダーには会社名とロゴが含まれており、フォーム作成者がテンプレート内のロゴとヘッダーを変更できないようにする必要があります。ヘッダーコンポーネントをロックしたテンプレートを使用して作成したアダプティブフォームでは、フォーム作成者はロゴと会社名を変更できません。
初期コンテンツ
「初期コンテンツ」オプションを選択すると、テンプレートのアダプティブフォームコンテナがアダプティブフォームと同様に開いて編集可能になります。アダプティブフォームを作成する場合と同様、テーマや送信アクションの選択などの初期設定を指定できます。
フォーム作成者はこれをベースにしてフォームを作成します。コンテンツのフロー構造は、テンプレートの初期コンテンツレイヤーで指定されます。フォームテンプレートの初期コンテンツの編集に切り替えるには、ページツールバーでプレビューを実行する前に、
/初期コンテンツ を選択します。
テンプレートエディター内の初期コンテンツレイヤー(プロパティを指定するために選択したアダプティブフォームコンテナを表示)。
初期コンテンツレイヤー内で、作成者がベースとして使用するアダプティブフォームテンプレートを作成します。テンプレートの作成はフォームの作成と同様です。サイドバーにあるオプションを使用します。サイドバーは、コンテンツブラウザー、プロパティブラウザー、アセットブラウザー、コンポーネントブラウザーを提供します。
サイドバーを参照してください。
タブとパネルを使用したアダプティブフォームテンプレートの作成
例えば、以下のタブを使用してテンプレートを作成するとします。
- 一般情報
- 職業情報
ロゴを追加し、タイトルを指定して、構造レイヤーにフッターを追加しています。ヘッダーとフッターをロックし、フォーム作成者がテンプレートを使用してフォームを作成する際にヘッダーとフッターが編集されないようにします。
レイヤーを構造から初期コンテンツに変更し、コンテンツをフォームに追加します。タブ付きの構造を作成するには、アダプティブフォームコンテナの guideRootPanel に子パネルを追加します。パネルを追加するには、以下の手順を実行します。
-
「コンポーネントをここにドラッグ」オプションを選択する際に + ボタンをタップすることで、パネルを追加できます。
-
パネルコンポーネントは、サイドバーのコンポーネントブラウザーからドラッグ&ドロップできます。
-
コンポーネントツールバーから
guideRootPanel
の子パネルを追加できます。
「一般情報」および「職業情報」タブを作成するには、2 つのパネルを guideRootPanel
の子パネルに追加します。パネルを選択して
を選択し、サイドバーでプロパティを開きます。要素名を general-info
および professional-info
に変更し、タイトルを「一般情報」および「職業情報」にそれぞれ変更します。サイドバーでコンテンツを選択し、コンテンツブラウザーを開きます。「フォームオブジェクト」タブで、guideRootPanel
を選択します。エディターで guideRootPanel が選択されます。コンポーネントツールバーで
を選択し、プロパティを開きます。パネルレイアウトフィールドで、「上部のタブ」を選択し、「完了」を選択します。タブ付きのテンプレート構造が適用されます。
タブへのコンテンツの追加
パネルを追加してタブとして構造化したら、タブ内にフィールドを追加できます。エディターでタブを選択すると、「コンポーネントをここにドラッグ」オプションが表示されます。テキストボックス、リスト項目、ボタンなどのコンポーネントをドラッグ&ドロップできます。コンポーネントは、サイドバーのコンポーネントブラウザーからドラッグ&ドロップできます。
各コンポーネントには、データの取得と操作を強化するプロパティが存在します。例えば、コンポーネントの「必須フィールド」プロパティを有効にできます。作成者は、顧客が必須フィールドの入力をスキップした場合に表示されるメッセージを指定できます。「必須フィールドメッセージ」プロパティにメッセージを指定します。
名前、電話番号、生年月日フィールドが例のテンプレートの「一般情報」タブに追加されます。現在の職業、雇用タイプ、学歴フィールドが「職業情報」タブに追加されます。
フィールドを追加したら、「送信」、「リセット」などのボタンを追加できます。
テンプレートの有効化
作成したテンプレートは、ドラフトとして追加されます。テンプレートを有効化して、アダプティブフォームの作成に使用できるようにします。テンプレートを有効にするには:
-
Adobe Experience Manager/ツール/テンプレート に移動して、テンプレートの作成先のフォルダーを開きます。
-
作成したテンプレートは、ドラフトとしてマークされます。
-
テンプレートを選択し、ツールバーで「有効」を選択します。
アダプティブフォームの作成時にテンプレートの選択を求められる際、このテンプレートがリストに表示されるようになります。
テンプレートの読み込みまたは書き出し
フォームは、テンプレートと連携しています。カスタマイズしたテンプレートを使用して作成したアダプティブフォームをダウンロードする場合、テンプレートはダウンロードされません。別の AEM Forms インスタンス上のフォームを読み込む場合は、テンプレートなしで読み込まれます。フォームが読み込まれてもテンプレートを使用できない場合、フォームはレンダリングされません。https://<server>:<port>/crx/packmgr
にある /conf
ノードからカスタムテンプレートをパッケージ化し、フォームをアップロードする AEM Forms インスタンスに移植できます。
テンプレートを使用したアダプティブフォームの作成
テンプレートを作成して有効にすると、Forms Manager でアダプティブフォームを作成するときにそのテンプレートを使用できます。テンプレートを使用したアダプティブフォームの作成方法について詳しくは、アダプティブフォームの作成を参照してください。
標準テンプレートの表示オプションの変更
アダプティブフォームのカスタムテンプレートを作成して、基本構造と初期コンテンツを定義できます。AEM Forms には、アダプティブフォーム用の一連の標準テンプレートも用意されています。テンプレートの表示/非表示を選択できます。
テンプレートを表示または非表示にするには次の手順を実行します。
-
AEM Forms オーサーインスタンスにログインし、ツール/操作/Web コンソール に移動します。
NOTEAEM Web コンソールの URL は、https://'[server]:[port]'/system/console/configMgr です。 -
FormsManager 設定 を探して開きます。
- アダプティブフォームの初期設定済みテンプレートを表示または非表示にするには、「AF および AD の初期設定済みテンプレートを含める」オプションをオンまたはオフにします。
- AEM 6.0 Forms または AEM 6.1 Forms リリースで追加され、現在非推奨になっているアダプティブフォームの初期設定済みテンプレートを表示または非表示にするには、「AEM 6.0 の AF テンプレートを含める」オプションをオンまたはオフにします。このオプションをオンにした場合、これを有効にするには、「AF および AD の標準テンプレートを含める」の設定を有効にする必要があります。
-
「保存」をクリックします。標準テンプレートの表示オプションが変更されます。
レコメンデーション
- テンプレートエディターでフォームのプロパティを変更する際は、BindReference プロパティを使用しないようにしてください。
- ブレークポイントを追加する場合は、アダプティブフォームテンプレートの作成時にブレークポイントを作成します。
ブレークポイントについて詳しくは、「レスポンシブレイアウト」を参照してください。