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

メモ

AEM Forms に、動的なテンプレートが導入されました。AEM サイトのテンプレートエディターを使用して、動的なテンプレートの作成や編集を行うことができます。この記事で説明するテンプレートは、静的なテンプレートです。デフォルトのインストール環境で静的なテンプレートを使用することはできません。互換性 パッケージをインストールして、お使いの環境にこれらのテンプレートを取得します。

前提条件

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

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

フォームを作成すると、元のテンプレートのコンテンツ構造に対する変更はフォームに反映されません。

デフォルトのアダプティブフォームテンプレート

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

  • 調査テンプレート:複数の列が設定されたレスポンシブレイアウトを使用して、単一ページのアダプティブフォームを作成できます。 フォームを表示させる画面サイズに基づいてレイアウトは自動で調整されます。
  • シンプルな登録テンプレート:ウィザードのレイアウトを使用して複数手順のアダプティブフォームを作成できます。 このレイアウトでは、各手順の完了に必要な式を指定できます。指定した式は、次の手順にウィザードを進める前に検証されます。
  • タブ付き登録テンプレート:タブが左側にあるレイアウトを使用して複数タブのアダプティブフォームを作成し、任意の順序でタブにアクセスできるようにします。
  • 高度な登録テンプレート:複数のタブとウィザードを使用してフォームを作成します。タブが左側にあるレイアウトを使用し、任意の順序でタブにアクセスできるようにします。署名と検証には 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

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

テンプレートエディターを使用して、アダプティブフォームの構造と初期コンテンツを指定できます。 例えば、すべての作成者が、登録フォーム内でテキストボックスを少なくし、ナビゲーションボタンと送信ボタンを設置するようにできます。作成者が他の登録フォームと統一のとれたフォームを作成できるようにするためのテンプレートを作成できます。AEM テンプレートエディターでは次のことが行えます。

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

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

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ノードには、guideContainerguideformtitleのコンポーネントが含まれています。 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 のノードを作成します。

アダプティブフォームのページコンポーネントの作成

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

  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サイトの既存の コンポーネントがある場合は、次の手順(a ~ d)を contentpage実行します。自分の Web サイトに contentpage コンポーネントが存在しない場合は、resourceSuperType プロパティを OOTB の基本ページにポイントしたままにすることができます。

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

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

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

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

      ページコンポーネントenrollmentpageには排他的なhead.jspファイルがあり、このファイルはcontentpageコンポーネントのhead.jspファイルを上書きします。

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

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

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

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

アダプティブフォームのクライアントライブラリの作成

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

  • カスタムテーマを定義し、デフォルトのテーマ guide.theme.simpleEnrollment をカスタムテーマで置き換えます。
  • /etc/designs/mycompany の下に新しいクライアントライブラリを定義します。JSP ページで、デフォルトのテーマのエントリの後にクライアントライブラリを含めます。このクライアントライブラリに、上書きされたすべてのスタイルと追加のJava Scriptファイルを含めます。
メモ

アダプティブフォームのレンダリングに使用されるページコンポーネントに含まれるクライアントライブラリが、テーマによって参照されます。クライアントライブラリは、主にアダプティブフォームの外観を管理します。

このページ

Adobe Maker Awards Banner

Time to shine!

Apply now for the 2021 Adobe Experience Maker Awards.

Apply now
Adobe Maker Awards Banner

Time to shine!

Apply now for the 2021 Adobe Experience Maker Awards.

Apply now