自适应表单核心组件 adaptive-forms-core-components-introduction

使用Adobe Experience Manager中的自适应Forms核心组件,您可以创建引人入胜的注册体验。

核心组件 overview

在 Adobe Experience Manager (AEM) 中,组件是用于创建页面和表单的构建基块。它们使作者能够通过一种简单而强大的方式创建和管理内容,并为开发人员提供了创建自定义组件所需的灵活性和可扩展性。它们旨在加快开发时间并降低网站和表单的维护成本,其操作灵活并且可以轻松定制,以满足网站和表单的特定需求。

此外,核心组件经过设计,具有响应能力并支持一系列广泛的设备,包括台式机、平板电脑和智能手机。它们还遵循最新的 Web 标准和最佳实践,这使其成为用于创建 Web 内容的强大且可靠的解决方案。

总的来说,核心组件是用于在 AEM 中创建和管理 Web 内容的重要工具,它提供了强大而灵活的解决方案,可帮助减少开发时间和维护成本,同时还为网站访客提供出色的用户体验。

自适应表单核心组件

自适应表单核心组件是一组(29 个)开源且与 BEM 兼容的组件,它们基于 Adobe Experience Manager WCM 核心组件而构建。它们专门设计用于创建自适应表单,后者是能够适应用户的设备、浏览器和屏幕大小的表单。

利用这些组件,可提供一系列广泛的表单字段选项(包括文本字段、复选框、下拉菜单等)来创建卓越的数据捕获和注册体验。它们还包括验证、条件逻辑和响应式设计等功能,可用于创建用户友好且易用的表单。

此外,由于这些组件是开源的,因此,开发人员能够轻松定制和扩展组件以满足其组织的特定需求。而且,这些组件是基于BEM方法构建的,这确保了它们的可扩展性和可维护性。

自适应表单图像

功能 features

可以即刻投入使用
自适应表单核心组件是 24 个功能强大的 WCM 组件。
云就绪
可用于 AEM Formsas a Cloud Service.
可以通用
这些组件代表了表单作者可用来设计几乎任何布局的通用概念。
可配置
模板级内容策略定义了可以使用或无法使用的功能。
可访问
它们提供ARIA标签,支持键盘导航和屏幕阅读器等辅助技术的文本。
可主题化
这些组件实施样式系统,且标记遵循 BEM CSS 约定
可自定义
可利用几种模式来轻松进行自定义设置(从调整 HTML 到高级功能重用)。
版本控制
版本控制策略可确保核心组件在改进可能影响您的内容时不会中断您的网站。
开源
如果有出错的地方,请做出您的改进。

好处 benefits

数据捕获体验对于商机开发和注册至关重要,自适应表单核心组件提供了功能强大的解决方案来创建针对数据捕获优化的表单。使用核心组件在基础组件上创建这些体验的一些益处包括:

  • 在GitHub上可用:AEM自适应Forms核心组件是开源的,在GitHub上提供,同时还提供了全面的文档。 这使开发人员能够更容易理解相关组件及其工作方式,并为其开发做出贡献。Aemcomponents.dev 网站也是一项宝贵的资源,开发人员可以在其中查看正在运行的组件并访问详细的文档。

  • 样式的BEM模型:核心组件遵循BEM(块元素修饰符)模型来设置样式,这是一种用于组织CSS的公认且广泛使用的方法。 这使开发人员更容易理解相关样式的组织方式,以及如何修改它们,以满足其特定需求。

  • 不依赖第三方库:核心组件的优势之一是它们不依赖于第三方 JavaScript 库,包括 JQuery 和 Underscore。这使得组件能够更快、更轻巧,并且更容易集成到现有的 AEM 实施中。

  • 专注于性能和可访问性:核心组件在构建时考虑到了性能和可访问性,这反映在其较高的 Google Lighthouse 和 Web Vitals 得分中。这使开发人员可以更轻松地创建可访问且高性能的网页,而这在当今的数字环境中越来越重要。

  • Sites 30 模板和主题中的表单组件:核心组件为 Sites 30 模板和主题中的表单组件提供支持,使开发人员可以更轻松地在 AEM 中创建和自定义表单。

  • 样式更简单:核心组件的样式比对应的基础组件样式更简单。 主题创建过程类似于 Sites,并且能够从父 Sites 页面继承相同的主题/CSS。此外,用于样式的 BEM 模型使理解和修改各个样式变得更加容易。

  • 辅助功能:自适应Forms核心组件支持无障碍标准和准则,以确保残障人士可以使用表单,包括使用屏幕阅读器等辅助技术的残障人士。

  • 版本控制:您可以创建和管理基于核心组件的自适应Forms的多个版本,通过注释参与协作讨论,并将注释附加到特定表单组件,从而增强整体表单构建体验。

