Send Email Lightning Component

Quick Send Email Lightning Component

Lightning Component

Sharing is caring!

Prerequisites : basic understanding of Lightning Component. and apex programming

In this post we are created a salesforce lightning component. By this component we can send Emails.
Quick Email Send lightning component looks like :


Send Email Lightning Component

In Gmail.

Send Email Lightning Component

apex class [ EmailSendController.apxc]

  • see code comments.

component [EmailSend.cmp]

  • We divided our lightning component in 4 parts. 
  • 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 model for 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]

  • 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]

  •   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. .

Resources :

Send Email Limitation

Single Email Messages

lightning design system

Like our facebook page for new post updates.? & Don’t forget to bookmark this site for your future reference.

if you have any suggestions or issue with it, you can post in comment box.


Sharing is caring!

(Visited 3,116 times, 1 visits today)


  • Thank you very much for sharing these codes.
    I would like the ability to add attachment to the email. Could you advice how to do it?
    Thanks in advance for your time.

  • hi!, it send me this error:


    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}


    any clue?

  • Hi,

    I wanted to convert my javascript button of sending an email to lightning. can you please suggest me how can we do this??


    Launches email app.
    Pulls in info from the Opportunity for the email being sent out.
    Send email to Opportunity owner

    OnClick Java Script:

    var daReferrer = document.referrer;

    var email = “{!Opportunity.OwnerEmail}”;

    var subject = encodeURIComponent(“Question on Opportunity: {!Opportunity.Name}”);

    var body = “{!Opportunity.OwnerFirstName}, %0A%0AI have a question regarding the following opportunity: https%3A//{!Opportunity.Id}%0A%0A%0A%0A%0A{!User.Name}”


    var mailto_link = ‘mailto:’ + email + ‘&subject=’ + subject+’&body=’ + body


    win =,’emailWindow’);

    //if (win && &&!win.closed) win.close();

    if (win && &&!win.closed){ setTimeout(function(){ win.close();},250); }


    function truncate50(str) {

    if (str.length > 50) {

    str = str.slice(0,47);

    str += “…”;


    return str;


    Thanks In Advance

  • Hello,

    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?

  • Hi,

    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

  • Hi,

    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.

    Did you find a way to correct that?

Leave a Reply