表单生成器快速入门指南 creating-an-adaptive-form

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

AEM Forms的表单生成器允许您创建有吸引力、响应式、动态和自适应表单。 无论您是构建专业表单的表单创建者,还是需要快速创建响应式表单,AEM Forms都可以提供用户友好的向导。 该向导具有快速的选项卡导航,可轻松选择预配置的模板、样式、字段和提交选项。

创建自适应表单的向导 {align="center" width="100%"}

在开始之前,了解可使用的表单组件类型:

  • 自适应表单核心组件:这些是标准化的数据捕获组件。对于您的数字注册体验,这些组件可以提供定制功能,缩短开发时间和降低维护成本。开发人员可以轻松地自定义这些组件并设置其样式。您可以访问 https://aemcomponents.dev/ 以查看可用核心组件的实际操作​Adobe 建议使用这些现代的、可扩展组件来开发自适应表单

  • 自适应表单基础组件:这些是经典(旧版)数据捕获组件。您可以继续使用这些组件来编辑您现有的基于基础组件的自适应表单。如果您正在创建新表单,Adobe 建议使用用于创建自适应表单的自适应表单核心组件

使用核心组件创建自适应表单(推荐)

您需要以下项来创建自适应表单:

  • 自适应表单模板:模板提供基本结构并定义自适应表单的外观(版面和样式)。它的预格式化的组件包含某些属性和内容结构。它还提供用于定义主题和提交操作的选项。主题定义外观,提交操作定义在提交自适应表单时执行的操作。例如,将收集到的数据发送到数据源。Cloud Service 提供一个名为 blank 的 OOTB 模板:

  • 自适应表单主题:主题包含组件和面板的样式详细信息。样式包括背景颜色、状态颜色、透明度、对齐方式和大小等属性。在应用主题时,指定的样式会反映在相应的组件上。Canvas 模板包含在每个新的 AEM Forms as a Cloud Service 项目中。

  • 权限:将用户添加到forms-users组。forms-users组的成员具有创建自适应表单的权限。有关特定于表单的用户组的详细列表,请参阅组和权限

创建自适应表单 create-an-adaptive-form-core-components

  1. 登录到 Experience Manager Forms 创作实例。它可以是云实例或本地开发实例。

  2. 在 Experience Manager 登录页面上输入您的凭据。登录后,在左上角选择​Adobe Experience Manager > 表单 > 表单和文档

  3. 选择​创建 > 自适应表单。向导随即打开。在“源”选项卡中,选择一个模板:

    核心组件模板 {align="center" width="100%"}

    选择一个模板时,会自动选择该模板中指定的主题和提交操作,并启用​ 创建 ​按钮。您可以转到​ 样式 ​或​ 提交 ​选项卡以选择不同的主题或提交操作。如果所选模板未指定主题,则“创建”按钮将保持禁用状态。您可以转到​ 样式 ​选项卡以手动选择主题。

    note note
    NOTE
    如果环境中没有​ 自适应表单(核心组件) ​模板,请为您的环境启用自适应表单核心组件。在为您的环境启用核心组件时,会将​ 自适应表单(核心组件) ​模板添加到您的环境。
  4. 在​ 样式 ​选项卡中,选择一个主题:

    • 如果所选模板指定了一个主题,该主题将在向导中自动选定。您还可以从“样式”选项卡中选择其他主题。

    • 如果所选模板未指定主题,您可以使用“样式”选项卡选择主题。创建​按钮仅在选择主题后启用。

  5. (可选)在“数据”选项卡中,选择一个数据模型:

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

    • JSON 架构JSON 架构我们的基于核心组件的自适应表单允许与组织的后端系统无缝集成,并能够与表示正在生成或使用的数据结构的 JSON 架构关联。利用此关联,作者可以使用架构的元素将内容动态添加到自适应表单。在创作过程中,架构的元素可在内容浏览器的数据模型对象选项卡中轻松访问,并且所有字段都会自动添加到任何创建的自适应表单中。

    默认情况下,关联的 JSON 架构的所有字段都将自动选定并转换为相应的自适应表单组件,从而简化创作过程。该向导可让您使用复选框选择性地选定应包含在自适应表单中的字段,更加方便。

  6. 在​ 提交 ​选项卡中,选择提交操作:

    • 选择一个模板时,该模板中指定的提交操作将自动选定。您可以从“提交”选项卡中选择其他提交操作。提交​选项卡显示所有可用的提交操作。

    • 如果所选模板未指定提交操作,您可以使用​ 提交 ​选项卡来选择提交操作

  7. (可选)在​ 交付 ​选项卡中,您可以为自适应表单指定发布或取消发布日期。

  8. 选择​创建。将出现一个对话框,用于指定标题、名称和位置以保存自适应表单:

    • 标题:指定表单的显示名称。标题可帮助您在 Experience Manager Forms 用户界面中标识表单。
    • 名称:​指定表单的名称。在存储库中创建具有指定名称的节点。在开始键入标题时,名称字段的值将自动生成。您可以更改建议的值。名称字段只能包含字母数字字符、连字符和下划线。所有无效的输入都将替换为连字符。
    • 路径:​指定用于保存自适应表单的位置。您可以直接将自适应表单保存在 /content/dam/formsanddocuments,也可以创建一个文件夹(例如 /content/dam/formsanddocuments/adaptiveforms)来保存自适应表单。确保先创建文件夹,然后再在路径中使用它。路径​字段不会自动创建文件夹。
  9. 选择​创建。自适应表单将创建并在自适应表单编辑器中打开。该编辑器显示模板中可用的内容。根据自适应表单的类型,关联 JSON架构或表单数据模型(FDM)中存在的表单元素将显示在侧边栏中​ 内容浏览器 ​的​ 数据模型对象 ​选项卡中。

