自适应表单创作简介 introduction-to-authoring-adaptive-forms

版本
文章链接
AEM as a Cloud Service
单击此处
AEM 6.5
本文

概述 overview

自适应表单允许您创建有吸引力、响应式、动态和自适应的Forms。 AEM Forms提供了直观的用户界面和现成的组件,用于创建和使用自适应表单。 您可以选择基于表单模型或架构创建自适应表单,也可以选择不使用表单模型。 请务必仔细选择不仅符合您的要求,而且可扩展现有基础设施投资和资源的表单模型。您可以从以下选项中进行选择以创建自适应表单:

  • 使用表单数据模型
    数据集成允许您将来自不同数据源的实体和服务集成到可用于创建自适应表单的表单数据模型中。 如果您创建的自适应表单涉及从多个数据源获取数据以及将数据写入多个数据源,请选择表单数据模型。

  • 使用 XDP 表单模板
    如果您投资于基于 XFA 的表单或 XDP 表单,那么这将是理想的表单模型。它提供了一种将您的基于XFA的表单转换为自适应表单的直接方法。 任何现有XFA规则都会保留在关联的自适应表单中。 生成的自适应表单支持XFA构造,例如验证、事件、属性和模式。

  • 使用 XML 架构定义 (XSD) 或 JSON 架构
    XML 和 JSON 架构代表组织中的后端系统在其中生成或使用数据的结构。您可以将架构关联到自适应表单,并使用其元素将动态内容添加到自适应表单。 在创作自适应表单时,可在内容浏览器的数据模型对象选项卡中使用架构的元素。

  • 无使用或不使用表单模型
    使用此选项创建的自适应表单不使用任何表单模型。 从此类表单生成的数据 XML 具有带字段和相应值的平面结构。

有关创建自适应表单的详细信息,请参阅创建自适应表单

自适应表单创作Ui adaptive-form-authoring-ui

用于创作自适应表单的触屏优化UI非常直观,并提供:

  • 拖放功能
  • 标准表单组件
  • 集成的资源存储库

创建或编辑现有自适应表单时,会使用以下UI元素:

自适应表单创作UI

A. ​侧栏​ B. ​页面工具栏​ C. ​自适应表单页面

侧栏 sidebar

侧边栏让您

  • 查看面板、组件、字段和布局等表单内容。
  • 编辑组件属性。
  • 在您的 AEM 数字资源管理 (DAM) 存储库中搜索、查看和使用资源。
  • 在表单上添加组件。

侧栏

A. 内容浏览器 B. 属性浏览器 C. 资源浏览器 D. 组件浏览器

侧栏包含以下浏览器:

  • 内容浏览器
    在内容浏览器中,您可以看到

    • 表单对象
      显示表单的对象层级。作者可以通过在表单对象树中点按特定表单组件来导航到该组件。作者可以从该树中搜索对象并重新排列它们。

    • 数据模型对象
      可让您查看表单模型层级。
      它可让您将表单模型元素拖放到自适应表单上。 已添加的元素会自动转换为表单组件,同时保留其原始属性。当表单使用 XML 架构、JSON 架构或 XDP 模板时,您会看到数据模型对象。

  • 属性浏览器

    可让您编辑组件的属性。属性根据组件而变化。要查看自适应表单容器的属性,请执行以下操作:

    选择一个组件,然后选择 字段级 > 自适应表单容器,然后选择 cmppr

  • 资源浏览器

    使不同类型的内容分离开来,例如图像、文档、页面、电影等。

  • 组件浏览器

    包含可用于构建自适应表单的组件。 您可以将组件从拖动到自适应表单上以添加表单元素,并根据需要配置添加的元素。 下表描述了组件浏览器中列出的组件。

组件
功能
Adobe Sign Block
对使用 Adobe Sign 签名时需要填写的字段添加含占位符的文本块。
按钮
添加一个按钮,可配置该按钮以执行保存、重置、下一步、上一步等操作。
验证码
添加使用Google reCAPTCHA服务的验证码验证。 有关详细信息,请参阅在自适应表单中使用CAPTCHA
图表
添加可在自适应表单和文档中使用的图表,在可重复的面板和表格行中以可视化形式表示二维数据。
复选框
添加复选框。
数据输入字段
在您的表单中使用日期输入字段组件,让客户分别在三个框中填写日、月和年。您可以自定义组件的外观,并更改日期格式。例如,您可以让客户以 MM/DD/YYYY 或 DD/MM/YYYY 格式输入日期。
日期选取器
添加日历字段以选取日期。
文档片段
可让您添加通信的可重用组件。
文档片段组
可让您添加一组相关的文档片段,可以在信件模板中将这些片段用作一个单元。
下拉列表
添加下拉列表 – 单选或多选
电子邮件

