ドキュメントAEM 6.4Forms ガイド

カスタムアダプティブフォームのテンプレートの作成 creating-a-custom-adaptive-form-template

Last update: Thu May 04 2023 00:00:00 GMT+0000 (Coordinated Universal Time)

作成対象：

  • User
CAUTION
AEM 6.4 の拡張サポートは終了し、このドキュメントは更新されなくなりました。 詳細は、 技術サポート期間. サポートされているバージョンを見つける ここ.

前提条件 prerequisites

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

アダプティブフォームテンプレートは、アダプティブフォームの作成に使用される特定のプロパティとコンテンツ構造を持つ特殊な AEM ページテンプレートです。このテンプレートのレイアウト、スタイル、基本的な初期コンテンツ構造は事前に設定されています。

フォームを作成すると、オリジナルテンプレートのコンテンツ構造が変更された場合でも、フォームには反映されません。

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

AEM QuickStart は、次のアダプティブフォームテンプレートを提供します。

  • 基本：タブが左側にあるレイアウトを使用して複数タブのアダプティブフォームを作成し、任意の順序でタブにアクセスできます。
  • Acrobat Signの基本：複数のタブとウィザードを含むフォームを作成できます。 タブが左側にあるレイアウトを使用して、任意の順序でタブにアクセスできます。 署名と検証には Adobe Document Cloud eSign サービスを使用します。
  • 空のテンプレート：ヘッダー、フッター、初期コンテンツを含まないフォームを作成できます。 テキストボックス、ボタン、画像などのコンポーネントを追加できます。 空白テンプレートでは、AEM サイトページに埋め込むことができるフォームを作成します。

これらのテンプレートでは、sling:resourceType プロパティが、対応するページのコンポーネントに設定されています。ページコンポーネントは、アダプティブフォームコンテナを含む CQ ページをレンダリングし、アダプティブフォームをレンダリングします。

次の表は、テンプレートとページコンポーネントの間の関連を列挙します。

テンプレート
ページコンポーネント
/libs/fd/af/templates/surveyTemplate
/libs/fd/af/components/page/survey
/libs/fd/af/templates/simpleEnrollmentTemplate
/libs/fd/af/components/page/base
/libs/fd/af/templates/tabbedEnrollmentTemplate
/libs/fd/af/components/page/tabbedenrollment
/libs/fd/afaddon/templates/advancedEnrollmentTemplate
/libs/fd/afaddon/components/page/advancedenrollment

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

テンプレートエディターを使用して、アダプティブフォームの構造と初期コンテンツを指定できます。例えば、すべてのフォーム作成者が、登録フォーム内にテキストボックス、ナビゲーションボタン、送信ボタンをいくつか持つようにします。 作成者が他の登録フォームと一貫性のあるフォームを作成できるテンプレートを作成できます。 AEM Template Editor では、次のことができます。

  • 構造レイヤーにフォームのヘッダーおよびフッターコンポーネントを追加する
  • フォームの初期コンテンツを提供できます。
  • テーマを指定できます。
  • 送信、リセット、移動などの操作を指定できます。

詳しくは、テンプレートエディターを参照してください。

CRXDE からのアダプティブフォームテンプレートの作成 creating-an-adaptive-form-template-from-crxde

使用可能なテンプレートを使用する代わりに、テンプレートを作成してアダプティブフォームを作成することができます。 カスタムテンプレートは、アダプティブフォームのコンテナやページ要素（ヘッダーやフッターなど）を参照する様々なページコンポーネントに基づいています。

これらのコンポーネントは Web サイト向けの基本ページコンポーネントを使用して作成することができます。または、あらかじめ用意されたテンプレートで使用されるアダプティブフォームのページコンポーネントを拡張することもできます。

simpleEnrollmentTemplate などのカスタムテンプレートを作成するには、次の手順を実行します。

  1. オーサーインスタンスで CRXDE Lite に移動します。

  2. /apps ディレクトリの下に、アプリケーションのフォルダー構造を作成します。 例えば、アプリケーション名が mycompany の場合は、この名前のフォルダーを作成します。 通常、アプリケーションフォルダーには、components、configuration、templates、src および installation ディレクトリが含まれます。 この例では、components、configuration、templates の各フォルダーを作成します。

  3. /libs/fd/af/templates フォルダーに移動します。

  4. simpleEnrollmentTemplate ノードをコピーします。

  5. /apps/mycompany/templates フォルダーに移動します。 右クリックし、「 」を選択します。 貼り付け.

  6. 必要に応じて、コピーしたテンプレートノードの名前を変更します。 例えば、enrollment-template などに変更します。

  7. /apps/mycompany/templates/enrollment-template に移動します。

  8. jcr:content ノードの jcr:title プロパティと jcr:description プロパティを変更し、コピー元のテンプレートと区別できるようにします。

  9. 変更したテンプレートの jcr:content ノードには、guideContainer と guideformtitle のコンポーネントが含まれます。guideContainer はアダプティブフォームを格納するコンテナです。guideformtitle コンポーネントは、アプリケーション名や説明などを表示します。

    guideformtitle の代わりに、カスタムコンポーネントまたは parsys コンポーネントを含めることができます。例えば、guideformtitle を削除して、カスタムコンポーネントまたは parsys コンポーネントのノードを含めることができます。コンポーネントの sling:resourceType プロパティの参照先が、そのコンポーネントになっていることを確認してください。ページ component.jsp ファイルでも同様に定義されます。

  10. /apps/mycompany/templates/enrollment-template/jcr:content に移動します。

  11. 「プロパティ」タブを開き、cq:designPath プロパティの値を /etc/designs/mycompany に変更します。

  12. 次に、cq:Page タイプに /etc/designs/mycompany のノードを作成します。

