创作自适应表单简介 introduction-to-authoring-adaptive-forms
概述 overview
自适应表单允许您创建引人入胜、响应式、动态且自适应的表单。 AEM Forms提供了直观的用户界面和现成的组件,用于创建和使用自适应表单。 您可以选择基于表单模型或架构创建自适应表单,也可以选择不使用表单模型。 请务必仔细选择不仅符合您的要求,而且可扩展现有基础设施投资和资产的表单模型。您可以从以下选项中进行选择,以创建自适应表单:
-
使用表单数据模型
数据集成 允许您将来自不同数据源的实体和服务集成到表单数据模型中,以用于创建自适应表单。 如果要创建的自适应表单涉及从多个数据源获取数据并将数据写入多个数据源,请选择表单数据模型。 -
使用 XDP 表单模板
如果您投资于基于 XFA 的表单或 XDP 表单,那么这将是理想的表单模型。它提供了一种将基于XFA的表单转换为自适应表单的直接方法。 任何现有的XFA规则都将保留在关联的自适应表单中。 生成的自适应表单支持XFA构建,如验证、事件、属性和模式。 -
使用 XML 架构定义 (XSD) 或 JSON 架构
XML 和 JSON 架构代表组织中的后端系统在其中生成或使用数据的结构。您可以将架构与自适应表单相关联,并使用其元素向自适应表单添加动态内容。 创作自适应表单时,架构的元素将可用在内容浏览器的“数据模型对象”选项卡中。 -
不使用表单模型或不使用表单模型
使用此选项创建的自适应表单不使用任何表单模型。 从此类表单生成的数据 XML 具有带字段和相应值的平面结构。
有关创建自适应表单的更多信息,请参阅 创建自适应表单.
自适应表单创作UI adaptive-form-authoring-ui
用于创作自适应表单的触屏优化UI是直观的,它提供:
- 拖放功能
- 标准表单组件
- 集成的资产存储库
创建新自适应表单或编辑现有自适应表单时,可使用以下UI元素:
A. 侧栏 B. 页面工具栏 C. 自适应表单页面
侧栏 sidebar
侧栏可让您:
-
查看面板、组件、字段和布局等表单内容。
-
编辑组件属性。
-
在您的 AEM 数字资产管理 (DAM) 存储库中搜索、查看和使用资产。
-
在表单上添加组件。
A. 内容浏览器 B. 属性浏览器 C. 资产浏览器 D. 组件浏览器
侧栏包含以下浏览器:
-
内容浏览器
在内容浏览器中,您可以看到
-
表单对象
显示表单的对象层次结构。 作者可以通过在表单对象树中点按特定表单组件来导航到该组件。作者可以从该树中搜索对象并重新排列它们。
-
数据模型对象
用于查看表单模型层次结构。
它允许您在自适应表单上拖放表单模型元素。 已添加的元素会自动转换为表单组件,同时保留其原始属性。当表单使用 XML 架构、JSON 架构或 XDP 模板时,您会看到数据模型对象。
-
-
属性浏览器
可让您编辑组件的属性。属性根据组件而变化。要查看自适应表单容器的属性,请执行以下操作:
选择一个组件,然后点按 > 自适应表单容器,然后点按 .
-
资产浏览器
使不同类型的内容分离开来,例如图像、文档、页面、电影等。
-
组件浏览器
包括可用于构建自适应表单的组件。 您可以将组件从拖动到自适应表单上以添加表单元素,并根据要求配置添加的元素。 下表描述了组件浏览器中列出的组件。
使用组件的最佳实践 best-practices
使用自适应表单组件时要记住的一些最佳实践和要点如下:
-
每个组件都具有可控制其外观和功能的关联属性。 要配置组件的属性,请点按组件,然后点按 用于在属性浏览器中打开组件属性。
-
组件使用其元素名称进行标识。 点按 ,则可以通过更改 元素名称 字段值。 元素名称字段仅接受字母、数字、连字符(-)和下划线(_)。 不允许使用其他特殊字符,元素名称应以字母开头。
-
只要表单上显示了自适应表单组件的标题,您就无需打开属性浏览器,即可在表单编辑器中修改内联自适应表单组件的标题属性。 为此,请执行以下操作:
- 点按以选择具有 标题 属性 隐藏标题 属性被禁用。
- 点按 以使标题可编辑。
- 修改标题并点按返回键,或点按组件外的任意位置以保存更改。 点按Esc键以放弃更改。
-
某些自适应表单组件(如电子邮件和电话)包括现成的验证模式。 但是,您可以通过更新 验证模式 字段中的模式折叠面板。 有关默认验证的更多信息,请参阅上表中的组件描述。
-
自适应表单字段(如数字框和电子邮件)可配置为包含专门的HTML5输入类型。 当这些字段集中在移动设备和平板电脑上时,键盘会在前面显示特定的字母、数字和字符,这些字段通常用于输入字段中的信息。 它有助于用户快速输入信息,而无需在键盘上的字符集之间切换。 要允许对组件进行专门输入,请启用 使用HTML类型编号 复选框。
-
您可以启用文本框组件以接受富文本。要为文本框启用富文本,请启用 允许富文本 复选框。
-
您可以启用文本框、电子邮件和电话组件,以根据浏览器自动填充设置中存储的信息自动填充名称、地址、信用卡、电话和电子邮件等字段的值。 要启用此功能,请选择 启用自动填充 在组件属性中,并选择 自动填充属性. 当用户填写自适应表单时,系统会从浏览器中的自动填充配置文件中或根据用户之前填充的值建议这些值。 请注意,如果用户浏览器中的自动填充设置处于打开状态,则可以使用自动填充。
-
在中指定单选按钮和复选框项目的值
{value}={text}
格式。 -
默认情况下,文件附件组件允许用户仅附加一个文件。 但是,您可以配置组件属性以支持多个附件。 此外,如果用户附加了多个文件名相同的文件,则附件可能会导致某些问题。 因此,建议在提交表单时为每个已提交的附件关联唯一标识符。 为此,请执行以下操作:
- 在AEM Forms服务器上,导航到 Adobe Experience Manager >工具>操作> Web Console.
- 查找并点按 自适应Forms配置服务.
- 在自适应Forms配置服务对话框中,启用 使文件名唯一. 默认情况下,该复选框处于禁用状态。
-
要允许用户使用Safari浏览器附加PDF,请确保 application/pdf 将添加到文件附件组件的“受支持的文件类型”属性中。 使用以前的AEM Forms版本创建的自适应表单可能包含 .pdf 而不是 application/pdf (位于支持的文件类型属性中)。
有关自适应表单的更多最佳实践,请参阅 使用自适应表单的最佳实践.
页面工具栏 page-toolbar
顶部的页面工具栏提供了各种选项,以便您能够预览表单、更改表单属性和编辑表单布局。您可以在创作表单时预览表单,并进行相应的更改。在页面工具栏中,您会看到:
-
切换侧面板 :可让您显示或隐藏侧栏。
-
页面信息 :可让您查看页面属性、发布/取消发布表单、启动表单工作流以及在经典 UI 中打开表单。
-
模拟器 :可让您针对不同的显示尺寸(如平板电脑和手机)模拟表单外观。
-
编辑:允许您选择其他模式,例如: 编辑、样式、开发人员、 和 设计.
-
Edit:可让您编辑表单及其组件的属性。例如,添加组件、删除图像和指定必填字段。
-
样式:可让您设计表单组件的外观。例如,在样式模式下,您可以选择一个面板并指定其背景颜色。
-
开发人员:可让开发人员:
- 发现表单的组成部分。
- 调试何时何地发生的情况,这反过来有助于解决问题。
-
设计:允许您启用或禁用自定义组件,或未在侧栏中列出的现成组件。
-
-
预览:可让您预览表单在发布时的外观。
组件工具栏 component-toolbar
在选择一个组件时,将显示一个可用于使用该组件的工具栏。您可以获得用于剪切、粘贴、移动和指定组件属性的选项。您的选项包括:
A. 配置:在点按 配置 时,组件属性将显示在侧栏中。通过配置这些属性,您可以自定义数据捕获体验。您可以更改组件的元素名称,在组件的“标题”字段中指定标签文本。利用元素名称,可以捕获用户使用组件输入的值。在组件属性中,可以指定组件的行为,并管理用户输入。在侧栏中配置属性以捕获用户数据并将它用于进一步处理。自适应表单容器的属性允许您指定客户端库、布局、主题、记录文档设置、保存设置、提交设置和元数据设置。
B. 复制:可以使用复制选项来复制一个组件并将其粘贴到表格中的其他位置。粘贴组件时,粘贴的组件将获得一个新的元素名称,但保留已复制组件的属性。
C.剪切:您可以使用剪切选项在自适应表单中将组件从一个位置移动到另一个位置。
D. 删除:可让您从表单中删除组件。
E. 插入:可让您在选定组件的上方插入组件。
F. 粘贴:可让您粘贴使用上述选项剪切或复制的组件。
G. 编辑规则:可让您打开规则编辑器。有关更多信息,请参阅 规则编辑器.
H. 分组:可让您选择多个组件(如果要剪切、复制或粘贴多个组件)。
I 父项:可让您选择组件的父项。例如,文本字段位于子分区中,后者位于分区中。部分位于指南根面板中,自适应表单容器是指南根面板的父级。 对于组件,您会看到层级自下而上排序的所有选项。
例如,如果您点按文本框的 父项,则会看到:
- 子分区
- 分区
- guideRootPanel
- 自适应表单容器
J. 其他:提供更多选项来处理所选组件。
- 查看 SOM 表达式
- 将面板另存为片段(仅适用于面板)
- 添加子面板(仅适用于面板)
- 添加面板工具栏(仅适用于面板)
- 替换(不适用于面板)
自适应表单页面 af-page
自适应表单页面是实际的表单。 它类似于任何其他建模为 WCM cq:Page
组件的 WCM 页面。下图显示了典型自适应表单的内容结构。
内容结构通常包含以下主要组件:
-
guideContainer:自适应表单的根,标记为 自适应表单的开始 在自适应表单UI中。 在此组件中,您可以指定:
- 自适应表单的移动布局:定义表单在移动设备上的外观。
- 感谢页面:定义用户在提交表单后被重定向到的页面。
- 提交操作:定义用户提交表单后在服务器上处理表单的方式。
- 样式:指定用于自定义表单外观的 CSS 文件的路径。
-
rootPanel:自适应表单的根面板。 它可以包含项目节点下的子面板。每个包含根面板的面板都可以有一个与之关联的布局。面板的布局指示表单的布局方式。例如,在折叠项布局*中, *其项目布局为折叠项步骤。
-
工具栏:自适应表单容器具有与表单全局关联的全局工具栏。 可以使用编辑栏中的 添加工具栏 操作来添加此工具栏,这可让作者添加操作,例如提交、保存、重置等。
-
资产:此节点包含用于表单创作的其他信息。 例如,表单模型详细信息、本地化详细信息等)。