创建基于核心组件的自适应Forms creating-an-adaptive-form-core-components

Last update: Mon Jul 15 2024 00:00:00 GMT+0000 (Coordinated Universal Time)

主题：

创建对象：

管理员
开发人员

Adobe 建议使用核心组件将自适应表单添加到 AEM Sites 页面或创建独立的自适应表单。

版本

文章链接

AEM as a Cloud Service

单击此处

AEM 6.5

本文

自适应表单使您能够创建引人入胜、响应式、动态和自适应的表单。AEM Forms为商业用户提供了友好的UI，以便快速创建自适应Forms。用户界面提供快速的选项卡导航，以轻松选择预配置的模板、样式、字段和提交选项以创建自适应表单。

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

自适应表单核心组件：这些是标准化的数据捕获组件。对于您的数字注册体验，这些组件可以提供定制功能，缩短开发时间和降低维护成本。开发人员可以轻松地自定义这些组件并设置其样式。Adobe建议使用这些现代化的、可扩展的组件来开发自适应Forms。
自适应表单基础组件：这些是经典（旧版）数据捕获组件。您可以继续使用这些组件来编辑您现有的基于基础组件的自适应表单。如果您正在创建表单，Adobe建议使用自适应Forms核心组件创建自适应Forms。

先决条件

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

为您的环境启用自适应Forms核心组件：需要AEM Archetype项目版本41或更高版本，才能为您的环境启用核心组件。在为您的环境启用核心组件时，会将 自适应Forms （核心组件） 模板和画布主题添加到您的环境中。

自适应表单模板：模板提供基本结构并定义自适应表单的外观（版面和样式）。它的预格式化的组件包含某些属性和内容结构。它还提供用于定义主题和提交操作的选项。主题定义外观，提交操作定义在提交自适应表单时执行的操作。您还可以将示例模板部署到您的环境。这些功能可帮助您迅速创建表单。

note note
NOTE
如果环境中没有自适应表单（核心组件）模板，请为您的环境启用自适应表单核心组件。在为您的环境启用核心组件时，会将自适应表单（核心组件）模板添加到您的环境。

自适应表单主题：主题包含组件和面板的样式详细信息。样式包括背景颜色、状态颜色、透明度、对齐方式和大小等属性。在应用主题时，指定的样式会反映在相应的组件上。在为环境启用核心组件时，默认会添加Canvas主题。您可以下载并自定义标准主题。对于现成的主题，您可以将示例主题部署到您的环境。这些功能可帮助您开始设计表单的样式，并提供一个基础结构，以根据业务需求创建或自定义主题。
权限：将用户添加到forms-users组。forms-users组的成员具有创建自适应表单的权限。有关特定于表单的用户组的详细列表，请参阅组和权限。

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

登录到本地AEM创作实例。
在 Experience Manager 登录页面上输入您的凭据。登录后，在左上角选择 Adobe Experience Manager > Forms > Forms和文档。
选择创建 > 创建自适应Forms。
选择自适应Forms核心组件模板，然后单击 下一步。
出现 添加属性。指定以下属性字段的值。标题和名称字段是必填字段：
- 标题： 指定表单的显示名称。标题可帮助您在 Experience Manager Forms 用户界面中标识表单。
- 名称： 指定表单的名称。在存储库中创建具有指定名称的节点。在开始键入标题时，名称字段的值将自动生成。您可以更改建议的值。名称字段只能包含字母数字字符、连字符和下划线。
- 描述： 指定有关表单的详细信息。
- 主题客户端库： 指定自适应表单的主题。默认情况下，选择adaptiveform.theme.canvas3主题。您还可以从 主题客户端库 下拉菜单中选择其他主题。
- 配置容器： 定义存储自适应Forms配置文件的位置。这些配置文件包含与自适应Forms的行为和外观相关的设置和属性。
- 标记： 指定用于唯一标识自适应表单的标记。标记有助于搜索表单。要创建标记，请在标记框中键入新标记名称。
选择创建。创建自适应表单，并显示用于打开表单进行编辑的对话框。
选择编辑以在新选项卡中打开新创建的表单。将打开表单进行编辑，并显示模板中的可用内容。它还会显示用于自定义新创建表单的边栏。

使用自适应Forms核心组件创建表单

打开表单进行编辑后，您可以使用可用的自适应Forms核心组件将表单字段添加到表单。您可以拖放或使用+ [插入组件]选项将这些组件添加到表单中。请参阅AEM核心组件文档，了解可用的自适应Forms核心组件。您还可以访问https://aemcomponents.dev/以查看正在运行的可用核心组件。

配置自适应表单的提交操作 configure-submit-action-for-form

提交操作允许您选择通过自适应表单捕获的数据的目标。当用户单击自适应表单上的提交按钮时，会触发该事件。自适应表单包括一些现成的提交操作。您还可以扩展默认提交操作以创建自己的自定义提交操作。要为表单配置提交操作，请执行以下操作：

打开内容浏览器，然后选择自适应表单的 指南容器 组件。
单击指南容器属性图标。这将打开“自适应表单容器”对话框。
单击提交选项卡。
根据要求选择并配置 提交操作。有关提交操作的详细信息，请参阅自适应表单提交操作

将用户重定向到页面或在提交表单时显示感谢消息

在提交表单时，您可以将用户重定向到其他网页或消息。要重定向用户或配置感谢消息，请执行以下操作：

打开内容浏览器，然后选择自适应表单的 指南容器 组件。
单击指南容器属性图标。这将打开“自适应表单容器”对话框。
打开提交选项卡。
- 要配置重定向URL，请在提交选项中，选择 重定向到URL 选项，然后浏览并选择AEM Sites页面或提供外部页面的URL。
- 要配置自定义或感谢消息，请在“提交”选项中选择 显示消息 选项，然后在 消息内容 框中提供消息。它是一个富文本框，您可以使用全屏选项查看所有可用的富文本项。

为自适应表单配置架构或表单数据模型 configure-schema-or-data-model-for-form

您可以使用表单数据模型将表单连接到数据源，以根据用户操作来发送和接收数据。您还可以将表单连接到 JSON 架构，以接收预定义格式的提交数据。根据要求，将表单连接到 JSON 架构或表单数据模型：

为表单配置JSON架构或表单数据模型

要为表单配置JSON架构或表单数据模型，请执行以下操作：

打开内容浏览器，然后选择自适应表单的 指南容器 组件。
单击指南容器属性图标。这将打开“自适应表单容器”对话框。
打开 数据模型 选项卡。
根据您的要求，选择并配置JSON架构或表单数据模型：
- 选择 表单模型 选项时，请使用 选择表单数据模型 选项来选择预配置的表单数据模型。
- 选择架构选项时，请使用架构选项为您的表单选择JSON架构。
单击完成。