使用React应用程序创建和预览Headless表单 introduction

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

主题：
自适应表单

创建对象：

初学者
中级
管理员
开发人员

入门套件可帮助您快速入门，使用React应用程序。您可以在自己选择的Angular、Vanilla JS和其他开发环境中自由开发和使用Headless自适应表单。

从Headless自适应表单开始使用非常简单快捷。克隆现成的React项目，安装依赖项，然后运行该项目。您已将一个Headless自适应表单集成在React应用程序中并正在运行。您可以在将Headless自适应表单部署到生产环境之前，使用示例react项目来构建和测试该表单。

让我们开始吧：

NOTE

本快速入门指南使用React应用程序。您可以自由使用所选的技术或编程语言来使用Headless自适应表单。

开始之前 pre-requisites

要创建并运行React应用程序，您应在计算机上安装以下组件：

安装最新版本的Git。如果您是初次使用Git，请参阅安装Git。
安装Node.js 16.13.0或更高版本。如果您是初次使用Node.js，请参阅如何安装Node.js。

开始使用

满足要求后，请执行以下步骤以开始：

设置Headless自适应表单入门工具包
预览入门套件中包含的Headless自适应表单
创建和渲染您自己的Headless自适应表单

1.设置Headless自适应表单入门工具包 install

入门套件是一个React应用程序，其中包含示例Headless自适应表单和相应的库。使用该套件开发和测试Headless自适应表单和相应的React组件。运行以下命令以设置Headless自适应表单入门工具包：

打开命令提示符并运行以下命令：

code language-shell
`git clone https://github.com/adobe/react-starter-kit-aem-headless-forms`

该命令在当前位置创建一个名为 react-starter-kit-aem-headless-forms 的目录，并将Headless自适应表单React入门应用程序克隆到该目录中。除了呈现表单所需的配置和依赖项列表之外，该目录还包含以下重要内容：

示例表单：入门套件包含示例贷款申请表。要查看应用程序包含的表单（表单定义），请打开/react-starter-kit-aem-headless-forms/form-definations/form-model.json文件。
示例react组件：入门套件包括RTF和Slider的示例react组件。本指南可帮助您使用这些富文本和滑块组件创建自己的自定义组件。
Mappings.ts： mappings.ts文件可帮助您将自定义组件映射到表单字段。例如，将数值步进器字段映射到评级组件。
环境配置：环境配置允许您选择呈现入门套件中包含的表单或从AEM Forms服务器获取表单。

note note
NOTE
文档中的示例基于VSCode。您可以随意使用任何纯文本代码编辑器。

导航到 react-starter-kit-aem-headless-forms 目录并运行以下命令以安装依赖项：

code language-shell
`npm install`

该命令会下载运行和构建应用程序所需的所有必要包和库，例如Headless自适应表单
库(@aemforms/af-react-renderer、@aemforms/af-react-components、@adobe/react-spectrum)，运行验证并保留表单实例的数据。

2.预览Headless自适应表单 preview

设置入门套件后，您可以预览示例Headless自适应表单，将其替换为您自己的自定义表单。您还可以配置入门工具包，以从AEM Forms服务器中检索表单。预览表单

将env_template文件重命名为.env文件。此外，还要确保USE_LOCAL_JSON选项设置为true。

使用以下命令运行应用程序：

code language-shell
`npm start`

此命令启动本地开发服务器，并在默认Web浏览器中打开启动应用程序中包含的示例Headless自适应表单。

示例Headless表单

看！您已准备好开始开发自定义Headless自适应表单。

3.创建和渲染您自己的Headless自适应表单 custom

Headless自适应表单以JSON(JavaScript对象表示法)格式表示表单及其组件，例如字段和按钮。使用JSON格式的优点在于它易于被各种编程语言解析和使用，使其成为系统之间交换表单数据的便利方式。要查看应用程序中包含的Headless自适应表单示例，请打开/react-starter-kit-aem-headless-forms/form-definations/form-model.json文件。

让我们创建一个包含四个字段的联系我们表单：“姓名”、“电子邮件”、“联系电话”和“消息”。这些字段被定义为JSON中的对象（项目），每个对象（项目）均具有类型、标签、名称和必填等属性。表单还有“提交”类型的按钮。以下是表单的JSON。

{
  "afModelDefinition": {
    "adaptiveform": "0.10.0",
    "items": [
      {
        "fieldType": "text-input",
        "label": {
          "value": "Name"
        },
        "name": "name"
      },
      {
        "fieldType": "text-input",
        "format": "email",
        "label": {
          "value": "Email"
        },
        "name": "email"
      },
      {
        "fieldType": "text-input",
        "format": "phone",
        "pattern": "[0-9]{10}",
        "label": {
          "value": "Contact Number"
        },
        "name": "Phone"
      },
      {
        "fieldType": "multiline-input",
        "label": {
          "value":"Message"
        },
        "name": "message"
      },
      {
        "fieldType": "button",
        "label":{
          "value": "Submit"
        },
        "name":"submit",
        "events":{
          "click": "submitForm()"
        }
      }
    ],
    "action": "https://eozrmb1rwsmofct.m.pipedream.net",
    "description": "Contact Us",
    "title": "Contact Us",
    "metadata": {
      "grammar": "json-formula-1.0.0",
      "version": "1.0.0"
    }
  }
}

NOTE

仅React应用程序需要“afModelDefinition”属性，该属性不是表单定义的一部分。
您可以手工创建表单JSON或使用AEM自适应表单编辑器（自适应表单WYSIWYG编辑器）创建和提交表单JSON。在生产环境中，您可以使用AEM Forms来交付表单JSON，稍后将对此进行详细介绍。
本教程使用https://pipedream.com/来测试表单提交。使用您自己的端点或组织批准的第三方端点从Headless自适应表单接收数据。

要渲染表单，请使用上述JSON替换示例Headless自适应表单JSON /react-starter-kit-aem-headless-forms/form-definations/form-model.json，保存文件，等待starter-kit编译并刷新表单。

将示例Headless自适应表单JSON 替换为自定义Headless自适应表单JSON