How to Send Emails Using Lightning Web Component (LWC)?

What are the features of Lightning Web Components to send emails?

• Enables you to retrieve emails from Contact and User objects, and it can be expanded to include any customobject.
• Allows you to enter a static emails.
• Contains checks for valid email addresses in the To and Cc fields (only checks for format).
• Its Allows user to upload and attach files
• Its Contains re-usable input component. (To add Bcc etc.).

Let's write the code for it now.

emailLwc.html

Don't forget to check out: What are Email Services In Salesforce? | The Ultimate Guide

import < LightningElement, track >from "lwc"; import sendEmailController from "@salesforce/apex/EmailClass.sendEmailController"; export default class EmailLwc extends LightningElement < toAddress = []; ccAddress = []; subject = ""; body = ""; @track files = []; wantToUploadFile = false; noEmailError = false; invalidEmails = false; toggleFileUpload() < this.wantToUploadFile = !this.wantToUploadFile; >handleUploadFinished(event) < const uploadedFiles = event.detail.files; this.files = [. this.files, . uploadedFiles]; this.wantToUploadFile = false; >handleRemove(event) < const index = event.target.dataset.index; this.files.splice(index, 1); >handleToAddressChange(event) < this.toAddress = event.detail.selectedValues; >handleCcAddressChange(event) < this.ccAddress = event.detail.selectedValues; >handleSubjectChange(event) < this.subject = event.target.value; >handleBodyChange(event) < this.body = event.target.value; >validateEmails(emailAddressList) < let areEmailsValid; if(emailAddressList.length >1) < areEmailsValid = emailAddressList.reduce((accumulator, next) =>< const isValid = this.validateEmail(next); return accumulator && isValid; >); > else if(emailAddressList.length > 0) < areEmailsValid = this.validateEmail(emailAddressList[0]); >return areEmailsValid; > validateEmail(email) < console.log("In VE"); const res = /^(([^<>()[\]\\.,;:\s@"]+(\.[^<>()s[\]\\.,;:\s@"]+)*)|(".+"))@((\[[0-9]\.[0-9]\.[0-9]\.[0-9]\])|(([a-zA-Z\-0-9]+\.)+[a-zA-Z]))$/; console.log("res", res); return res.test(String(email).toLowerCase()); > handleReset() < this.toAddress = []; this.ccAddress = []; this.subject = ""; this.body = ""; this.files = []; this.template.querySelectorAll("c-email-input").forEach((input) =>input.reset()); > handleSendEmail() < this.noEmailError = false; this.invalidEmails = false; if (![. this.toAddress, . this.ccAddress].length >0) < this.noEmailError = true; return; >if (!this.validateEmails([. this.toAddress, . this.ccAddress])) < this.invalidEmails = true; return; >let emailDetails = < toAddress: this.toAddress, ccAddress: this.ccAddress, subject: this.subject, body: this.body >; sendEmailController(< emailDetailStr: JSON.stringify(emailDetails) >) .then(() => < console.log("Email Sent"); >) .catch((error) => < console.error("Error in sendEmailController:", error); >); > >

emailInput.html

Check out another amazing blog by Narendra Kumar here: Aura Component Framework and Attributes | All You Need to Know

EmailInput.js

import < LightningElement, track, api >from "lwc"; import search from "@salesforce/apex/EmailClass.search"; export default class EmailInput extends LightningElement < @track items = []; searchTerm = ""; blurTimeout; boxClass = "slds-combobox slds-dropdown-trigger slds-dropdown-trigger_click slds-has-focus"; _selectedValues = []; selectedValuesMap = new Map(); get selectedValues() < return this._selectedValues; >set selectedValues(value) < this._selectedValues = value; const selectedValuesEvent = new CustomEvent("selection", < detail: < selectedValues: this._selectedValues>>); this.dispatchEvent(selectedValuesEvent); > handleInputChange(event) < event.preventDefault(); if (event.target.value.length < 3) < return; >search(< searchString: event.target.value >) .then((result) => < this.items = result; if (this.items.length >0) < this.boxClass = "slds-combobox slds-dropdown-trigger slds-dropdown-trigger_click slds-has-focus slds-is-open"; >>) .catch((error) => < console.error("Error:", error); >); > handleBlur() < console.log("In onBlur"); this.blurTimeout = setTimeout(() => < this.boxClass = "slds-combobox slds-dropdown-trigger slds-dropdown-trigger_click slds-has-focus"; const value = this.template.querySelector('input.input').value if (value !== undefined && value != null && value !== "") < this.selectedValuesMap.set(value, value); this.selectedValues = [. this.selectedValuesMap.keys()]; >this.template.querySelector('input.input').value = ""; >, 300); > get hasItems() < return this.items.length; >handleKeyPress(event) < if (event.keyCode === 13) < event.preventDefault(); const value = this.template.querySelector('input.input').value; if (value !== undefined && value != null && value !== "") < this.selectedValuesMap.set(value, value); this.selectedValues = [. this.selectedValuesMap.keys()]; >this.template.querySelector('input.input').value = ""; > > handleRemove(event) < const item = event.target.label; this.selectedValuesMap.delete(item); this.selectedValues = [. this.selectedValuesMap.keys()]; >onSelect(event) < this.template.querySelector('input.input').value = ""; let ele = event.currentTarget; let selectedId = ele.dataset.id; let selectedValue = this.items.find((record) =>record.Id === selectedId); this.selectedValuesMap.set(selectedValue.Email, selectedValue.Name); this.selectedValues = [. this.selectedValuesMap.keys()]; let key = this.uniqueKey; const valueSelectedEvent = new CustomEvent("valueselect", < detail: < selectedId, key >>); this.dispatchEvent(valueSelectedEvent); if (this.blurTimeout) < clearTimeout(this.blurTimeout); >this.boxClass = "slds-combobox slds-dropdown-trigger slds-dropdown-trigger_click slds-has-focus"; > @api reset() < this.selectedValuesMap = new Map(); this.selectedValues = []; >@api validate() < this.template.querySelector('input').reportValidity(); const isValid = this.template.querySelector('input').checkValidity(); return isValid; >>

EmailClass

public with sharing class EmailClass < @AuraEnabled public static Listsearch(String searchString) < ListsearchList = new List(); try < String searchStr = '*' + searchString + '*'; String searchquery = 'FIND\'' + searchStr + '\'IN ALL FIELDS RETURNING Contact(id, name, email where email != null), User(id, name, email where email != null AND isActive = true) LIMIT 10'; List searchResult = search.query(searchquery); for (List curList : searchResult) < searchList.addAll(curList); >system.debug('searchList. ' + searchList.size()); > catch (Exception e) < throw new AuraHandledException(e.getMessage()); >return searchList; > @AuraEnabled public static void sendEmailController(String emailDetailStr) < EmailWrapper emailDetails = (EmailWrapper) JSON.deserialize(emailDetailStr, EmailWrapper.class); Messaging.reserveSingleEmailCapacity(1); try < messaging.SingleEmailMessage mail = new messaging.SingleEmailMessage(); mail.setToAddresses(emailDetails.toAddress); mail.setCcAddresses(emailDetails.ccAddress); mail.setReplyTo('[email protected]'); mail.setSenderDisplayName('Test'); mail.setSubject(emailDetails.subject); mail.setHtmlBody(emailDetails.body); mail.setEntityAttachments(emailDetails.files); Messaging.sendEmail(new List< mail >); > catch (exception e) < throw new AuraHandledException(e.getMessage()); >> Class EmailWrapper < public ListtoAddress; public List ccAddress; public String subject; public String body; public List files; > >