Expand my Community achievements bar.

Join expert-led, customer-led sessions on Adobe Experience Manager Assets on August 20th at our Skill Exchange.
SOLVED

Submitting AEM Forms Data to REST API via Client-Side Script

Avatar

Community Advisor

Hi Team,

We are exploring the use of AEM Forms and have created a simple form with a few fields—such as First Name and Last Name—along with built-in validations.

Instead of using the default out-of-the-box (OOTB) submit action, we are looking to handle the form submission on the client side using a REST API endpoint. Our goal is to retain AEM’s native form validation functionality but customize the submission logic to call an external API directly from the front end.

Could you please share any best practices or guidance on how to achieve this using clientlibs? Specifically, we’re looking for an example of how to override the submit() method using GuideBridge JS, and the recommended way to load and structure this customization.

Any pointers or sample code would be greatly appreciated.

 

 

Thanks,
Krishna

Topics

Topics help categorize Community content and increase your ability to discover relevant content.

1 Accepted Solution

Avatar

Correct answer by
Level 6

Hi @krishna_sai ,

If you find the answer helpful, please mark as correct reply. Thanks

View solution in original post

3 Replies

Avatar

Level 6

Hi @krishna_sai ,

Yes you can create a custom clientlibs for your form and write a code to declare custom methods and author that in your submit button action.

var guideBridgeData,
  rootPanel,
  firstName,
  lastName,
  submitButton;

function declareAllVariables() {
  $(function () {
    // one can directly access guideBridge object here.
    window.guideBridge.connect(function () {
      guideBridgeData = guideBridge;
      if (guideBridge && rootPanel) {
        (rootPanel = guideBridge.resolveNode(rootPanel)),
          (firstName = rootPanel.firstName),
          (lastName = rootPanel.lastName),
          (submitButton = rootPanel.submitButton);
      }
    });
  });
}

function initializeFormVariable(rootData) {
  rootPanel = rootData;
  declareAllVariables();
}
 
You can call "initializeFormVariable" in form container initialize or root panel initialize and pass your root panel as a param.
For Submit button action you can write a custom fetch method and servlet (java code), here i added the sample working code.
function submitClick() {
fetch(servletResourcePath, {
        method: 'post',
        headers: {
          Accept: 'application/json',
          'Content-Type': 'application/json',
        },

        //make sure to serialize your JSON body
        body: JSON.stringify({
          firstName: firstName.value,
          lastName: lastName.value,
        }),
      })
        .then(function (response) {
          if (response.status === 200) {
            // write your success logic
          } else {
            // write your failure logic
          }
        })
        .catch(function (err) {
                      // write your failure / error logic
        });
}
Please let me know if you need anything on this.

Avatar

Community Advisor

Let me give it a try and reach out to you in case of any blockers.

Thanks,

Krishna

Avatar

Correct answer by
Level 6

Hi @krishna_sai ,

If you find the answer helpful, please mark as correct reply. Thanks