In the Part 1 : we declare 4 aura:attribute for store values on component.

In the Part 2: we declare simply our component Header

In the Part 3: we are declare Popup modelfor show the ‘successful’ message after send a Email with the close button. in this part we are using aura:if component for conditionally renders the message Popup model. by default we make it hide(false).

In the Part 4: we are created a form with 3 fields and a button to get input from user and send a Email.

controller [ EmailSendController.js]

EmailSendCOntroller code

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

21

22

23

24

25

26

27

28

29

30

({

sendMail:function(component,event,helper){

// when user click on Send button

// First we get all 3 fields values

vargetEmail=component.get("v.email");

vargetSubject=component.get("v.subject");

vargetbody=component.get("v.body");

// check if Email field is Empty or not contains @ so display a alert message

// otherwise call call and pass the fields value to helper method

if($A.util.isEmpty(getEmail)||!getEmail.includes("@")){

alert('Please Enter valid Email Address');

}else{

helper.sendHelper(component,getEmail,getSubject,getbody);

}

},

// when user click on the close buttton on message popup ,

// hide the Message box by set the mailStatus attribute to false

// and clear all values of input fields.

closeMessage:function(component,event,helper){

component.set("v.mailStatus",false);

component.set("v.email",null);

component.set("v.subject",null);

component.set("v.body",null);

},

})

When we click on the Send Button sendMail function will be fire .

In this sendMail function first we get all 3 fields value [Email, Subject, Mail Body] and store these value in variable.

after store value we check if the Email field is Empty or not contains “@” ,so display a alert message otherwise call and pass the fields values to helper function.

Second function closeMessage fire when user click on close button on “message popup modal”, and hide the message box body[Part 3 ] from the component by set the mailStatus attribute to false.

Helper [EmailSendHelper.js]

SendMailHelper js code

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

21

22

23

24

25

26

27

({

sendHelper:function(component,getEmail,getSubject,getbody){

// call the server side controller method

varaction=component.get("c.sendMailMethod");

// set the 3 params to sendMailMethod method

action.setParams({

'mMail':getEmail,

'mSubject':getSubject,

'mbody':getbody

});

action.setCallback(this,function(response){

varstate=response.getState();

if(state==="SUCCESS"){

varstoreResponse=response.getReturnValue();

// if state of server response is comes "SUCCESS",

// display the success message box by set mailStatus attribute to true

component.set("v.mailStatus",true);

}

});

$A.enqueueAction(action);

},

})

In the Helper function, we are call the server side apex method and set the 3 parameter to this sendMailMethod method.

When the server response comes and response state is “SUCCESS” then display the success message box by set the mailStatus attribute to true. .

This page has an error. You might just need to refresh it.
Action failed: c:EmailSend$controller$sendMail [Object doesn’t support property or method ‘includes’]
Failing descriptor: {c:EmailSend$controller$sendMail}

Thanks for the great article. I am just thinking to fit my case in broader sense as in I would like to default template when user click “Send Email” button(assuming on click of this button will open up your component as you described here). How can I default template in this component?

I wanted to Sending Email to list of Selected Contact Records. I Completed task upto the displaying records and select checkboxes . I want a Code for “Send Mail” action for email goes to selected records

Thanks a lot, this is very useful. One thing I cannot figure out is the return carriage.
It seems that the component lightning:inputRichText adds html <p> tags whenever there is a new line. It causes the spacing on the email to look weird when opening the email in an email client.

In this email code how can I add Cc and Bcc. As I’m unable to do it as I’m getting this error “Uncaught Action failed: c:EmailSend$controller$sendMail [getccEmail is not defined]”. the above works fine with To subject and email body but doesn’t work when I add Cc and Bcc to the same. Kindly help.

Daisy Scott

Daisy is a technology expert adviser and Marketing head of a financial organization, based in California, USA. Her interest lies basically in indulging various latest technologies, to improve marketing. Being an expert technological adviser she also contributes and shares his live experience with latest tools about Salesforce Lightning.