比较核心组件、基础组件和表单块组件 components

当前版本的AEM具有以下核心组件, 基础组件、和 表单块组件(Edge Delivery Services).

组件
基础组件
核心组件
表单块组件
附加信息
Adobe Sign Block
✔️
Adobe Sign集成 仅适用于Foundation组件。
可折叠项
✔️
✔️
对于基础组件,您可以在以下位置配置折叠面板布局: 面板组件属性.
自适应表单片段
✔️
✔️
对于基础组件,您可以 添加片段 资产浏览器中的。
自适应表单 reCAPTCHA
✔️
✔️
✔️
对于基础组件,请使用Captcha组件执行以下操作 将Google reCaptcha添加到表单.
按钮
✔️
✔️
✔️
验证码
✔️
对于基础组件,请使用Captcha组件执行以下操作 将Google reCaptcha添加到表单.
图表
✔️
复选框
✔️
✔️
复选框组
✔️
✔️
✔️
对于基础组件,使用复选框组件添加多个复选框
数据输入字段
✔️
对于核心组件,请使用 日期选取器 组件。 您还可以添加单独的 文本框数值框 用于捕获日、月和年的组件。
日期选取器
✔️
✔️
✔️
下拉列表
✔️
✔️
✔️
电子邮件
✔️
✔️
✔️
文件附件
✔️
✔️
✔️
文件附件列表
✔️
页脚
✔️
✔️
✔️
脚注占位符
✔️
表单容器
✔️
✔️
✔️
对于基础组件,请使用 根面板组件.
表单标题
✔️
✔️
对于基础组件,请使用标题组件。
页眉
✔️
✔️
✔️
水平选项卡
✔️
✔️
对于基础组件,您可以配置 选项卡位于顶部(水平选项卡)布局 在面板组件属性中。
图像
✔️
✔️
✔️
图像选择
✔️
“下一个”按钮
✔️
✔️
使用 向导组件 “下一个”和“上一个”按钮在多个面板之间移动。
数值框
✔️
✔️
✔️
数值步进器
✔️
面板
✔️
✔️
✔️
密码框
✔️
✔️
电话
✔️
✔️
✔️
“上一个”按钮
✔️
使用 向导组件 “下一个”和“上一个”按钮在多个面板之间移动。
单选按钮
✔️
✔️
单选按钮群组
✔️
“重置”按钮
✔️
✔️
✔️
潦草签名
✔️
分隔符
✔️
“提交”按钮
✔️
✔️
✔️
摘要步骤
✔️
开关
✔️
✔️
✔️
条款和条件
✔️
✔️
文本
✔️
✔️
✔️
文本框
✔️
✔️
✔️
标题
✔️
对于核心组件,请使用 表单标题 组件。
垂直选项卡
✔️
✔️
对于基础组件,您可以配置 左侧选项卡(垂直选项卡)布局 在面板组件属性中
向导
✔️
✔️
✔️
对于基础组件,您可以配置 向导布局 在面板组件属性中
NOTE
  • 除了上面列出的组件之外,Forms块还支持所有有效的 HTML5输入类型文本区域 作为组件。
  • 是否需要上面未列出的组件? 请在您的官方地址发电子邮件至aem-forms-ea@adobe.com请求帮助。

易于使用的表单编辑器