添加字段以捕获电子邮件地址。默认情况下,电子邮件组件使用以下正则表达式来验证电子邮件地址。

^[a-zA-Z0-9.!#$%&'*+/=?^_`{|}~-]+@[a-zA-Z0-9-]+(?:.[a-zA-Z0-9-]+)*$

文件附件

添加按钮以允许用户浏览支持文档并将其附加到表单。 可以将多个文件附加到“文件”附件组件。 您还可以在组件的属性浏览器中为附件指定​**最大文件大小**​和​**支持的文件类型**。

注意:

  • 组件不支持附加文件名以字符(.)开头,包含字符\ / : * ? “ < > | ; % $,或包含为Windows操作系统保留的特殊文件名,如nul、prn、con、lpt或com。
  • 要将多个文件附加到在Apple Safari浏览器中打开的文件附件组件,请选择并逐一附加文件。 不能同时选择和附加多个文件。
  • 文件附件组件支持为Adobe Sign启用的自适应表单中的预定义文件格式集。 有关更多信息,请参阅支持的文件格式
文件附件列表
添加一个字段,该字段将列出使用文件附件组件上传的所有附件。
标头
添加通常包括公司徽标、表单标题和摘要的页面标题。
页脚
添加通常包括版权信息和指向其他页面的链接的页脚。
图像
让您插入图像。
图像选择
可让您的客户选择图像以提供信息。您可以使用这些信息向您的客户提供个性化服务。
“下一个”按钮
添加按钮以导航到表单中的下一面板。
数值框
添加用于捕获数值的字段
数值步进器
在您的表单中使用数值步进器以让您的客户输入一个数值,他们可以根据预定义的步骤增大或减小该数值。
面板

添加面板或子面板。

您还可以使用添加子面板从父面板工具栏添加面板组件。 按钮. 同样,您可以使用添加面板工具栏来添加特定于面板的工具栏。 按钮. 您可以使用“编辑面板”对话框配置面板工具栏的位置。

密码框
添加用于捕获密码的字段。
“上一个”按钮
添加一个按钮,用户需要使用该按钮来返回上一个页面或面板。
单选按钮
添加单选按钮。
“重置”按钮
添加按钮以重置表单字段。
“保存”按钮
添加按钮以保存表单数据。
连笔签名
添加用于捕获连笔签名的字段。
分隔符
在表单中启用面板的可视分离。
签名步骤
显示表单中提供的信息以及供用户用来验证和签署表单的签名字段。
文本
让您指定静态文本。
“提交”按钮
添加提交按钮以将表单提交到配置的提交操作。
摘要步骤
提交表单并显示作者在提交表单后指定的摘要文本。
开关
添加用于执行切换或启用/禁用操作的开关。您无法在开关组件中添加两个以上的选项。由于开关只能有两个值:“开”或“关”,因此“强制”不适用。不管用户输入如何,至少保存一个值。
添加表格以便按行和列整理数据。
电话

添加字段以捕获电话号码。电话组件可让作者配置下列电话号码类型之一。每种类型均与一个用于验证的默认正则表达式关联。

  • 类型“国际”由 ^[+][0-9]{0,14}$ 进行验证。
  • 类型“USPhoneNumber”由 {'+1 ('999') '999-9999} 进行验证。
  • 类型“UKPhoneNumber”由 text{'+'99 999 999 9999} 进行验证。
  • 类型“自定义”不提供默认验证模式。它采用最后选择的电话号码类型的值。您也可以指定建自己的自定义验证模式。
条款和条件
添加一个字段,作者可使用该字段指定用户在填写表单之前要查看的条款和条件。
文本框

添加一个文本框,用户可以在其中指定所需的信息。

默认情况下,文本框组件只接受纯文本。您可以启用文本框组件以接受富文本。支持富文本的文本组件提供了用于添加标题、更改字符样式(将字符设为粗体、将字符设为斜体、为字符加下划线)、创建有序列表和无序列表、更改文本背景和文本颜色以及添加超链接的选项。要为文本框启用富文本,请在组件属性中启用 允许富文本 选项。

标题
指定自适应表单的标题。
验证步骤

添加占位符以显示已填好的表单供用户验证。

注意:包含Verify组件的自适应表单不支持匿名用户。 此外,不建议在自适应表单片段中使用验证组件。

使用组件的最佳实践 best-practices

使用自适应表单组件时应记住的一些最佳实践和要点如下:

  • 每个组件都具有控制其外观和功能的关联属性。 要配置组件的属性,请选择该组件,然后选择 cmppr 以在“属性”浏览器中打开组件属性。

  • 组件由其元素名称标识。 选择 cmppr 时,可以通过更改属性浏览器中的​ 元素名称 ​字段值来更改组件的名称。 元素名称字段仅接受字母、数字、连字符(-)和下划线(_)。 不允许使用其他特殊字符,元素名称应以字母开头。

  • 只要标题在表单上可见,您就可以在表单编辑器中内联修改自适应表单组件的标题属性,而无需打开属性浏览器。 为此,请执行以下操作:

    1. 选择以选择具有​ 标题 ​属性且其​ 隐藏标题 ​属性被禁用的组件。

    2. 选择 aem_6_3_edit 以使标题可编辑。

    3. 修改标题并选择Return键或选择组件之外的任意位置以保存更改。 选择Esc键以放弃更改。

  • 一些自适应表单组件(如电子邮件和电话)包含开箱即用的验证模式。 但是,您可以通过更新组件属性中“模式”折叠面板下的​ 验证模式 ​字段来指定自定义验证。 有关默认验证的更多信息,请参阅上表中的组件说明。

  • 自适应表单字段,例如数字框和电子邮件,可以配置为包含专门的HTML5输入类型。 当这些字段成为移动设备和平板电脑上的焦点时,小键盘会预先显示特定的字母、数字和字符,它们通常用于输入字段中的信息。 它可帮助用户快速输入信息,而无需在键盘上的字符集之间进行切换。 要允许对组件进行专门化输入,请在其组件属性中启用​ 使用HTML类型编号 ​复选框。

  • 您可以启用文本框组件以接受富文本。要为文本框启用富文本,请启用组件属性中的​ 允许富文本 ​复选框。

  • 您可以启用文本框、电子邮件和电话组件,以根据浏览器自动填写设置中存储的信息自动填写姓名、地址、信用卡、电话和电子邮件等字段的值。 要启用此功能,请在组件属性中选择​ 启用自动填写,然后选择​ 自动填写属性。 当用户填写自适应表单时,将会根据浏览器中的自动填写配置文件或用户之前填写的值来建议值。 请注意,如果打开了用户浏览器中的自动填写设置,则自动填写可正常工作。

  • 在组件属性中以{value}={text}格式指定单选按钮和复选框项目的值。

  • 默认情况下,文件附件组件只允许用户附加一个文件。 但是,您可以配置组件属性以支持多个附件。 此外,如果用户使用相同的文件名附加多个文件,则附件可能会导致一些问题。 因此,建议在提交表单时为每个提交的附件关联一个唯一标识符。 为此,请执行以下操作:

    1. 在AEM Forms服务器上,导航到​ Adobe Experience Manager > 工具 > 操作 > Web控制台
    2. 查找并选择​ 自适应Forms配置服务
    3. 在“自适应Forms配置服务”对话框中,启用​ 使文件名唯一。 默认情况下,该选项处于禁用状态。
  • 若要使用户能够使用Safari浏览器附加PDF,请确保已将​ application/pdf ​添加到文件附件组件的“支持的文件类型”属性中。 在“支持的文件类型”属性中,使用以前的AEM Forms版本创建的自适应表单可能包含​ .pdf,而不是​ application/pdf

有关自适应表单的更多最佳实践,请参阅使用自适应表单的最佳实践

NOTE
自适应表单组件不支持从右至左(RTL)语言。 例如,希伯来语。

页面工具栏 page-toolbar

顶部的页面工具栏提供了各种选项,以便您能够预览表单、更改表单属性和编辑表单布局。您可以在创作表单时预览表单,并进行相应的更改。在页面工具栏中,您会看到:

  • 切换侧面板 toggle-side-panel :可让您显示或隐藏侧栏。

  • 页面信息 theme-options :可让您查看页面属性、发布/取消发布表单、启动表单工作流以及在经典 UI 中打开表单。

  • 模拟器 ruler :可让您针对不同的显示尺寸(如平板电脑和手机)模拟表单外观。

  • 编辑:可让您选择其他模式,例如:编辑样式开发人员 ​和​ 设计

    • Edit:可让您编辑表单及其组件的属性。例如,添加组件、删除图像和指定必填字段。

    • 样式:可让您设计表单组件的外观。例如,在样式模式下,您可以选择一个面板并指定其背景颜色。

    • 开发人员:可让开发人员:

      • 发现表单的组成部分。
      • 调试何时何地发生的情况,这反过来有助于解决问题。
    • 设计。可让您启用或禁用自定义组件,或侧栏中未列出的现成组件。

  • 预览:可让您预览表单在发布时的外观。

组件工具栏 component-toolbar

触屏 UI 中的组件工具栏

在选择一个组件时,将显示一个可用于使用该组件的工具栏。您可以获得用于剪切、粘贴、移动和指定组件属性的选项。您的选项包括:

A.配置:选择​ 配置 ​时,组件属性在侧栏中可见。 通过配置这些属性,您可以自定义数据捕获体验。您可以更改组件的元素名称,在组件的“标题”字段中指定标签文本。利用元素名称,可以捕获用户使用组件输入的值。在组件属性中,可以指定组件的行为,并管理用户输入。在侧栏中配置属性以捕获用户数据并将它用于进一步处理。自适应表单容器属性允许您指定客户端库、布局、主题、记录文档设置、保存设置、提交设置和元数据设置。

B. 复制:可以使用复制选项来复制一个组件并将其粘贴到表格中的其他位置。粘贴组件时,粘贴的组件将获得一个新的元素名称,但保留已复制组件的属性。

C.剪切:您可以在自适应表单中使用“剪切”选项将组件从一个位置移动到另一个位置。

D. 删除:可让您从表单中删除组件。

E. 插入:可让您在选定组件的上方插入组件。

F. 粘贴:可让您粘贴使用上述选项剪切或复制的组件。

G. 编辑规则:可让您打开规则编辑器。有关详细信息,请参阅规则编辑器

H. 分组:可让您选择多个组件(如果要剪切、复制或粘贴多个组件)。

I 父项:可让您选择组件的父项。例如,文本字段位于子分区中,后者位于分区中。部分位于指南根面板中,而自适应表单容器是指南根面板的父级。 对于组件,您会看到层级自下而上排序的所有选项。

例如,如果您为文本框选择​ 父项,您会看到:

  • 子分区
  • 分区
  • guideRootPanel
  • 自适应表单容器

J. 其他:提供更多选项来处理所选组件。

  • 查看 SOM 表达式
  • 将面板另存为片段(仅适用于面板)
  • 添加子面板(仅适用于面板)
  • 添加面板工具栏(仅适用于面板)
  • 替换(不适用于面板)

自适应表单页面 af-page

自适应表单页面是实际表单。 它类似于任何其他建模为 WCM cq:Page 组件的 WCM 页面。下图显示了典型自适应表单的内容结构。

自适应表单WCM页面的内容结构

内容结构通常包含以下主要组件:

  • guideContainer:自适应表单的根,在自适应表单UI中标记为​ 自适应表单的开头。 在此组件中,您可以指定:

    • 自适应表单的移动布局:定义该表单在移动设备上的外观。
    • 感谢页面:定义用户在提交表单后被重定向到的页面。
    • 提交操作:定义用户提交表单后在服务器上处理表单的方式。
    • 样式:指定用于自定义表单外观的 CSS 文件的路径。
  • rootPanel: ​自适应表单的根面板。 它可以包含项目节点下的子面板。每个包含根面板的面板都可以有一个与之关联的布局。面板的布局指示表单的布局方式。例如,在折叠布局中,其项目被布置为折叠步骤。

  • 工具栏: ​自适应表单容器具有关联的全局工具栏,该工具栏是表单的全局工具栏。 可以使用编辑栏中的​ 添加工具栏 ​操作来添加此工具栏,这可让作者添加操作,例如提交、保存、重置等。

  • 资源: ​此节点包含用于表单创作的附加信息。例如,表单模型详细信息、本地化详细信息等)。

recommendation-more-help
19ffd973-7af2-44d0-84b5-d547b0dffee2