Create a custom submit action for Adaptive Forms (Core Components)
A submit action allows users to select the destination for the data captured from a form and to define additional functionality to be executed on form submission. AEM form supports multiple submit actions out-of-the-box (OOTB), such as sending an email or saving data to SharePoint or OneDrive.
You can also create a custom submit action to add functionality not included in the out-of-the-box options. For example, integrate the form data with a third-party application or trigger a personalized SMS notification based on user input.
Pre-requisites
Before you begin creating your first custom submit action for Adaptive Forms, ensure you have the following:
-
Plain Text Editor (IDE): While any plain text editor can work, an Integrated Development Environment (IDE) like Microsoft Visual Studio Code offers advanced features for easier editing.
-
Git: This version control system is required for managing code changes. If you do not have it installed, download it from https://git-scm.com.
Create your first custom submit action for form
The below diagram depicts the steps to create a custom submit action for an Adaptive Form:
Clone AEM as a Cloud Service Git repository.
-
Open the command line and choose a directory to store your AEM as a Cloud Service repository, such as
/cloud-service-repository/
. -
Run the below command to clone the repository:
code language-none git clone https://git.cloudmanager.adobe.com/<organization-name>/<app-id>/
Where to find this information?
For step-by-step instructions on locating these details, refer to the Adobe Experience League article “Accessing Git”.
Your project is ready!
When the command completes successfully, you see a new folder created in your local directory. This folder is named after your application (for example, app-id). This folder contains all the files and code downloaded from your AEM as a Cloud Service Git repository. You can find
<appid>
for your AEM Project in thearchetype.properties
file.Throughout this guide, we refer to this folder as the
[AEMaaCS project directory]
.
Add new submit action
-
Open the repository folder in an editor.
-
Navigate to the following directory within your
[AEMaaCS project directory]
:code language-none /ui.apps/src/main/content/jcr_root/apps/<app-id>/
Important: Replace
<app-id>
with your actual application ID. -
Create new folder for your custom submit action and give it a name of your choice. For example, name the folder as
customsubmitaction
. -
Navigate to the added custom submit action directory.
Within your
[AEMaaCS project directory]
, navigate to the following path:/ui.apps/src/main/content/jcr_root/apps/<app-id>/customsubmitaction/
Important
: Replace with your actual application ID. -
Create new configuration file.
Within thecustomsubmitaction
folder, create a new file named.content.xml
. -
Open this file and paste the following content, replacing
[customsubmitaction]
with the name of your submit actioncode 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]"/>
For example, replace the
[customsubmitaction]
with your customized submit action name asCustom Submit Action
.note note NOTE Remember the name of the [customsubmitaction], as the same name appears in the Submit action
drop-down list while authoring a form.
Include the new folder in filter.xml
-
Navigate to the
/ui.apps/src/main/content/META-INF/vault/filter.xml
file in your [AEMaaCS project directory]. -
Open the file and add the following line at the end:
code language-none <filter root="/apps/<app-id>/[customsubmitaction-folder]"/>
For example, add the following line of code to add the
customsubmitaction
folder in thefilter.xml
file:code language-none <filter root="/apps/wknd/customsubmitaction"/>
-
Save the changes.
Implement the service for the added submit action.
-
Navigate to the following directory within your
[AEMaaCS project directory]
:/core/src/main/java/com/<app-id>/core/service/
Important
: Replace with your actual application ID. -
Create new Java file to implement the service for the added submit action. For example, add new Java file as
CustomSubmitService.java
. -
Open this file and add the code for your custom submit action implementation.
For example, the below Java code is an OSGi service that handles the form submission by logging the submitted data and returns a status
OK
. Add the following code in theCustomSubmitService.java
file: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; } }
-
Save the changes.
Deploy the code.
Deploy code for local development environment
-
Deploy the AEM as a Cloud Service,
[AEMaaCS project directory]
, to your local development environment to try the new submit action on your local machine. To deploy to your local development environment:-
Ensure that your local development environment is up and running. If you have not already set up a local development environment, refer to the guide on Setup a local development environment for AEM Forms.
-
Open the terminal window or command prompt.
-
Navigate to the
[AEMaaCS project directory]
. -
Run the following command:
code language-none mvn -PautoInstallPackage clean install
-
Deploy the code for the Cloud Service environment
-
Deploy the AEM as a Cloud Service,
[AEMaaCS project directory]
, to your Cloud Service environment. To deploy to your Cloud Service environment:-
Commit your changes:
After adding the new custom submit action configuration, commit your changes with a clear Git message. (For example, “Added new custom submit action”).
-
Deploy the updated code:
Trigger a deployment of your code through the existing full-stack pipeline. It automatically builds and deploys the updated code with the new custo m submit action support.
If you haven’t already set up a pipeline, refer to the guide on how to set up a pipeline for AEM Forms as a Cloud Service.
How to confirm the installation?
Once the project is built successfully, the custom submit action appears in the
Submit action
drop-down list while authoring a form.
Your environment is now ready to use the added custom submit action when authoring a form.
-
Preview an Adaptive Form with newly added submit action
-
Log in to your AEM Forms as a Cloud Service instance.
-
Go to Forms > Forms and Documents.
-
Select an Adaptive Form and click Edit. The form opens in edit mode.
-
Open the Content browser, and select the Guide Container component of your Adaptive Form.
-
Click the Guide Container properties
-
Click the Submission tab.
-
From the Submit Action drop-down list, select the submit action. For example, select the submit action as
Custom Submit Action
. -
Fill out the form and submit it.
Once the form is submitted successfully, you can check the Adobe Experience Manager Web Console Configuration to verify the action of the custom submit action in the local development environment.
-
Go to
http://<host>:<port>/system/console/configMgr
. -
Navigate to the Adobe Experience Manager Web Console Log Support at
http://<host>:<port>/system/console/slinglog
. -
Click the
logs/error.log
option.
-
Open the
error.log
file to see that the data has been appended to it.note note NOTE To view error logs in the AEM as a Cloud Service environment, you can use Splunk.
Related Articles
- Send email
- Submit to SharePoint Document Library
- Submit to SharePoint List
- Submit using Form Data Model
- Submit to Azure Blob Storage
- Submit to REST endpoint
- Submit to OneDrive
- Invoke an AEM Workflow
- Submit to Power Automate
- Submit to Workfront Fusion
- Connect Adaptive Form to Salesforce application
- Connect an Adaptive Form to Microsoft® Dynamics
- Connect an Adaptive Form to Adobe Marketo Engage
- Create custom submit action