创建自定义自适应表单模板

前提条件

了解AEM 页面模板和自适应表单创作
了解AEM 客户端库

自适应表单模板

自适应表单模板是专用的AEM页面模板，具有用于创建自适应表单的某些属性和内容结构。模板具有预配置的布局、样式和基本的初始内容结构。

创建表单后，对原始模板内容结构的任何更改不会反映在表单中。

默认自适应表单模板

AEM快速入门提供以下自适应表单模板：

基本：允许您使用左侧的选项卡布局创建多选项卡自适应表单，在该布局中，您可以按任意顺序访问选项卡。
基本与Adobe Sign:允许您创建包含多个选项卡和向导的表单。它使用左侧选项卡布局，允许您按任意顺序访问选项卡。它使用Adobe Document Cloud设计服务进行签名和验证。
空白模板：允许您创建不带任何页眉、页脚和初始内容的表单。您可以添加文本框、按钮和图像等组件。空白模板允许您创建一个表单，该表单可以嵌入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模板编辑器允许您：

在结构层中添加表单的页眉和页脚组件
提供表单的初始内容。
指定主题。
指定提交、重置和导航等操作。

有关详细信息，请参阅模板编辑器。

从CRXDE创建自适应表单模板

您可以创建模板并使用它创建自适应表单，而不是使用可用的模板。自定义模板基于引用自适应表单容器和页面元素（如页眉和页脚）的各种页面组件。

您可以使用网站的基本页面组件创建这些组件。或者，您也可以扩展现成模板所使用的自适应表单的页面组件。

请执行以下步骤以创建自定义模板，如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基页。
1. 对于enrollmentpage节点，将属性sling:resourceSuperType的值设置为mycompany/components/page/contentpage。 contentpage组件是站点的基本页面组件。其他页面组件可以扩展它。删除enrollmentpage下的脚本文件，但head.jsp、content.jsp和library.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组件，也应包含自定义组件。