Quick Send Email Lightning Component

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.


(Visited 21,783 times, 1 visits today)

25 thoughts on “Quick Send Email Lightning Component”

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

  2. 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,
        When i used the above article and i used the Lightning application for Lightning out means i have used tag. then preview of the component throws the below error.
        Please help to use the component for Lightning out.

        This page has an error. You might just need to refresh it.
        Action failed: ltng:outApp$controller$init [Incorrect usage of ltng:outApp. Refer to the ‘Lightning Components Developer Guide’ for correct usage]
        Failing descriptor: {ltng:outApp$controller$init} “

  3. 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//kcura.my.salesforce.com/{!Opportunity.Id}%0A%0A%0A%0A%0A{!User.Name}”


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


    win = window.open(mailto_link,’emailWindow’);

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

    if (win && win.open &&!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

  4. 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?

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

  6. 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?

  7. Hi guys,

    Thanks for the awesome.

    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.

  8. Hello Piyush,

    Thanks for your awesome code.

    But the thing is I want to pre-populate the email address, subject and also email body as a default which could be editable for later use. Any advise is appreciated.




  9. Hi Piyush,

    By ways of a quick intro – I’m the product manager for Core Sales Cloud Email at Salesforce.

    First off, this is awesome work. Thanks for sharing! This really lets admins custom build an email composer to their business process.

    Besides these customizations though, we also ship with an out of the box Lightning Email Action since Winter ’16 that’s used by the the vast majority of our customers.

    Also – we’re constantly making improvements to the email experience, so I’ll love to hear your feedback in terms of what’s working and what’s not.


    Austin Tam

  10. Hello guys,

    is there some way to fire my email using a custom email template?

    i have some automatized emails and dont want to send it customized all the time.

  11. If i it with Lightning Out throws the below error, help me to solve it.

    ” This page has an error. You might just need to refresh it. Action failed: ltng:outApp$controller$init [Incorrect usage of ltng:outApp. Refer to the ‘Lightning Components Developer Guide’ for correct usage] Failing descriptor: {ltng:outApp$controller$init} “


Leave a Comment