Expand my Community achievements bar.

Don’t miss the AEM Skill Exchange in SF on Nov 14—hear from industry leaders, learn best practices, and enhance your AEM strategy with practical tips.
SOLVED

AEM Form should send payload to an external API to show success of failure message

Avatar

Level 5

Hi all, 

I'm creating a registration form using core form container. I need to send form payload to external API then using that API I need to show success or failure message after click on the submit button. Can anyone help me with this ??

1 Accepted Solution

Avatar

Correct answer by
Community Advisor

Hi @Tessa_learner1, I see following options for your scenario:

AEM Form Container:

  • You can create OSGi service to communicate with API, e.g. using HttpClient or dedicated SDK - assuming it is available. So all the communication with API will be done in backend side.
  • You can create your own servlet to handle POST from AEM Form Container - but this is a bit tricky and in my opinion it's against the technical design that has been introduced by AEM Form component.

You can find code examples for both above options under https://experienceleaguecommunities.adobe.com/t5/adobe-experience-manager/form-core-component-submis...

Extend Form Container:

  • Extend AEM Form Container implementation. Write custom servlet to handle form requests, at the same time you should be able to use all Form components like inputs buttons etc. API communication can be done using HttpClient or SDK.

Custom Form:

  • You can communicate directly with API client-side, i.e using jQuery
  • You can create servlet on AEM that will handle/proxy communication with API e.g. using HttpClient or dedicated SDK. Communication with this servlet can be done in classic way - page is reloaded after form submit, or you can hit the servlet from JavaScript and refresh component when you get the response.

In my opinion the second/third option will be better for your case. It will give you more flexibility/control e.g. in terms of error handling.

View solution in original post

1 Reply

Avatar

Correct answer by
Community Advisor

Hi @Tessa_learner1, I see following options for your scenario:

AEM Form Container:

  • You can create OSGi service to communicate with API, e.g. using HttpClient or dedicated SDK - assuming it is available. So all the communication with API will be done in backend side.
  • You can create your own servlet to handle POST from AEM Form Container - but this is a bit tricky and in my opinion it's against the technical design that has been introduced by AEM Form component.

You can find code examples for both above options under https://experienceleaguecommunities.adobe.com/t5/adobe-experience-manager/form-core-component-submis...

Extend Form Container:

  • Extend AEM Form Container implementation. Write custom servlet to handle form requests, at the same time you should be able to use all Form components like inputs buttons etc. API communication can be done using HttpClient or SDK.

Custom Form:

  • You can communicate directly with API client-side, i.e using jQuery
  • You can create servlet on AEM that will handle/proxy communication with API e.g. using HttpClient or dedicated SDK. Communication with this servlet can be done in classic way - page is reloaded after form submit, or you can hit the servlet from JavaScript and refresh component when you get the response.

In my opinion the second/third option will be better for your case. It will give you more flexibility/control e.g. in terms of error handling.