Email forms using Liferay Web Content

Liferay have mail API to send emails in portlets and liferay also have web forms portlet to create email forms.

If we want create custom email form we need to develop custom portlet and need to design email form as for our requirement and its needed some development effort.

http://www.liferaysavvy.com/2013/11/send-mails-in-liferay-plugin-portlet.html

If we use web form portlet then we cannot make much look and feel design to forms and its separate portlet and we cannot use much convenient way in web content combination.

Out of box we can send email using web content so that we design email forms with good look and feel and we can send emails.

Here we have some custom portlet that will take care the email sending functionality we will use Ajax based mechanism to send email on behalf of our mail sender portlet through web content.

We will design email form in Liferay web content and we use AUI Ajax call to send emails.

The following are the steps you need to follow.

Step: 1

Download portlet from following location and deploy in your portal server and it should be successfully deployed.

https://github.com/LiferaySavvy/LiferayWebContentEmailForms

Step: 2

Add following property in your portal-ext.properties file and restart Liferay portal server.

portlet.add.default.resource.check.whitelist=3,56_INSTANCE_0000, 58,82,86,87,88,103,113,145,164,166,170,177, AjaxMailSender_WAR_AjaxMailSenderportlet

Note:

The above property should in single line in the properties file

Step: 3

Drag and Drop Liferay web content Display portlet in your desired page.

Create Liferay web content using following html content and publish it.

<style type="text/css">.mail-container{ margin-left:10px; } #successMessage{ color:green; } #errorMessage{ color:red; } </style> <div class="mail-container"> <div id="successMessage">&nbsp;</div> <div id="errorMessage">&nbsp;</div> <form action="#" enctype="text/plain" method="post">Receiver Name:<br /> <input id="receiverName" name="receiverName" type="text" value="" /><br /> Receiver Email:<br /> <input id="receiverEmail" name="receiverEmail" type="text" value="" /><br /> Sender Name:<br /> <input id="senderName" name="senderName" type="text" value="" /><br /> Sendw Email:<br /> <input id="senderMail" name="senderMail" type="text" value="" /><br /> Subject<br /> <input id="mailSubject" name="mailSubject" type="text" value="" /><br /> Mail Body<br /> <textarea cols="50" id="mailBody" name="mailBody" rows="4"></textarea><br /> <br /> <input id="mailSend" type="button" value="mailSend" /> <input type="reset" value="Reset" />&nbsp;</form> </div> <script> YUI().use('aui-base','aui-io-request', function(A){ A.one("#mailSend").on('click',function(){ A.one("#errorMessage").set("innerHTML",""); A.one("#successMessage").set("innerHTML",""); var receiverName=A.one("#receiverName").get("value"); var receiverEmail=A.one("#receiverEmail").get("value"); var senderName=A.one("#senderName").get("value"); var senderMail=A.one("#senderMail").get("value"); var mailSubject=A.one("#mailSubject").get("value"); var mailBody=A.one("#mailBody").get("value"); //alert("This click Event from AUI"); //aui ajax call to get updated content A.io.request('http://localhost:8080/?p_p_id=AjaxMailSender_WAR_AjaxMailSenderportlet&p_p_lifecycle=2',{ dataType: 'json', method: 'GET', data: { receiverName:receiverName, receiverEmail:receiverEmail, senderName:senderName, senderMail:senderMail, mailSubject:mailSubject, mailBody:mailBody }, on: { success: function() { // response data will be received here var data = this.get('responseData'); if(data.errorMessage){ A.one("#errorMessage").set("innerHTML",data.errorMessage); } if(data.successMessage){ A.one("#successMessage").set("innerHTML",data.successMessage); } //console.log(data.successMessage,"data"); } } }); }); }); </script>

Finally you can see email form in web content display portlet as follows

You can see success message after send email

You can see error message if some get failed

The following portlet Java class we can customize the way we required.

package com.iamsuraj.mailsender; import java.io.IOException; import java.io.PrintWriter; import javax.mail.internet.InternetAddress; import javax.portlet.PortletException; import javax.portlet.ResourceRequest; import javax.portlet.ResourceResponse; import com.liferay.mail.service.MailServiceUtil; import com.liferay.portal.kernel.json.JSONFactoryUtil; import com.liferay.portal.kernel.json.JSONObject; import com.liferay.portal.kernel.log.Log; import com.liferay.portal.kernel.log.LogFactoryUtil; import com.liferay.portal.kernel.mail.MailMessage; import com.liferay.portal.kernel.util.ParamUtil; import com.liferay.portal.kernel.util.Validator; import com.liferay.util.bridges.mvc.MVCPortlet; public class AJaxMailSenderPortlet extends MVCPortlet { @Override public void serveResource(ResourceRequest resourceRequest,ResourceResponse resourceResponse)throws  IOException, PortletException { System.out.println("====serveResource========"); String receiverName=ParamUtil.getString(resourceRequest,"receiverName"); String receiverEmail=ParamUtil.getString(resourceRequest,"receiverEmail"); String senderName=ParamUtil.getString(resourceRequest,"senderName"); String senderMail=ParamUtil.getString(resourceRequest,"senderMail"); String mailSubject=ParamUtil.getString(resourceRequest,"mailSubject"); String mailBody=ParamUtil.getString(resourceRequest,"mailBody"); logger.info("receiverName:"+receiverName); logger.info("receiverEmail:"+receiverEmail); logger.info("senderName:"+senderName); logger.info("senderMail:"+senderMail); logger.info("mailSubject:"+mailSubject); logger.info("mailBody:"+mailBody); JSONObject responseOject=JSONFactoryUtil.createJSONObject(); boolean success=false; if(Validator.isEmailAddress(receiverEmail)&&Validator.isEmailAddress(senderMail)){ try { MailMessage mailMessage=new MailMessage(); mailMessage.setBody(mailBody); mailMessage.setSubject(mailSubject); mailMessage.setFrom(new InternetAddress(senderMail,senderName)); mailMessage.setTo(new InternetAddress(receiverEmail,receiverName)); MailServiceUtil.sendEmail(mailMessage); success=true; }catch (Exception e) { e.printStackTrace(); responseOject.put("errorMessage",e.getLocalizedMessage()); success=false; } }else{ responseOject.put("errorMessage","One of Email Adresess is not valid"); success=false; } if(success){ responseOject.put("successMessage","Your mail has been send successfully"); } PrintWriter out=resourceResponse.getWriter(); logger.info(responseOject.toString()); out.print(responseOject.toString()); } private static final Log logger = LogFactoryUtil.getLog(AJaxMailSenderPortlet.class); }

Important Points

 This is simple example portlet and we can develop like the way we wanted and you can also handle server side validation in the code.

The web content form is a simple form not much style and we can design with good look and feel with validations.

Web content I have hard coded the host name(localhost) if your host name is changed then please change the host name in the web content ajax URL.

To send email in the portal we must configure mail server in the Liferay portal and you can find mail configuration in the following post.

http://www.liferaysavvy.com/2013/11/send-mails-in-liferay-plugin-portlet.html

Author

Meera Prince

Liferay Contributor of The Year 2014

Liferay Top Contributor Award Winner 2013

http://www.liferaysavvy.com