创建自适应表单模板

创作表单时,可添加字段和组件以在编辑器中定义表单结构、内容和操作。 可在表单容器的guideRootPanel中添加字段和组件。 借助模板编辑器,您可以创建一个模板,其中包含作者用于创建表单的基本结构和初始内容。

例如,您希望所有表单作者在注册表单中都具有特定文本框、导航按钮和提交按钮。 您可以创建模板,其中包含作者可用来创建与其他注册表单一致的表单的组件。 当作者使用模板创建自适应表单时,新表单会继承您在模板中指定的结构和组件。 模板编辑器允许您:

  • 在结构层中添加表单的页眉和页脚组件。
  • 为表单提供初始内容。
  • 指定主题提交操作。

您可以从Software Distribution门户下载和安装AEM Forms引用内容包,以将引用主题和模板导入环境。

使用模板

您可以通过导航到​Adobe Experience Manager > Tools > General > Templates,从“工具”菜单访问模板编辑器。 在此,模板在为可编辑模板启用的文件夹中进行组织。

Experience Manager提供用于组织模板的全局文件夹。 但是,默认情况下不启用此功能。 您可以请求管理员启用全局文件夹或为模板创建文件夹。 有关如何创建文件夹的更多信息,请参阅模板文件夹

创建模板

创建文件夹后,打开文件夹并执行以下步骤以创建模板:

  1. 在已创建的文件夹中点按​Create

  2. 在“选取模板类型”部分,选择​Adaptive Form template​并点按​Next

  3. 在模板详细信息部分中,提供模板标题,然后点按​Create
    您还可以提供描述。

  4. 点按​Done​以返回到控制台,或点按​Open​以在编辑器中打开模板。

模板编辑器UI

打开模板进行编辑时,您可以看到以下AEM编辑器组件:

  • 页面
    工具栏包含以下选项:

    • 切换侧面板:用于显示或隐藏侧栏。
    • 页面信息:允许您指定信息,如发布/取消发布时间、缩略图、客户端库、页面策略和页面设计客户端库。
    • 模式选择器: 用于更改模式。您可以选择​Structure​模式、Initial Content​模式、Layout Control​模式。 结构模式允许您添加和自定义页眉和页脚。 使用初始内容模式可自定义表单内容。
    • 预览: 用于预览模板在发布时的外观。您可以使用“图层选择器”和“预览”切换编辑和预览模式。
  • 侧栏: 提供内容、属性、资产和组件浏览器。

  • 组件工具栏: 选择组件时,您会看到一个工具栏,通过该工具栏可以自定义组件。

  • 页面:添加内容以创建模板的区域。

编辑模板

自适应表单模板使用两层创建:

  • 结构
  • 初始内容

图层选择器位于屏幕右上角的“预览”选项旁边。

结构

在模板编辑器中选择结构层时,您可以看到自适应表单容器上下的布局容器。 作者可以将这些布局容器用于页眉和页脚。 您可以添加、编辑或自定义页眉和页脚。 将自适应表单标题组件拖放到布局容器中自适应表单容器上方,以自定义模板标题。 将自适应表单页脚组件拖放到布局容器中自适应表单容器下方,以自定义模板页脚。

结构层中的布局容器

结构层中的布局容器

A.页 眉组件的布局容 器B.页脚 组件的布局容器

将自适应表单标题组件拖放到布局容器中自适应表单容器上方。 添加组件后,您可以指定其属性,以便添加徽标并提供其标题。

同样,当您将页脚组件拖放到自适应表单容器下方的布局容器中时,您可以提供版权信息和公司详细信息。

在结构层中添加的页眉和页脚

在结构层中添加的页眉和页脚

在结构层中锁定/解锁组件

在编辑选定了结构层的模板时,可以解锁模板的页眉和页脚。 如果模板中某个组件已解锁,则表单作者可以在使用该模板的自适应表单中编辑该组件。 锁定组件可防止表单作者在自适应表单中编辑组件。 组件工具栏中提供了“锁定”选项。

例如,在模板中添加标头组件。 选择组件后,组件工具栏中会显示一个锁定选项。 通常,标题包含公司名称和徽标,并且您不希望表单作者更改模板中的徽标和标题。 在使用锁定了标题组件的模板创建的自适应表单中,表单作者无法更改徽标和公司名称。

注意

不建议单独锁定或解锁页眉组件中的图像或徽标。 您可以解锁标题组件。

