自适应表单模板是专用的AEM页面模板,具有用于创建自适应表单的某些属性和内容结构。 模板具有预配置的布局、样式和基本的初始内容结构。
创建表单后,对原始模板内容结构的任何更改不会反映在表单中。
AEM快速入门提供以下自适应表单模板:
这些模板将sling:resourceType
属性设置为相应的页面组件。 页面组件呈现CQ页面,其中包含自适应表单容器,而自适应表单则呈现自适应表单。
下表枚举了模板与页面组件之间的关联:
模板 |
页面组件 |
/libs/fd/af/templates/surveyTemplate |
/libs/fd/af/components/page/调查 |
/libs/fd/af/templates/simpleEnrommentTemplate |
/libs/fd/af/components/page/base |
/libs/fd/af/templates/tabbedEnrommentTemplate |
/libs/fd/af/components/page/tabbedrent |
/libs/fd/afaddon/templates/advancedEnrommentTemplate |
/libs/fd/afaddon/components/page/advancedenrollment |
您可以使用模板编辑器指定自适应表单的结构和初始内容。 例如,您希望所有表单作者在登记表单中都有几个文本框、导航按钮和提交按钮。 您可以创建一个模板,作者可以使用该模板创建与其他登记表单一致的表单。 AEM模板编辑器允许您:
有关详细信息,请参阅模板编辑器。
您可以创建模板并使用它创建自适应表单,而不是使用可用的模板。 自定义模板基于引用自适应表单容器和页面元素(如页眉和页脚)的各种页面组件。
您可以使用网站的基本页面组件创建这些组件。 或者,您也可以扩展现成模板所使用的自适应表单的页面组件。
请执行以下步骤以创建自定义模板,如simpleEngrolmentTemplate。
导航到创作实例上的CRXDE Lite。
在/apps目录下,为应用程序创建文件夹结构。 例如,如果应用程序名称为mycompany,则创建一个具有此名称的文件夹。 通常,应用程序文件夹包含组件、配置、模板、src和安装目录。 在此示例中,创建组件、配置和模板文件夹。
导览至文件夹/libs/fd/af/templates。
复制simpleEnrollmentTemplate
节点。
导航到文件夹/apps/mycompany/templates。 右键单击它并选择粘贴。
如有必要,请重命名您复制的模板节点。 例如,将其重命名为登记模板。
导航到位置/apps/mycompany/templates/engrolment-template。
修改jcr:content
节点的jcr:title
和jcr:description
属性,将模板与您复制的模板区分开来。
已修改模板的jcr:content
节点包含guideContainer
和guideformtitle
组件。 guideContainer
是包含自适应表单的容器。guideformtitle
组件显示应用程序名称、说明等。
您可以包含自定义组件或parsys
组件,而不是guideformtitle
。 例如,删除guideformtitle
,并添加自定义组件或parsys
组件节点。 确保组件的sling:resourceType
属性引用组件,并且在页面component.jsp
文件中定义相同的属性。
导航到位置/apps/mycompany/templates/engrolment-template/jcr:content。
打开属性选项卡,将cq:designPath
属性的值更改为/etc/designs/mycompany。
现在为cq:Page
类型创建/etc/designs/mycompany节点。
自定义模板的样式与默认模板的样式相同,因为模板引用页面组件/libs/fd/af/components/page/base。 您可以在节点/apps/mycompany/templates/enromment-template/jcr:content中找到作为属性sling:resourceType
定义的组件引用。 由于基础是核心产品组件,请不要修改此组件。
导航到节点/apps/mycompany/templates/enromment-template/jcr:content,将属性sling:resourceType
的值修改为/apps/mycompany/components/page/enrmontpage
将节点/libs/fd/af/components/page/base复制到文件夹/apps/mycompany/components/page。
将复制的组件重命名为enrollmentpage
。
(仅当您已有内容页面 时)如果您有网站的现有组件,请执行以 contentpage
下步骤(a-d)。如果您的网站没有现有的contentpage
组件,您可以保留resourceSuperType
属性以指向OOTB基页。
对于enrollmentpage
节点,将属性sling:resourceSuperType
的值设置为mycompany/components/page/contentpage。 contentpage
组件是站点的基本页面组件。 其他页面组件可以扩展它。 删除enrollmentpage
下的脚本文件,但head.jsp
、content.jsp
和library.jsp
除外。 sling:resourceSuperType
组件(本例中为contentpage
)包括所有此类脚本。 页眉(包括导航栏和页脚)是从contentpage
组件继承的。
打开文件head.jsp
。
JSP文件包含行<cq.include script="library.jsp"/>
。
library.jsp
文件包含guide.theme.simpleEnrollment
客户端库,它包含自适应表单的样式。
页面组件enrollmentpage
有一个专用的head.jsp
文件,它覆盖contentpage
组件的head.jsp
文件。
将contentpage
组件的head.jsp
文件包含到enrollmentpage
组件的head.jsp
文件中的所有脚本。
在content.jsp
脚本中,可以添加其他页面内容或对页面呈现时包含的其他组件的引用。 例如,如果添加自定义组件applicationformheader
,请确保在JSP文件中添加对该组件的以下引用:
<cq:include path="applicationformheader" resourceType="mycompany/components/applicationformheader"/>
同样,如果在模板节点结构中添加parsys
组件,也应包含自定义组件。
新模板的enrollmentpage
组件的head.jsp
文件包括客户端库guide.theme.simpleEnrollment
。 默认模板还使用此客户端库。 使用以下方法更改新模板中的样式:
guide.theme.simpleEnrollment
替换为自定义主题。主题是指包含在用于渲染自适应表单的页面组件中的客户端库。 客户端库主要控制自适应表单的外观。