アダプティブフォームのページコンポーネントの作成 create-an-adaptive-form-page-component

テンプレートはページコンポーネント/libs/fd/af/components/page/base を参照するので、カスタムテンプレートはデフォルトテンプレートと同じスタイルを持ちます。 コンポーネントの参照は、/apps/mycompany/templates/enrollment-template/jcr:content ノードで定義された sling:resourceType プロパティで検索できます。ベースはコア製品のコンポーネントのため、変更を加えないでください。

  1. /apps/mycompany/templates/enrollment-template/jcr:content のノードに移動し、sling:resourceType プロパティの値を /apps/mycompany/components/page/enrollmentpage に変更します。

  2. /libs/fd/af/components/page/base のノードを /apps/mycompany/components/page フォルダーにコピーします。

  3. コピーしたコンポーネントの名前を enrollmentpage に変更します。

  4. （コンテンツページをすでに持っている場合に限ります） 自分の web サイトに contentpage コンポーネントがすでに存在する場合、次の手順（a-d）を実行します。自分の Web サイトに contentpage コンポーネントが存在しない場合は、resourceSuperType プロパティを OOTB の基本ページにポイントしたままにすることができます。

    1. enrollmentpage ノードの場合、sling:resourceSuperType プロパティの値を mycompany/components/page/contentpage に設定します。contentpage コンポーネントは、自分のサイトの基本ページコンポーネントです。他のページコンポーネントで拡張することができます。enrollmentpage の下で、head.jsp、content.jsp、library.jsp を除くスクリプトファイルを削除します。このケースでは contentpage である sling:resourceSuperType コンポーネントに、このようなスクリプトすべてが含まれます。ナビゲーションバーやフッターなどを含むヘッダー類は、contentpage コンポーネントから継承されます。

    2. head.jsp ファイルを開きます。

      この JSP ファイルには <cq.include script="library.jsp"/> 行が含まれます。

      library.jsp ファイルには、guide.theme.simpleEnrollment のクライアントライブラリが含まれ、その中にアダプティブフォームのスタイル設定が含まれています。

      enrollmentpage のページコンポーネントは専用の head.jsp ファイルがあり、contentpage コンポーネントの head.jsp ファイルをオーバーライドします。

    3. enrollmentpage コンポーネント用の head.jsp ファイルに、contentpage コンポーネント用の head.jsp ファイルのすべてのスクリプトを含めます。

    4. content.jsp スクリプトの中に、追加のページコンテンツまたはページがレンダリングされる際に含まれる他のコンポーネントへの参照を追加することができます。例えば、applicationformheader カスタムコンポーネントを追加する場合、JSP ファイルのコンポーネントに次の参照を追加します。

      <cq:include path="applicationformheader" resourceType="mycompany/components/applicationformheader"/>

      同様に、テンプレートのノード構造に parsys コンポーネントを追加する場合、カスタムコンポーネントも含めます。

アダプティブフォームのクライアントライブラリの作成 creating-an-adaptive-form-client-library

新しいテンプレート用の enrollmentpage コンポーネントの head.jsp ファイルには、guide.theme.simpleEnrollment クライアントライブラリが含まれます。デフォルトのテンプレートもこのクライアントライブラリを使用します。 次のいずれかの方法を使用して、新しいテンプレートのスタイルを変更します。

  • カスタムテーマを定義し、デフォルトのテーマ guide.theme.simpleEnrollment をカスタムテーマで置き換えます。
  • /etc/designs/mycompany の下に新しいクライアントライブラリを定義します。 JSP ページのデフォルトのテーマエントリの後にクライアントライブラリを含めます。 このクライアントライブラリに、オーバーライドされたすべてのスタイルと、追加の Java Script ファイルを含めます。
NOTE
アダプティブフォームのレンダリングに使用されるページコンポーネントに含まれるクライアントライブラリが、テーマによって参照されます。クライアントライブラリは、主にアダプティブフォームの外観を管理します。
recommendation-more-help
a6ebf046-2b8b-4543-bd46-42a0d77792da