AEM Formsでは、動的テンプレートが導入されました。 AEM Sitesテンプレートエディターを使用して、 動的テンプレートの作成または編集. この記事で説明するテンプレートは、静的テンプレートです。 これらは、デフォルトのインストールでは使用できません。 互換性パッケージをインストールすると、静的なテンプレートを入手することができます。
AEM ページテンプレートおよびアダプティブフォームオーサリングに関する知識
AEMについて クライアント側ライブラリ
アダプティブフォームテンプレートは、アダプティブフォームの作成に使用される特定のプロパティとコンテンツ構造を持つ特殊な AEM ページテンプレートです。このテンプレートには、レイアウト、スタイルおよび基本的な初期コンテンツ構造が事前に設定されています。
フォームを作成すると、オリジナルテンプレートのコンテンツ構造が変更された場合でも、フォームには反映されません。
AEM QuickStart は、次のアダプティブフォームテンプレートを提供します。
これらのテンプレートでは、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 Template Editor では、次のことが可能です。
詳しくは、テンプレートエディターを参照してください。
使用可能なテンプレートを使用する代わりに、テンプレートを作成してアダプティブフォームを作成することができます。 カスタムテンプレートは、アダプティブフォームのコンテナやページ要素(ヘッダーやフッターなど)を参照する様々なページコンポーネントに基づいています。
これらのコンポーネントは Web サイト向けの基本ページコンポーネントを使用して作成することができます。または、あらかじめ用意されたテンプレートで使用されるアダプティブフォームのページコンポーネントを拡張することもできます。
simpleEnrollmentTemplate などのカスタムテンプレートを作成するには、次の手順を実行します。
オーサーインスタンスで CRXDE Lite に移動します。
/apps ディレクトリの下に、アプリケーションのフォルダー構造を作成します。 例えば、アプリケーション名が mycompany の場合は、この名前のフォルダーを作成します。 通常、アプリケーションフォルダーには、components、configuration、templates、src および installation ディレクトリが含まれます。 この例では、components、configuration、templates の各フォルダーを作成します。
/libs/fd/af/templates フォルダーに移動します。
simpleEnrollmentTemplate
ノードをコピーします。
/apps/mycompany/templates フォルダーに移動します。 右クリックし、「 」を選択します。 貼り付け.
必要に応じて、コピーしたテンプレートノードの名前を変更します。 例えば、enrollment-template などに変更します。
/apps/mycompany/templates/enrollment-template に移動します。
jcr:content
ノードの jcr:title
プロパティと jcr:description
プロパティを変更し、コピー元のテンプレートと区別できるようにします。
変更したテンプレートの jcr:content
ノードには、guideContainer
と guideformtitle
のコンポーネントが含まれます。guideContainer
はアダプティブフォームを格納するコンテナです。guideformtitle
コンポーネントは、アプリケーション名や説明などを表示します。
guideformtitle
の代わりに、カスタムコンポーネントまたは parsys
コンポーネントを含めることができます。例えば、guideformtitle
を削除して、カスタムコンポーネントまたは parsys
コンポーネントのノードを含めることができます。コンポーネントの sling:resourceType
プロパティの参照先が、そのコンポーネントになっていることを確認してください。ページ component.jsp
ファイルでも同様に定義されます。
/apps/mycompany/templates/enrollment-template/jcr:content に移動します。
「プロパティ」タブを開き、cq:designPath
プロパティの値を /etc/designs/mycompany に変更します。
次に、cq:Page
タイプに /etc/designs/mycompany のノードを作成します。
テンプレートはページコンポーネント/libs/fd/af/components/page/base を参照するので、カスタムテンプレートはデフォルトテンプレートと同じスタイルを持ちます。 コンポーネントの参照は、/apps/mycompany/templates/enrollment-template/jcr:content ノードで定義された sling:resourceType
プロパティで検索できます。ベースはコア製品のコンポーネントのため、変更を加えないでください。
/apps/mycompany/templates/enrollment-template/jcr:content のノードに移動し、sling:resourceType
プロパティの値を /apps/mycompany/components/page/enrollmentpage に変更します。
/libs/fd/af/components/page/base のノードを /apps/mycompany/components/page フォルダーにコピーします。
コピーしたコンポーネントの名前を enrollmentpage
に変更します。
(コンテンツページをすでに持っている場合に限ります) 自分の web サイトに contentpage
コンポーネントがすでに存在する場合、次の手順(a-d)を実行します。自分の Web サイトに contentpage
コンポーネントが存在しない場合は、resourceSuperType
プロパティを OOTB の基本ページにポイントしたままにすることができます。
enrollmentpage
ノードの場合、sling:resourceSuperType
プロパティの値を mycompany/components/page/contentpage に設定します。contentpage
コンポーネントは、自分のサイトの基本ページコンポーネントです。他のページコンポーネントで拡張することができます。enrollmentpage
の下で、head.jsp
、content.jsp
、library.jsp
を除くスクリプトファイルを削除します。このケースでは contentpage
である sling:resourceSuperType
コンポーネントに、このようなスクリプトすべてが含まれます。ナビゲーションバーやフッターなどを含むヘッダー類は、contentpage
コンポーネントから継承されます。
head.jsp
ファイルを開きます。
この JSP ファイルには <cq.include script="library.jsp"/>
行が含まれます。
library.jsp
ファイルには、guide.theme.simpleEnrollment
のクライアントライブラリが含まれ、その中にアダプティブフォームのスタイル設定が含まれています。
enrollmentpage
のページコンポーネントは専用の head.jsp
ファイルがあり、contentpage
コンポーネントの head.jsp
ファイルをオーバーライドします。
enrollmentpage
コンポーネント用の head.jsp
ファイルに、contentpage
コンポーネント用の head.jsp
ファイルのすべてのスクリプトを含めます。
content.jsp
スクリプトの中に、追加のページコンテンツまたはページがレンダリングされる際に含まれる他のコンポーネントへの参照を追加することができます。例えば、applicationformheader
カスタムコンポーネントを追加する場合、JSP ファイルのコンポーネントに次の参照を追加します。
<cq:include path="applicationformheader" resourceType="mycompany/components/applicationformheader"/>
同様に、テンプレートのノード構造に parsys
コンポーネントを追加する場合、カスタムコンポーネントも含めます。
新しいテンプレート用の enrollmentpage
コンポーネントの head.jsp
ファイルには、guide.theme.simpleEnrollment
クライアントライブラリが含まれます。デフォルトのテンプレートも、このクライアントライブラリを使用します。 次のいずれかの方法を使用して、新しいテンプレートのスタイルを変更します。
guide.theme.simpleEnrollment
をカスタムテーマで置き換えます。アダプティブフォームのレンダリングに使用されるページコンポーネントに含まれるクライアントライブラリが、テーマによって参照されます。クライアントライブラリは、主にアダプティブフォームの外観を管理します。