Show Menu
トピック×

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

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 テンプレートエディターでは次のことが行えます。
  • 構造レイヤーでフォームのヘッダーおよびフッターコンポーネントを追加できます。
  • フォームの初期コンテンツを提供できます。
  • テーマを指定できます。
  • 送信、リセット、移動などの操作を指定できます。
For more informtion, see Template Editor .

CRXDE からのアダプティブフォームテンプレートの作成

あらかじめ用意されたテンプレートを使う代わりに、自分でテンプレートを作成してアダプティブフォームの作成に使用することもできます。カスタムテンプレートは、アダプティブフォームのコンテナのほか、ヘッダー、フッターなど、ページ要素を参照するさまざまなページコンポーネントに基づいています。
これらのコンポーネントは Web サイト向けの基本ページコンポーネントを使用して作成することができます。または、あらかじめ用意されたテンプレートで使用されるアダプティブフォームのページコンポーネントを拡張することもできます。
simpleEnrollmentTemplate などのカスタムテンプレートを作成するには、次の手順を実行します。
  1. 自分のオーサーインスタンスで CRXDE Lite に移動します。
  2. /apps ディレクトリの下に、自分のアプリケーションのフォルダー構造を作成します。例えば、アプリケーションの名前が mycompany の場合、その名前のフォルダーを作成します。通常、アプリケーションフォルダーには components、configuration、templates、src、installation のディレクトリが含まれます。この例では、components、configuration、templates の各フォルダーを作成します。
  3. /libs/fd/af/templates フォルダーに移動します。
  4. Copy the simpleEnrollmentTemplate node.
  5. /apps/mycompany/templates フォルダーに移動します。右クリックして「 貼り付け 」を選択します。
  6. 必要に応じて、コピーしたテンプレートノードの名前を変更します。例えば、enrollment-template などに変更します。
  7. /apps/mycompany/templates/enrollment-template に移動します。
  8. Modify the jcr:title and jcr:description properties for the jcr:content node to distinguish the template from the template you copied.
  9. The jcr:content node of the modified template contains the guideContainer and guideformtitle components. 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. Navigate to the node /apps/mycompany/templates/enrollment-template/jcr:content and modify the value of the property sling:resourceType to /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. For the enrollmentpage node, set value of the property sling:resourceSuperType to mycompany/components/page/contentpage. contentpage コンポーネントは、自分のサイトの基本ページコンポーネントです。他のページコンポーネントで拡張することができます。Remove script files under enrollmentpage , except head.jsp , content.jsp , and library.jsp . The sling:resourceSuperType component, which is contentpage in this case, includes all such scripts. ナビゲーションバーやフッターなどを含むヘッダー類は、 contentpage コンポーネントから継承されます。
    2. Open the file head.jsp .
      The JSP file contains the line <cq.include script="library.jsp"/> .
      library.jsp ファイルには、 guide.theme.simpleEnrollment のクライアントライブラリが含まれ、その中にアダプティブフォームのスタイル設定が含まれています。
      The page component enrollmentpage has an exclusive head.jsp file that overrides the head.jsp file of the contentpage component.
    3. Include all scripts in the head.jsp file for the contentpage component to the head.jsp file for the enrollmentpage component.
    4. content.jsp スクリプトの中に、追加のページコンテンツまたはページがレンダリングされる際に含まれる他のコンポーネントへの参照を追加することができます。例えば、 applicationformheader カスタムコンポーネントを追加する場合、JSP ファイルのコンポーネントに次の参照を追加します。
      <cq:include path="applicationformheader" resourceType="mycompany/components/applicationformheader"/>
      同様に、テンプレートのノード構造に parsys コンポーネントを追加する場合、カスタムコンポーネントも含めます。

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

The head.jsp file of the enrollmentpage component for the new template includes a client library guide.theme.simpleEnrollment . デフォルトのテンプレートは、このクライアントライブラリも使用します。これらの方法のいずれかを使用して、新しいテンプレートのスタイルを変更します。
  • カスタムテーマを定義し、デフォルトのテーマ guide.theme.simpleEnrollment をカスタムテーマで置き換えます。
  • /etc/designs/mycompany の下に新しいクライアントライブラリを定義します。JSP ページで、デフォルトのテーマのエントリの後にクライアントライブラリを含めます。このクライアントライブラリに、上書きされたすべてのスタイルと追加のJava scriptファイルを含めます。
アダプティブフォームのレンダリングに使用されるページコンポーネントに含まれるクライアントライブラリが、テーマによって参照されます。クライアントライブラリは、主にアダプティブフォームの外観を管理します。