使用 Adaptive Forms Block 创建表单
AEM Forms Edge Delivery 提供了一个称为 Adaptive Forms Block 的区块,可帮助您轻松创建表单,以捕获和存储捕获的数据。您可以创建一个预先配置了 Adaptive Forms Block 的新 AEM 项目或将 Adaptive Forms Block 添加到现有的 AEM 项目。
这些表单可将数据直接提交到 Microsoft Excel 或 Google Sheets 文件,使您能够使用 Google Sheets、Microsoft Excel 和 Microsoft SharePoint 充满活力的生态系统和强大的 API 来轻松处理提交的数据或启动现有的业务工作流程。
先决条件
在开始之前,请确保您已完成以下步骤:
- 使用 AEM Forms 样板设置 AEM 项目或将 Adaptive Forms Block 添加到现有 AEM 项目并克隆本地计算机上相应的 GitHub 存储库。在本文档中,Edge Delivery Services (EDS) 项目的本地文件夹称为
[EDS Project repository]
。 - 确保您有权访问 Google Sheets 或 Microsoft SharePoint。要将 Microsoft SharePoint 设置为您的内容源,请参阅如何使用 SharePoint
创建表单
使用电子表格可以轻松地制作表单,而无需执行复杂的流程。您可以定义构成表单结构的行和列。每行代表一个单独的表单字段,列标题定义相应的字段属性。
例如,请考虑以下电子表格,其中行概述了 enquiry
表单的字段,列标题则定义其属性:
要继续创建表单:
-
访问 Microsoft SharePoint 或 Google Drive 上的 AEM Edge Delivery 项目文件夹。
-
在 AEM Edge Delivery 项目目录中的任意位置创建一份 Microsoft Excel 工作簿或 Google 工作表。例如,在 Google Drive 上的 AEM Edge Delivery 项目目录中创建一个名为
enquiry
的电子表格。 -
确保根据为项目指定的配置,与适当的 AEM 用户(例如
helix@adobe.com
)共享表。授予用户编辑表的权限。 -
打开创建的电子表格并将默认表重命名为“shared-default”。
-
要添加表单字段,请将行和列标题插入“shared-default”表中。每行应该代表一个表单字段,列标题定义相应的字段属性。
为了快速开始,请考虑复制查询电子表格中的内容到电子表格中。复制内容后,保存电子表格。
embed -
使用 AEM Sidekick 预览表。
预览时,新的浏览器选项卡会以 JSON 格式显示工作表的内容。确保捕获预览 URL,因为这是在下一节中渲染表单所必需的。URL 格式如下所示:
code language-json https://<branch>--<repository>--<owner>.hlx.live/<form-path>/<form-file-name>.json
<branch>
指 GitHub 存储库的分支。<repository>
表示您的 GitHub 存储库。<owner>
指托管您 GitHub 存储库的 GitHub 帐户用户名。
例如,如果您的项目存储库名为“portal”,位于帐户“wkndforms”下,并且您使用的是“main”分支,则 URL 如下所示:
https://main--portal--wkndforms.hlx.page/enquiry.json
到目前为止,您已经准备好了表单的结构。现在,要预览表单,请执行以下操作:
-
打开您的 Microsoft SharePoint 或 Google Drive 帐户,并导航至 AEM Edge Delivery 项目目录。
-
打开文档文件(例如索引文件)以嵌入表单。或者,您可以创建一个新文档。
-
移至文档中要添加表单的所需位置。
-
创建表单区块来呈现表单。选择“插入”>“表格”,然后创建一个一列两行的表格。将表命名为“表单”并将预览 URL 粘贴到第二行中。确保 URL 的格式为超链接,而不是纯文本,如下所示:
table 0-row-1 1-row-1 表单 https://main–wefinance–wkndforms.hlx.live/enquiry.json 该区块用作嵌入表单的占位符。在该区块的第二行中,添加
<form>.json
文件的预览 URL 作为超链接。note important IMPORTANT 确保 URL 的格式为超链接,而不是显示为纯文本。 -
使用 AEM Sidekick 预览文档。页面现在显示表单。例如,以下是基于查询电子表格的表单:
现在,填写该表单并单击提交按钮,您会遇到类似于以下内容的错误,因为该电子表格尚未设置为接受数据。