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

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

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

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

ツールメニューからテンプレートエディターにアクセスするには、次の場所に移動します。 Adobe Experience Manager /ツール/テンプレート. テンプレートは、編集可能なテンプレートが有効になっているフォルダーで整理されています。AEMは、テンプレートを整理するためのグローバルフォルダーを提供します。 ただし、このフォルダーはデフォルトでは無効になっています。管理者に依頼してグローバルフォルダーを有効にするか、テンプレート用の新しいフォルダーを作成できます。 フォルダーの作成方法について詳しくは、テンプレートフォルダーを参照してください。

フォルダーをタップして開くと、アダプティブフォーム用のテンプレートを新規作成するための「作成」ボタンが表示されます。

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

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

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

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

タッチ UI エディターについて詳しくは、アダプティブフォームのオーサリングの概要を参照してください。

テンプレートの編集 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インスタンスにフォームを読み込むと、テンプレートなしで読み込まれます。 フォームが読み込まれてもテンプレートを使用できない場合、フォームはレンダリングされません。https://<server>:<port>/crx/packmgr にある /conf ノードからカスタムテンプレートをパッケージ化し、フォームをアップロードする AEM Forms インスタンスに移植できます。

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

テンプレートを作成して有効にすると、アダプティブフォームの作成時に Forms Manager で使用できるようになります。 テンプレートを使用してアダプティブフォームを作成するには、 アダプティブフォームの作成.

標準テンプレートの表示オプションを変更 change-display-option-of-out-of-the-box-templates

アダプティブフォームのカスタムテンプレートを作成して、基本的な構造と初期コンテンツを定義することができます。 AEM Formsには、アダプティブフォーム用のすぐに使用できるテンプレートも用意されています。 テンプレートの表示／非表示を選択できます。

テンプレートの表示と非表示を切り替えるには、次の手順を実行します。

推奨事項 recommendations