现在,您可以拖放自适应表单核心组件或架构元素来生成自适应表单。

编辑自适应表单的表单模型属性 edit-form-model-core-components-based-adaptive-forms

  1. 选择自适应表单,然后选择 页面信息 > 打开属性。 这将打开“表单属性”页面。

  2. 转到​ 表单模型 ​选项卡并选择表单模型。如果自适应表单没有表单模型,您可以自由选择JSON架构或表单数据模型(FDM)。 另一方面,如果自适应表单已基于一个表单模型,则可以选择切换到另一个相同类型的表单模型。例如,如果表单使用JSON架构,您可以轻松切换到另一个JSON架构,同样,如果表单使用表单数据模型(FDM),您可以切换到另一个表单数据模型(FDM)。

  3. 选择​ 保存 ​以保存属性。

使用基础组件创建自适应表单

您需要以下项来创建自适应表单:

  • 权限:将用户添加到forms-users,为他们提供创建自适应表单的权限。有关特定于表单的用户组的详细列表,请参阅组和权限

  • 自适应表单主题:主题包含组件和面板的样式详细信息。样式包括背景颜色、状态颜色、透明度、对齐方式和大小等属性。在应用主题时,指定的样式会反映在相应的组件上。您可以创建主题导入现有主题。 您还可以为一些示例主题部署最新原型

  • 自适应表单模板:模板提供基本结构并定义自适应表单的外观(版面和样式)。它的预格式化的组件包含某些属性和内容结构。它还提供用于定义主题和提交操作的选项。主题定义外观,提交操作定义在提交自适应表单时执行的操作。例如,将收集到的数据发送到数据源。Cloud Service 支持两种类型的模板:

    • 可编辑模板:您可以创建导入现有的可编辑模板。 您还可以部署最新原型以获取一些可编辑模板示例。

    • 静态模板:这些是旧版模板,仅建议从 Adobe Managed Services (AMS) 和内部部署 AEM Forms 安装(AEM 6.5 Forms 或更早版本)迁移的客户使用。它们可让您继续使用投资购买的现有静态模板。创建自适应表单时,请使用可编辑的模板。

