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:

Custom submit action workflow {width="50%,"}

Clone AEM as a Cloud Service Git repository.

  1. Open the command line and choose a directory to store your AEM as a Cloud Service repository, such as /cloud-service-repository/.

  2. 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 the archetype.properties file.

    Archetype Properties

    Throughout this guide, we refer to this folder as the [AEMaaCS project directory].

Add new submit action

  1. Open the repository folder in an editor.

    Clonned Repository

  2. 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.

  3. Create new folder for your custom submit action and give it a name of your choice. For example, name the folder as customsubmitaction.

    Create custom submit action folder

  4. 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.

  5. Create new configuration file.
    Within the customsubmitaction folder, create a new file named .content.xml.

    Create Config File

  6. Open this file and paste the following content, replacing [customsubmitaction] with the name of your submit action

    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]"/>
    

    For example, replace the [customsubmitaction] with your customized submit action name as Custom Submit Action.

    Create custom submit action configuration file

    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

  1. Navigate to the /ui.apps/src/main/content/META-INF/vault/filter.xml file in your [AEMaaCS project directory].

  2. 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 the filter.xml file:

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

    Add the created folders in the filter.xml

  3. Save the changes.

Implement the service for the added submit action.

  1. 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.

  2. Create new Java file to implement the service for the added submit action. For example, add new Java file as CustomSubmitService.java.

    Custom Submit Action Folder

  3. 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 the CustomSubmitService.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;
         }
        }
    

    Custom Submit Action Service

  4. 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:

    1. 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.

    2. Open the terminal window or command prompt.

    3. Navigate to the [AEMaaCS project directory].

    4. Run the following command:

      code language-none
      mvn -PautoInstallPackage clean install
      

      Local Deployment

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:

    1. 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”).

    2. 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.

      Cloud Deployment

      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.

      Custom Submit Action Drop-Down list

    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

  1. Log in to your AEM Forms as a Cloud Service instance.

  2. Go to Forms > Forms and Documents.

    Forms and Documents

  3. Select an Adaptive Form and click Edit. The form opens in edit mode.

    Edit Form

  4. Open the Content browser, and select the Guide Container component of your Adaptive Form.

  5. Click the Guide Container properties Guide properties icon. The Adaptive Form Container dialog box opens.

  6. Click the Submission tab.

  7. From the Submit Action drop-down list, select the submit action. For example, select the submit action as Custom Submit Action.

    Custom Submit Form

  8. Fill out the form and submit it.

    Submit Form

    Thankyou message

    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.

  9. Go to http://<host>:<port>/system/console/configMgr.

  10. Navigate to the Adobe Experience Manager Web Console Log Support at http://<host>:<port>/system/console/slinglog.

    ConfigMgr

  11. Click the logs/error.log option.
    Open error.log file

  12. Open the error.log file to see that the data has been appended to it.

    error.log file

    note note
    NOTE
    To view error logs in the AEM as a Cloud Service environment, you can use Splunk.
recommendation-more-help
fbcff2a9-b6fe-4574-b04a-21e75df764ab