创建自适应Forms（核心组件）的自定义提交操作

Last update: Mon Nov 04 2024 00:00:00 GMT+0000 (Coordinated Universal Time)

创建对象：

中级
用户
开发人员

提交操作允许用户为从表单捕获的数据选择目标，并定义要在表单提交上执行的附加功能。 AEM表单支持多个现成提交操作(OOTB)，例如发送电子邮件或将数据保存到SharePoint或OneDrive。

您还可以创建自定义提交操作以添加现成选项中未包含的功能。例如，将表单数据与第三方应用程序集成或根据用户输入触发个性化短信通知。

先决条件

在开始为自适应Forms创建第一个自定义提交操作之前，请确保您满足以下条件：

纯文本编辑器(IDE)：虽然任何纯文本编辑器都可以工作，但诸如Microsoft Visual Studio Code之类的集成开发环境(IDE)可提供高级功能，以便于编辑。
Git：管理代码更改需要此版本控制系统。如果未安装，请从https://git-scm.com下载。

为表单创建您的第一个自定义提交操作

下图描述了为自适应表单创建自定义提交操作的步骤：

自定义提交操作工作流 {width="50%，"}

克隆AEM as a Cloud Service Git存储库。

打开命令行并选择要存储AEM as a Cloud Service存储库的目录，如/cloud-service-repository/。

运行以下命令以克隆存储库：

code language-none
`git clone https://git.cloudmanager.adobe.com/<organization-name>/<app-id>/`

在何处查找此信息？

有关查找这些详细信息的逐步说明，请参阅Adobe Experience League文章“访问Git”。

您的项目已准备就绪！

当命令成功完成时，您会看到在本地目录中创建了一个新文件夹。此文件夹以您的应用程序（例如，app-id）命名。此文件夹包含从AEM as a Cloud Service Git存储库下载的所有文件和代码。您可以在archetype.properties文件中找到AEM项目的<appid>。

原型属性

在本指南中，我们将此文件夹称为[AEMaaCS project directory]。

添加新提交操作

在编辑器中打开存储库文件夹。

导航到[AEMaaCS project directory]中的以下目录：

code language-none
`/ui.apps/src/main/content/jcr_root/apps/<app-id>/`

重要信息：将<app-id>替换为您的实际应用程序ID。

为自定义提交操作创建新文件夹，并为它指定您选择的名称。例如，将文件夹命名为customsubmitaction。
导航到添加的自定义提交操作目录。

在您的[AEMaaCS project directory]中，导航到以下路径：

/ui.apps/src/main/content/jcr_root/apps/<app-id>/customsubmitaction/

Important：替换 <app-id> 以及实际的应用程序ID。
创建新的配置文件。
在customsubmitaction文件夹中，创建一个名为.content.xml的新文件。

打开此文件并粘贴以下内容，将[customsubmitaction]替换为提交操作的名称

code language-none

code language-none
`<?xml version="1.0" encoding="UTF-8"?> <jcr:root xmlns:jcr="http://www.jcp.org/jcr/1.0" xmlns:sling="http://sling.apache.org/jcr/sling/1.0" jcr:description="[customsubmitaction]" jcr:primaryType="sling:Folder" guideComponentType="fd/af/components/guidesubmittype" guideDataModel="basic,xfa,xsd" submitService="[customsubmitaction]"/>`

<?xml version="1.0" encoding="UTF-8"?>
<jcr:root xmlns:jcr="http://www.jcp.org/jcr/1.0" xmlns:sling="http://sling.apache.org/jcr/sling/1.0"
jcr:description="[customsubmitaction]"
jcr:primaryType="sling:Folder"

guideComponentType="fd/af/components/guidesubmittype"
guideDataModel="basic,xfa,xsd"
submitService="[customsubmitaction]"/>

例如，将[customsubmitaction]替换为您自定义的提交操作名称Custom Submit Action。

创建自定义提交操作配置文件

note note
NOTE
记住[customsubmitaction]的名称，因为在创作表单时，`Submit action`下拉列表中会显示相同的名称。

在filter.xml 中包含新文件夹

导航到[AEMaaCS项目目录]中的/ui.apps/src/main/content/META-INF/vault/filter.xml文件。

打开文件，并在末尾添加以下行：

code language-none
`<filter root="/apps/<app-id>/[customsubmitaction-folder]"/>`

例如，添加以下代码行以在filter.xml文件中添加customsubmitaction文件夹：

code language-none
`<filter root="/apps/wknd/customsubmitaction"/>`

在filter.xml中添加已创建的文件夹

保存更改。

为添加的提交操作实施服务。