创建自适应表单 create-an-adaptive-form-foundation-components

  1. 访问 Experience Manager Forms 创作实例。它可以是云实例或本地开发实例。

  2. 在 Experience Manager 登录页面上输入您的凭据。

    登录后,在左上角选择​Adobe Experience Manager > 表单 > 表单和文档

  3. 选择​创建 > 自适应表单。向导随即打开。

  4. 在“源”选项卡中,选择一个模板:

    • 选择一个可编辑模板时,会自动选择该模板中指定的主题和提交操作,并启用​ 创建 ​按钮。您可以转到​ 样式 ​或​ 提交 ​选项卡以选择不同的主题或提交操作。如果所选可编辑模板未指定主题,则“创建”按钮将保持禁用状态。您可以转到​ 样式 ​选项卡以手动选择主题。

      note note
      NOTE
      您还可以使用自适应表单编辑器创建记录文档模板。有关更多信息,请参阅自适应表单编辑器中的记录文档支持
    • 选择静态模板时,数据、样式、提交、交付和预览选项将不可用。创建自适应表单时,建议使用可编辑的模板。

  5. 在​ 样式 ​选项卡中,选择一个主题:

    • 如果所选模板指定了一个主题,该主题将在向导中自动选定。您还可以从“样式”选项卡中选择其他主题。
    • 如果所选模板未指定主题,您可以使用“样式”选项卡选择主题。创建​按钮仅在选择主题后启用。
  6. (可选)在​ 数据 ​选项卡中,选择一个数据模型:

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

    • JSON 架构JSON 架构表示组织中的后端系统生成或使用的数据所在的结构。您可以将架构与自适应表单相关联,并使用其元素将动态内容添加到自适应表单。在创作自适应Forms时,可在内容浏览器的数据模型对象选项卡中使用架构的元素,并且所有字段也已添加到创建的自适应表单。

    默认情况下,将选定数据模型的所有字段。在创建自适应表单时,所有选定的数据模型字段将转换为相应的自适应表单组件。该向导中的复选框可让您仅选择那些应包含在自适应表单中的字段。

  7. 在​ 提交 ​选项卡中,选择提交操作:

    • 选择一个模板时,该模板中指定的提交操作将自动选定。您可以从“提交”选项卡中选择其他提交操作。提交​选项卡显示所有可用的提交操作。

    • 如果所选模板未指定提交操作,您可以使用​ 提交 ​选项卡来选择提交操作

  8. (可选)在“交付”选项卡中,您可以为自适应表单指定发布或取消发布日期。

  9. 选择​创建。将出现一个对话框,用于指定标题、名称和位置以保存自适应表单:

    • 标题:指定表单的显示名称。标题可帮助您在 Experience Manager Forms 用户界面中标识表单。
    • 名称:​指定表单的名称。在存储库中创建具有指定名称的节点。在开始键入标题时,名称字段的值将自动生成。您可以更改建议的值。名称字段只能包含字母数字字符、连字符和下划线。所有无效的输入都将替换为连字符。
    • 路径:​指定用于保存自适应表单的位置。您可以直接将自适应表单保存在 /content/dam/formsanddocuments,也可以创建一个文件夹(例如 /content/dam/formsanddocuments/adaptiveforms)来保存自适应表单。确保先创建文件夹,然后再在路径中使用它。路径​字段不会自动创建文件夹。
  10. 选择​创建。自适应表单将创建并在自适应表单编辑器中打开。该编辑器显示模板中可用的内容。它还会显示侧栏,以根据需要自定义创建的表单。

    根据自适应表单的类型,关联 JSON架构或表单数据模型(FDM)中存在的表单元素将显示在侧边栏中​ 内容浏览器 ​的​ 数据模型对象 ​选项卡中。 您还可以拖放这些元素来生成自适应表单。

编辑自适应表单的表单模型属性 edit-form-model-foundation-components

您可以更改自适应表单的表单模型(基于JSON或表单数据模型(FDM))。 您无法从一种表单模型更改为另一种表单模型。

  1. 选择自适应表单并选择​ 属性 ​图标。

  2. 打开​ 表单模型 ​选项卡并执行下列操作之一。

    • 如果自适应表单没有表单模型,则可以选择其他表单模型,并相应地选择 XML或JSON架构或表单数据模型(FDM)。
    • 如果自适应表单基于表单模型,则可以为同一表单模型选择其他 XML或JSON架构,或者表单数据模型(FDM)。
  3. 选择​ 保存 ​以保存属性。

您还可以从自适应表单生成器或自适应表单模板生成器中修改表单模型属性。

  1. 选择​ 自适应表单容器(根) ​组件。

  2. 单击 配置 图标来打开自适应表单容器的​属性

  3. 选择​ 数据模型 ​选项卡并执行下列操作之一:

    • 如果自适应表单没有表单模型,则可以选择表单模型,并相应地选择 XML或JSON架构或表单数据模型(FDM)。
    • 如果自适应表单基于表单模型,则无法更改表单模型。您可以为适用的相同表单模型选择其他 XML或JSON架构,或者选择表单数据模型(FDM)。
  4. 选择 保存 以保存属性。

FDM-Schema-Support {align="center" width="100%"}

note note
NOTE
您还可以将自适应表单另存为模板。有关更多信息,请参阅使用自适应表单创建模板

后续步骤

recommendation-more-help
fbcff2a9-b6fe-4574-b04a-21e75df764ab