创作自适应表单简介

概述

自适应表单使您能够创建具有吸引力、响应式、动态和自适应性的表单。 AEM Forms为创建和使用自适应表单提供了直观的用户界面和现成组件。 您可以选择基于表单模型或模式创建自适应表单，也可以不使用表单模型。 必须仔细选择不仅符合您的要求，而且扩展您现有的基础设施投资和资产的表单模型。 您可以从以下选项中进行选择，以创建自适应表单：

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

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

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

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

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

自适应表单创作UI

用于创作自适应表单的触屏优化UI是直观的，它提供：

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

在创建新表单或编辑现有自适应表单时，您使用以下UI元素：

• 侧栏
• 页面工具栏
• 组件工具栏
• 自适应表单页

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

侧栏

侧栏允许您

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

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

提要栏包含以下浏览器：

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

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

  • 数据模型对
    象允许您查看表单模型层次结构。它允许您在自适应表单上拖放表单模型元素。 添加的元素会自动转换为表单组件，同时保留其原始属性。 当您的表单使用XML模式、JSON模式或XDP模板时，您可以看到数据模型对象。

• 属性浏览器

  允许您编辑组件的属性。 属性会根据组件而更改。 要查看自适应表单容器的属性，请执行以下操作：

  选择一个组件，然后点按 > 自适应表单容器，然后点按。

• 资产浏览器

  隔离不同类型的内容，如图像、文档、页面、影片等。

• 组件浏览器

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

使用组件的最佳实践

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

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

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

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

  1. 点按以选择具有​Title​属性且其​Hide title​属性已禁用的组件。

  2. 点按以使标题可编辑。

  3. 修改标题并点按返回键，或点按组件外的任意位置以保存更改。 点按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。

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

页面工具栏

顶部的页面工具栏提供了一些选项，通过这些选项可以预览表单、更改表单属性和编辑表单布局。 您可以在创作表单时预览表单，并相应地进行更改。 在页面工具栏中，您会看到：

• 切换侧 :允许您显示或隐藏提要栏。

• 页面 :允许您视图页面属性、发布/取消发布表单、开始表单工作流，以及在经典UI中打开表单。

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

• 编辑:允许您选择其他模式，例如： 编辑、 样式、 开​发 人员​和设计。

  • 编辑:允许您编辑表单及其组件的属性。例如，添加组件、删除图像以及指定必填字段。

  • 样式:允许您设置表单组件外观的样式。例如，在样式模式下，您可以选择面板并指定其背景颜色。

  • 开发人员:允许开发人员：

    • 了解表单的组成。
    • 在何时何地调试发生的情况，这反过来有助于解决问题。

  • 设计. 允许您启用或禁用未列在提要栏中的自定义组件或现成组件。

• 预览:允许您预览表单在发布时的外观。

组件工具栏

当您选择组件时，您会看到一个工具栏，通过该工具栏可以处理组件。 您可以选择剪切、粘贴、移动和指定组件的属性。 您的选择是：

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

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

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

D.删除:允许您从表单中删除组件。

E.插入:允许您在选定组件上方插入组件。

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

G.编辑规则:允许您打开规则编辑器。 有关详细信息，请参阅规则编辑器。

H.组:如果要剪切、复制或粘贴多个组件，可选择多个组件。

我。父项:允许您选择组件的父项。 例如，文本字段位于位于位于某个部分的子部分内。 该部分位于引导根面板中，自适应表单容器是引导根面板的父项。 对于组件，您可以看到所有选项，这些选项的层次结构从底部向上排序。

例如，如果点按​Parent​以查找文本框，您可以看到：

• 分节
• 区域
• guideRootPanel
• 自适应表单容器

J.其他:提供更多选项以使用选定的组件。

• 视图 SOM表达式
• 将面板另存为片段（仅限面板）
• 添加子面板（仅限面板）
• 添加面板工具栏（仅适用于面板）
• 替换（不适用于面板）

自适应表单页

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

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

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

  • 自适应表单的移动布局:定义表单在移动设备上的外观。
  • 感谢页面:定义提交表单后用户被重定向的页面。
  • 提交操作:定义用户提交表单后在服务器上处理表单的方式。
  • 样式:指定用于自定义表单外观的CSS文件的路径。

• rootPanel: 自适应表单的根面板。它可以在项目节点下包含子面板。 每个包含根面板的面板都可以具有与其关联的布局。 面板的布局指示表单的布局。 例如，在Accordion布局中，其项目将布局为Accordion步骤。

• 工具栏： 自适应表单容器具有一个关联的全局工具栏，该工具栏是表单的全局工具栏。可以使用编辑栏中的​添加工具栏​操作添加此工具栏，通过此操作，作者可以添加提交、保存、重置等操作。

• 资产： 此节点包含用于表单创作的其他信息。例如，表单模型详细信息、本地化详细信息等)。