导航到[AEMaaCS project directory]中的以下目录：
/core/src/main/java/com/<app-id>/core/service/
Important：替换 <app-id> 以及实际的应用程序ID。
创建新的Java文件以便为添加的提交操作实施服务。例如，添加新的Java文件作为CustomSubmitService.java。

打开此文件并添加用于自定义提交操作实施的代码。

例如，以下Java代码是一个OSGi服务，它通过记录提交的数据来处理表单提交并返回状态OK。在CustomSubmitService.java文件中添加以下代码：

code language-none

code language-none
package com.wknd.core.service; import com.adobe.aemds.guide.model.FormSubmitInfo; import com.adobe.aemds.guide.service.FormSubmitActionService; import java.util.HashMap; import java.util.Map; import org.osgi.service.component.annotations.Component; import org.slf4j.Logger; import org.slf4j.LoggerFactory; @Component( service = FormSubmitActionService.class, immediate = true ) public class CustomSubmitService implements FormSubmitActionService { private static final String serviceName = "Custom Submit Action"; private static Logger log = LoggerFactory.getLogger(CustomSubmitService.class); @Override public String getServiceName() { return serviceName; } @Override public Map<String, Object> submit(FormSubmitInfo formSubmitInfo) { String data = formSubmitInfo.getData(); log.info("Using custom submit action service, [data] --> " + data); Map<String, Object> result = new HashMap<>(); result.put("status", "OK"); return result; } }

package com.wknd.core.service;

import com.adobe.aemds.guide.model.FormSubmitInfo;
import com.adobe.aemds.guide.service.FormSubmitActionService;
import java.util.HashMap;
import java.util.Map;
import org.osgi.service.component.annotations.Component;
import org.slf4j.Logger;
import org.slf4j.LoggerFactory;

    @Component(
    service = FormSubmitActionService.class,
    immediate = true
        )
    public class CustomSubmitService implements FormSubmitActionService {

    private static final String serviceName = "Custom Submit Action";

    private static Logger log = LoggerFactory.getLogger(CustomSubmitService.class);

    @Override
    public String getServiceName() {
    return serviceName;
    }

    @Override
    public Map<String, Object> submit(FormSubmitInfo formSubmitInfo) {
    String data = formSubmitInfo.getData();
    log.info("Using custom submit action service, [data] --> " + data);
    Map<String, Object> result = new HashMap<>();
    result.put("status", "OK");
    return result;
     }
    }

自定义提交操作服务

保存更改。

部署代码。

为本地开发环境部署代码

将AEM as a Cloud Service [AEMaaCS project directory]部署到本地开发环境，以尝试在本地计算机上执行新的提交操作。要部署到本地开发环境，请执行以下操作：

确保您的本地开发环境已启动并正在运行。如果尚未设置本地开发环境，请参阅为AEM Forms设置本地开发环境指南。
打开终端窗口或命令提示符。
导航到[AEMaaCS project directory]。

运行以下命令：

code language-none
`mvn -PautoInstallPackage clean install`

本地部署

部署Cloud Service环境的代码

将AEM as a Cloud Service [AEMaaCS project directory]部署到您的Cloud Service环境。要部署到Cloud Service环境，请执行以下操作：
1. 提交更改：
  
  添加新的自定义提交操作配置后，使用清除的Git消息提交更改。（例如，“添加了新自定义提交操作”）。
2. 部署更新的代码：
  
  通过现有的全栈管道触发代码部署。它通过新的自定义提交操作支持自动构建和部署更新的代码。
  
  如果尚未设置管道，请参阅上的指南如何为AEM Formsas a Cloud Service设置管道。
  
  如何确认安装？
  
  成功构建项目后，在创作表单时，自定义提交操作将显示在Submit action下拉列表中。
现在，您的环境已准备好在创作表单时使用添加的自定义提交操作。

使用新添加的提交操作预览自适应表单

登录到您的AEM Formsas a Cloud Service实例。
转到 Forms > Forms和文档。
选择自适应表单并单击编辑。表单将在编辑模式下打开。
打开内容浏览器，然后选择自适应表单的 指南容器 组件。
单击指南容器属性图标。这将打开“自适应表单容器”对话框。
单击提交选项卡。
从 提交操作 下拉列表中选择提交操作。例如，选择提交操作作为Custom Submit Action。
填写并提交表单。

成功提交表单后，您可以检查 Adobe Experience Manager Web控制台配置 以验证本地开发环境中自定义提交操作的操作。
转到 http://<host>:<port>/system/console/configMgr.
导航到http://<host>:<port>/system/console/slinglog上的 Adobe Experience Manager Web控制台日志支持。
单击logs/error.log选项。