初始内容

选择“初始内容”选项后,模板的自适应表单容器将像打开自适应表单一样打开进行编辑。 与创作自适应表单一样,您可以指定初始设置,如选择主题和提交操作。

表单作者将其用作创建表单的基础。 内容流结构在模板的初始内容层中指定。 要切换到编辑表单模板的初始内容,请在页面工具栏中的“预览”之前,点按Canvas-drolp-down > Initial Content

在初始内容层中,您可以创建作者作为基础的自适应表单模板。 创作模板与创作表单类似,您可以使用侧栏中提供的选项。 侧栏提供内容、属性、资产和组件浏览器。

注意

选择“存储内容”或“存储PDF”作为“提交操作”时,您会获得一个选项来指定存储路径。 如果在模板中指定路径,则从模板创建的所有表单都具有相同的路径。 您可以指定正确的存储路径,或者确保表单作者对其进行更新,以防止每个表单的数据存储在同一位置。

创建带有选项卡和面板的自适应表单模板

例如,您要创建具有以下选项卡的模板:

  • 常规信息
  • 专业信息

您在结构层中添加了徽标、提供了标题并添加了页脚。 锁定页眉和页脚,以阻止表单作者在使用模板创建表单时对其进行编辑。

将层从“结构”更改为“初始内容”,然后开始向表单添加内容。 要创建选项卡式结构,请在“自适应表单”容器的guideRootPanel中添加子面板。 添加面板:

  • 选择​Drag components here​选项时,可以点按​+​按钮以添加面板。

  • 您可以从组件浏览器的侧栏中拖放面板组件。

  • 您可以从组件工具栏中添加guideRootPanel的子面板。

要创建“常规信息”和“专业信息”选项卡,请在guideRootPanel的子面板中添加两个面板。 选择面板,然后点按cmppr以打开侧栏中的属性。 将元素名称分别更改为general-infoprofessional-info,将标题分别更改为“一般信息”和“专业信息”。 在侧栏中,点按内容以打开内容浏览器。 在“表单对象”选项卡中,选择guideRootPanel。 在编辑器中,选择guideRootPanel。 点按组件工具栏中的cmppr以打开其属性。 在面板布局字段中,选择​Tabs on Top​并点按​Done。 将应用选项卡式模板结构。

在选项卡中添加内容

添加面板并将其结构为选项卡后,可以在选项卡内添加字段。 在编辑器中选择选项卡时,可以看到​Drag components here​选项。 您可以拖放组件,如文本框、列表项和按钮。 您可以在侧栏的组件浏览器中拖放组件。

每个组件都具有可增强数据捕获和操作的属性。 例如,您可以启用组件的​Required field​属性。 作者可以指定客户在跳过填写必填字段时看到的消息。 在​Required Field Message​属性中指定消息。

在示例模板中,“姓名”、“电话号码”和“出生日期”字段添加在“常规信息”选项卡中。 在“专业信息”选项卡中,添加了“当前雇佣”、“就业类型”、“教育资格”字段。

添加字段后,可以添加诸如提交和重置等按钮。

启用模板

创建模板时,会将其添加为草稿。 启用模板以将其用于创建自适应Forms。 要启用模板,请执行以下操作:

  1. 导航至​Adobe Experience Manager > Tools > Templates,然后打开创建模板的文件夹。

  2. 您创建的模板将标记为“草稿”。

  3. 选择模板,然后点按工具栏中的​Enable
    创建自适应表单时,您可以看到在要求您选择模板时列出的模板。

导入或导出模板

表单可与其模板配合使用。 下载使用自定义模板创建的自适应表单时,不会下载该模板。 在其他AEM Forms实例上导入ftocorm时,将导入该ftocorm,而不使用其模板。 如果表单已导入,但其模板不可用,则不会呈现该表单。 您可以从https://<server>:<port>/crx/packmgr/conf节点打包自定义模板,并将其端口到要上传表单的AEM Forms实例中。 您还可以使用AEM原型创建模板并将其部署到Cloud Services实例

使用模板创建自适应表单

创建并启用模板后,在创建自适应表单时,该模板可在表单管理器中使用。 要使用模板并创建自适应表单,请参阅创建自适应表单

推荐

  • 在模板编辑器中修改表单的属性时,请勿使用BindReference属性。
  • 如果要添加断点,请在创作自适应表单模板时创建断点。
    有关断点的更多信息,请参阅响应式布局

在此页面上