基于核心组件的自适应Forms的编辑器与已用于创建AEM Sites页面的编辑器类似。 以下是您获得的内容:

  • 熟悉的UI元素和设置:配置表单组件的属性时,您会看到一个属性对话框,与您用于WCM核心组件的属性对话框类似。 这可以让您更快地找到所需的选项。 与WCM核心组件一样,对于表单组件,“属性”对话框显示在编辑器的中心,其中明确的制表符分隔基本和高级选项、帮助文本和可访问性信息 — 所有这些都以制表符格式显示,以便轻松导航。

  • 规则编辑器:您可以向表单添加逻辑和动态功能,而无需编写代码。 您可以使用内置规则编辑器执行以下操作:

    • 根据用户选择显示或隐藏字段
    • 启用或禁用对象
    • 设置对象的值
    • 执行计算
    • 设置对象的属性
    • 验证数据输入
    • 调用服务(调用外部功能)
    • 使用内置函数(常见任务的预定义函数)
    • 使用自定义函数(针对特定需求使用您自己的代码)
    • 验证字段和面板(确保数据符合要求)
    • 验证对象的值
    • 执行函数以计算对象的值
    • 调用表单数据模型(FDM)服务并执行操作
    • 动态添加样式(根据条件更改外观)
    • 创建其他规则(链操作和逻辑)
    • 等等!

    规则编辑器没有代码编辑器。 您可以使用 自定义函数 将您自己的代码添加到规则编辑器中,以满足特定需求。

  • 预填表单:当用户打开表单时,您可以使用现有数据自动填充该表单中的某些字段。 这无需手动输入可能已经可用的信息,从而节省了用户的时间和精力。 核心组件编辑器提供OOTB预填充服务,以通过表单数据模型帮助填充表单字段。 您还可以为更复杂的方案创建自定义预填充服务。

  • 记录文档(DoR):记录文档(DoR)是指通过表单提交的数据的正式可打印表示形式。 它用作用户输入信息的永久记录,以用户友好的格式(通常为PDF文档)提供提交数据的快照。 您可以使用编辑器轻松配置自定义模板或使用OOTB模板生成DoR。

  • 表单数据模型:自适应Forms数据模型(FDM)充当自适应Forms与数据源之间的桥梁。 它主要定义表单所收集并与之交互的数据的结构和组织。 您可以使用编辑器轻松地将表单与Forms数据模型(FDM)连接。

  • 表单提交:表单提交是指用户填写并发送表单的过程。 这会触发在表单配置中定义的一系列操作,最终导致存储或处理提交的数据。 自适应Forms编辑器提供了多种用于配置表单提交的选项。 一些常见的提交操作包括:

  • 站点页面编辑器中的自适应Forms核心组件:您可以在AEM页面编辑器和AEM体验片段中启用和使用自适应Forms核心组件,以便在构建Sites页面的同时直接创建数据捕获体验。

    embed

    https://video.tv.adobe.com/v/3419284?quality=12&learn=on

启用自适应Forms核心组件

通过在 AEM Forms as a Cloud Service 上启用自适应表单核心组件,您可以使用 AEM Forms Cloud Service 实例为多个渠道创建、发布和投放基于核心组件的自适应表单和 Headless 表单。有关启用自适应表单核心组件的详细说明,请参阅在 AEM Forms as a Cloud Service 和本地开发环境上启用自适应表单核心组件

自适应表单核心组件具有以下要求。

AEM 版本
AEM Forms 附加组件
自适应表单核心组件
AEM as a Cloud Service
表单 - 数字注册
版本 2.0.10 以上
AEM 6.5
Forms 附加组件
版本 1.1.12 以上

如果您的 AEM Cloud Service SDK 版本低于 2023.02.0,请确保在您的环境上启用 prerelease 标志,因为自适应表单核心组件是低于 2023.02.0 版本的预发行版本的一部分。

创建基于核心组件的自适应表单

您可以在 AEM Forms as a Cloud Service 或 AEM 6.5 Forms 环境中执行以下操作:

操作
AEM Forms 版本
创建独立的自适应表单
AEM Forms as Cloud Service
在 AEM Sites 页面中创建自适应表单
AEM 6.5 FormsAEM Forms as Cloud Service
在 AEM 体验片段中创建自适应表单
AEM 6.5 FormsAEM Forms as Cloud Service
将自适应表单转换为体验片段
AEM 6.5 FormsAEM Forms as Cloud Service
recommendation-more-help
d2be9096-a81e-404b-9952-d8925af7219c