Show Menu
主题×

Introduction to authoring adaptive forms

概述

自适应表单允许您创建具有吸引力、响应式、动态和自适应性的表单。 AEM Forms提供直观的用户界面和现成组件,用于创建和使用自适应表单。 您可以选择基于表单模型或模式创建自适应表单,也可以不使用表单模型。 必须仔细选择不仅符合您要求、而且扩展现有基础设施投资和资产的表单模型。 您可以从以下选项中进行选择,以创建自适应表单:
  • 使用表单数据模型 数据集成 允许您将来自不同数据源的实体和服务集成到表单数据模型中,以用于创建自适应表单。 如果要创建的自适应表单涉及从多个数据源获取和写入数据,请选择表单数据模型。
  • 使用XDP表单模板 ​如果您对基于XFA或XDP表单有投资,它是理想的表单模型。 它提供了一种将基于XFA的表单转换为自适应表单的直接方法。 任何现有的XFA规则都将保留在关联的自适应表单中。 生成的自适应表单支持XFA构造,如验证、事件、属性和模式。
  • 使用XML模式定义(XSD)或JSON模式 XML和JSON模式表示组织中后端系统生成或使用数据的结构。 您可以将模式与自适应表单关联,并使用其元素将动态内容添加到自适应表单。 创作自适应表单时,模式的元素将可在内容浏览器的“数据模型对象”选项卡中使用。
  • 不使用表单模型或不使用 ​使用此选项创建的自适应表单不使用任何表单模型。 从这种表单生成的数据XML具有带字段和相应值的平面结构。
有关创建自适应表单的详细信息,请参 阅创建自适应表单

自适应表单创作UI

用于创作自适应表单的触屏优化UI是直观的,它提供:
  • 拖放功能
  • 标准表单组件
  • 集成的资产存储库
在创建新表单或编辑现有自适应表单时,您使用以下UI元素:
A.侧栏 B. 页面工具栏 C. 自适应表 单页面

页面工具栏

顶部的页面工具栏提供了用于预览表单、更改表单属性和编辑表单布局的选项。 您可以在创作表单时预览表单,并相应地进行更改。 在页面工具栏中,您会看到:
  • 切换侧面板 :用于显示或隐藏提要栏。
  • 页面信息 :允许您视图页面属性、发布/取消发布表单、开始表单工作流,以及在经典UI中打开表单。
  • 模拟器 :可模拟表单外观,以适应平板电脑和手机等不同的显示尺寸。
  • 编辑 :允许您选择其他模式,如: 编辑 样式 开发 ​人员 ​设计。
    • 编辑 :允许您编辑表单及其组件的属性。 例如,添加组件、删除图像以及指定必填字段。
    • 样式 :允许您设置表单组件外观的样式。 例如,在样式模式下,您可以选择面板并指定其背景颜色。
    • 开发人员 :允许开发人员:
      • 了解表单的组成。
      • 调试发生在何处和何时的情况,这反过来有助于解决问题。
    • 设计 . 允许您启用或禁用自定义组件或未列在提要栏中的现成组件。
  • 预览 :允许您预览表单在发布时的外观。

Component toolbar

选择组件时,您会看到一个工具栏,通过该工具栏可以处理组件。 您可以选择剪切、粘贴、移动和指定组件的属性。 您的选择包括:
A. 配置 :点按配置 ,组件属性显示在提要栏中。 通过配置这些属性,您可以自定义数据捕获体验。 您可以更改组件的元素名称,在组件的标题字段中指定标签文本。 元素名称允许您捕获用户使用组件输入的值。 在组件属性中,您可以指定组件的行为并管理用户输入。 在提要栏中配置属性以捕获用户数据并使用它进行进一步处理。 自适应表单容器的属性允许您指定客户端库、布局、主题、记录文档设置、保存设置、提交设置和元数据设置。
B. 复制 :您可以使用复制选项复制组件并将其粘贴到表单的其他位置。 粘贴组件时,粘贴的组件将获得新元素名称,但保留复制的组件的属性。
C. Cut :您可以使用剪切选项在自适应表单中将组件从一个位置移动到另一个位置。
D.删 :允许您从表单中删除组件。
E.插 :允许您在选定组件上方插入组件。
F.粘 :允许您使用上述选项粘贴您剪切或复制的组件。
G.编 辑规则 :允许您打开规则编辑器。 有关详细信息,请参阅 规则编辑器
H. :如果要剪切、复制或粘贴多个组件,可选择多个组件。
一、 家长 :允许您选择组件的父项。 例如,文本字段位于位于某个部分的子部分内,该子部分位于某个部分内。 该部分位于引导根面板中,自适应表单容器是引导根面板的父项。 对于组件,您可以看到层次结构从底部向上排序的所有选项。
例如,如果点按父 ,您可以看到:
  • 子部分
  • 区域
  • guideRootPanel
  • 自适应表单容器
J.其 :提供更多用于使用选定组件的选项。
  • 视图SOM表达式
  • 将面板另存为片段(仅限面板)
  • 添加子面板(仅限面板)
  • 添加面板工具栏(仅限面板)
  • 替换(不适用于面板)

Adaptive form page

自适应表单页面是实际的表单。 它类似于任何其他建模为WCM组件的WCM cq:Page 页面。 下图显示了典型自适应表单的内容结构。
内容结构通常包含以下主要组件:
  • guideContainer :自适应表单的根,在自适应表单 UI中标记为自 适应表单的开始。 在此组件中,您可以指定:
    • 自适应表单的移动布局 :定义表单在移动设备上的外观。
    • 感谢页面 :定义提交表单后用户被重定向的页面。
    • 提交操作 :定义用户提交表单后在服务器上处理表单的方式。
    • 样式 :指定用于自定义表单外观的CSS文件的路径。
  • rootPanel: 自适应表单的根面板。 它可以在项目节点下包含子面板。 每个包含根面板的面板都可以具有与其关联的布局。 面板的布局指示表单的布局。 例如,在Accordion布局中,其项目布局为Accordion步骤。
  • 工具栏: 自适应表单容器具有关联的全局工具栏,该工具栏对表单是全局的。 可以使用编辑栏中的 添加工具栏 (允许作者添加提交、保存、重置等操作)来添加此工具栏。
  • 资产: 此节点包含用于表单创作的其他信息。 例如,表单模型详细信息、本地化详细信息等)。