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

前提条件

自适应表单模板

自适应表单模板是专用的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。

  1. 导航到创作实例上的CRXDE Lite。

  2. 在/apps目录下,为应用程序创建文件夹结构。 例如,如果应用程序名称为mycompany,则创建一个具有此名称的文件夹。 通常,应用程序文件夹包含组件、配置、模板、src和安装目录。 在此示例中,创建组件、配置和模板文件夹。

  3. 导览至文件夹/libs/fd/af/templates。

  4. 复制simpleEnrollmentTemplate节点。

  5. 导航到文件夹/apps/mycompany/templates。 右键单击它并选择​粘贴

  6. 如有必要,请重命名您复制的模板节点。 例如,将其重命名为登记模板。

  7. 导航到位置/apps/mycompany/templates/engrolment-template。

  8. 修改jcr:content节点的jcr:titlejcr:description属性,将模板与您复制的模板区分开来。

  9. 已修改模板的jcr:content节点包含guideContainerguideformtitle组件。 guideContainer 是包含自适应表单的容器。guideformtitle组件显示应用程序名称、说明等。

    您可以包含自定义组件或parsys组件,而不是guideformtitle。 例如,删除guideformtitle,并添加自定义组件或parsys组件节点。 确保组件的sling:resourceType属性引用组件,并且在页面component.jsp文件中定义相同的属性。

  10. 导航到位置/apps/mycompany/templates/engrolment-template/jcr:content。

  11. 打开​属性​选项卡,将cq:designPath属性的值更改为/etc/designs/mycompany。

  12. 现在为cq:Page类型创建/etc/designs/mycompany节点。

创建自适应表单页面组件

自定义模板的样式与默认模板的样式相同,因为模板引用页面组件/libs/fd/af/components/page/base。 您可以在节点/apps/mycompany/templates/enromment-template/jcr:content中找到作为属性sling:resourceType定义的组件引用。 由于基础是核心产品组件,请不要修改此组件。

  1. 导航到节点/apps/mycompany/templates/enromment-template/jcr:content,将属性sling:resourceType的值修改为/apps/mycompany/components/page/enrmontpage

  2. 将节点/libs/fd/af/components/page/base复制到文件夹/apps/mycompany/components/page。

  3. 将复制的组件重命名为enrollmentpage

  4. (仅当您已有内容页面 时)如果您有网站的现有组件,请执行以 contentpage下步骤(a-d)。如果您的网站没有现有的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文件。
注意

主题是指包含在用于渲染自适应表单的页面组件中的客户端库。 客户端库主要控制自适应表单的外观。

On this page

Adobe Summit Banner

A virtual event April 27-28.

Expand your skills and get inspired.

Register for free
Adobe Summit Banner

A virtual event April 27-28.

Expand your skills and get inspired.

Register for free
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