Skip to main content

Email Generation (with Attachment) using Form Component

Learn to create a custom form component which takes user input and on submit would send an email with an attached pdf which would contain the data entered in the form.

Objective

  • Understand how to create a custom component in AEM.
  • Understand how to create a custom Sling Servlet which would send an email.
  • Understand how to create a custom email.
  • Understand how to do the OSGI configurations for Mail Service.
  • Understand how to use pdfbox API to create a Pdf in the DAM Structure.

 

What you will build

A custom form component will be built taking user input in the form field. A Sling Servlet will be built which would be creating a pdf in the content DAM Structure and attaching the same pdf to the custom email.

Pre-Requisite

  • Java 1.8+
  • Maven
  • Eclipse/ IntelliJ or any IDE
  • AEM Author Instance
  • SMTP Email Server

 

Define the Custom Form Component

- Create a component under /apps//components.

- sample_form is the component.

Email Generation (with Attachment) using Form Component

- Create the node cq:dialog and file sample_form.html under the component.

Email Generation (with Attachment) using Form Component

- Add the below code in the sample_form.html.

Email Generation (with Attachment) using Form Component

- Now, open wknd repo in any of the IDE and create a Servlet under wknd.core package.

- For the Servlet code, you can refer to the following URL :

https://github.com/anshul039/AEM-WKND/blob/main/core/src/main/java/com/adobe/aem/guides/wknd/core/servlets/EmailServlet.java

- Now, go to http://localhost:4502/system/console/configMgr

- Search for Day CQ Mail Service(day.cq.mailer.DefaultMailService).

- Update the configurations according to required SMTP server. Below screenshot can be used as reference.

- Update SMTP Server, Port, Username, Password, from details. Below SMTP Server host name is used for testing purpose.

- Actual hostname can be configured as required.

Email Generation (with Attachment) using Form Component

- Make sure your SMTP Server is up.

- Once the code is deployed to the Server, create a sample page and add the component to the Page.

- The page would look as below

Email Generation (with Attachment) using Form Component

- Enter the values in the form and click on Button. You can see in the network tab, a request is triggered.

- On Click of Button, 2 actions will be performed.

  • Email Triggered with PDF attachment.
  • Storing same PDF in AEM DAM.

Email Generation (with Attachment) using Form Component

Once, you get the success response with the Http Status as 200 OK. Check your email, you must have received an email.

Email Generation (with Attachment) using Form Component

- You can find the pdf content as below. You can modify the pdf content through the code in which format user would like to display.

Email Generation (with Attachment) using Form Component

- Also, once you click on Button, the corresponding pdf is also stored in AEM DAM.

Email Generation (with Attachment) using Form Component

- User can store the PDF in any of the path under/content/dam

Hope you liked the article. Please reach out to digital group: digital.interactive@coforge.com for any query.

Let’s engage