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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

構造 structure

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

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

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

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

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

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

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

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

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

初期コンテンツ initial-content

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

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

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

タブとパネルを使用したアダプティブフォームテンプレートの作成 creating-an-adaptive-form-template-with-tabs-and-panels-nbsp

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

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

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

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

タブへのコンテンツの追加 adding-content-in-tabs

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

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

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

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

テンプレートの有効化 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

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

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

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

アダプティブフォームをテンプレートとして保存 saving-adaptive-form-as-template

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

レコメンデーション recommendations

関連トピック see-also