To enable users to send an email from anywhere in Lightning Experience, you can create a global quick action. Alternatively, you can create an object-specific email action. After you create a global or object-specific email action, you can add predefined values and add the action to page layouts.
If the global quick action and object-specific action don’t meet your requirements, consider using an LWC quick action. For example, use an LWC quick action if you want to:
The LWC quick email action isn’t supported in Experience Builder sites.
Use APIs from the lightning/navigation and lightning/pageReferenceUtils modules to create a QuickAction (Global) Send Email action, which opens an email draft with pre-populated field values.
In your component’s HTML file, import the navigation services from the lightning/navigation module and the page reference utilities from lightning/pageReferenceUtils.
Here’s a basic syntax example that demonstrates how to display the email composer from an LWC quick action.
1import { LightningElement } from "lwc";
2import { NavigationMixin } from "lightning/navigation";
3import { encodeDefaultFieldValues } from "lightning/pageReferenceUtils";
4
5export default class EmailQuickActionExample extends NavigationMixin(LightningElement) {
6 handleClick() {
7 var pageRef = {
8 type: "standard__quickAction",
9 attributes: {
10 apiName: "Global.SendEmail",
11 },
12 state: {
13 recordId: "00QB000000BLjUrMAL",
14 defaultFieldValues: encodeDefaultFieldValues({
15 HtmlBody: "Pre-populated text for the email body.",
16 Subject: "Pre-populated Subject of the Email",
17 To: "target@example.com",
18 }),
19 },
20 };
21
22 this[NavigationMixin.Navigate](pageRef);
23 }
24}In this example, the handleClick function launches the email composer with pre-populated content on the Subject and Body text.
To include default text in the email composer, use the encodeDefaultFieldValues function. To populate the email with input from your component, pass the field values into the encodeDefaultFieldValues function.
By default, Salesforce prepopulates the To field with a contact or lead email address when you open the email action from the contact or lead record home pages. Ensure that the fields you specify in the encodeDefaultFieldValues function aren’t Read-Only in the Send Email global action’s layout. If the HTML Body and Subject fields are Read-Only, the email draft doesn’t include pre-populated text for those fields.
These fields are supported:
ValidatedFromAddressToAddressCcAddressBccAddressSubjectHTMLBodyRelatedToIdThe ValidatedFromAddress field accepts an organization-wide email address or the running user’s verified email address. The Subject and HTMLBody fields have no default value.
Only fields that are available on the email quick action are supported. For example, AttachmentId and ContentDocumentIds aren’t supported as they are not part of the email quick action layout.
For more information on the supported fields, see Object Reference for the Salesforce Platform: EmailMessage.
You can set predefined field values for an email based on user input. This example adds the test@example.com recipient to the To field.
To use this LWC quick action example, add it to the contact record page. The component retrieves the associated account ID on the contact that’s being viewed using @api recordId, which makes the component aware of its record context. To retrieve the associated account ID, use the getRecord wire adapter.
1import { LightningElement, api, wire } from "lwc";
2import { NavigationMixin } from "lightning/navigation";
3import { encodeDefaultFieldValues } from "lightning/pageReferenceUtils";
4
5import { getRecord } from "lightning/uiRecordApi";
6import ACCOUNT_ID_FIELD from "@salesforce/schema/Contact.AccountId";
7
8const fields = [ACCOUNT_ID_FIELD];
9
10export default class SendEmailSimple extends NavigationMixin(LightningElement) {
11@api recordId;
12contact;
13accountId;
14
15 @wire(getRecord, { recordId: "$recordId", fields })
16 wiredContact({ error, data }) {
17 if (error) {
18 // handle error
19 } else if (data) {
20 this.contact = data;
21 this.accountId = this.contact.fields.AccountId.value;
22 this.handleEmail();
23 }
24 }
25
26 handleEmail() {
27 var pageRef = {
28 type: "standard__quickAction",
29 attributes: {
30 apiName: "Global.SendEmail",
31 },
32 state: {
33 recordId: this.recordId,
34 defaultFieldValues: encodeDefaultFieldValues({
35 Subject: 'Pre-populated Subject of the Email',
36 ToAddress: 'test@example.com',
37 RelatedToId: this.accountId
38 }),
39 },
40 };
41 this[NavigationMixin.Navigate](pageRef);
42 }
43}If a contact record includes an email field value, the ToAddress field displays both test@example.com and the contact’s email. The RelatedToId field preselects the associated account on the contact if it’s available.
Using an LWC quick action, you can display a helpful message before displaying the email composer. To improve usability, you can also get user input to help determine the field values on your email composer.
To use this LWC quick action example, add it to the account record page. The component displays a message with the account record ID using @api recordId, which makes the component aware of its record context. It uses the lightning-record-picker base component to let users search for a contact associated on the account they’re viewing. When a user selects a contact, the getRecord wire adapter retrieves the email for the selected contact and displays the email composer.
1<template>
2 <div class="slds-m-around_medium">
3 <p>You are viewing record {recordId}. Please choose an email recipient.</p>
4 <lightning-record-picker
5 object-api-name="Contact"
6 label="Contacts"
7 filter={filter}
8 display-info={displayInfo}
9 onchange={handleEmailChange}
10 >
11 </lightning-record-picker>
12 </div>
13</template>The lightning-record-picker base component uses the filter attribute to filter the searchable contacts to only those contacts that are associated to the account.
In your component’s JavaScript, add an event handler using the standard__quickAction page reference type. Pass in the default field values using the state object.
This example assumes that an account record has at least one contact. For error handling, see the lightning-record-picker base component.
Note
1import { LightningElement, api, wire } from "lwc";
2import { NavigationMixin } from "lightning/navigation";
3import { encodeDefaultFieldValues } from "lightning/pageReferenceUtils";
4import { getRecord } from "lightning/uiRecordApi";
5import EMAIL_FIELD from "@salesforce/schema/Contact.Email";
6
7const fields = [EMAIL_FIELD];
8
9export default class SendEmail extends NavigationMixin(LightningElement) {
10 @api recordId;
11 @api contactId;
12 contact;
13 email;
14 errors;
15
16 // Limit the filter to contacts with
17 // the AccountId that match the account's recordId
18 get filter() {
19 return {
20 criteria: [
21 {
22 fieldPath: "AccountId",
23 operator: "eq",
24 value: this.recordId,
25 },
26 ],
27 };
28 }
29
30 // Set the labels on the record picker results
31 displayInfo = {
32 primaryField: "Name",
33 additionalFields: ["Title", "Email"],
34 };
35
36 // Set the user input on contactId,
37 // which is used to retrieve the contact record using getRecord
38 handleEmailChange(e) {
39 this.contactId = e.detail.recordId;
40 }
41
42 // Retrieve the email information for the selected contact
43 @wire(getRecord, { recordId: "$contactId", fields })
44 wiredContact({ error, data }) {
45 if (error) {
46 console.log("getRecord error: ", error);
47 } else if (data) {
48 this.contact = data;
49 this.email = this.contact.fields.Email.value;
50 this.setEmail();
51 }
52 }
53
54 // Display the email composer with predefined values,
55 // including the retrieved email from the selected contact
56 setEmail() {
57 var pageRef = {
58 type: "standard__quickAction",
59 attributes: {
60 apiName: "Global.SendEmail",
61 },
62 state: {
63 recordId: this.recordId,
64 defaultFieldValues: encodeDefaultFieldValues({
65 Subject: "Pre-populated Subject of the Email",
66 ToAddress: this.email,
67 HtmlBody: "Pre-populated text for the email body."
68 }),
69 },
70 };
71 this[NavigationMixin.Navigate](pageRef);
72 }
73}To make this component available as a quick action, update the .js-meta.xml configuration file.
1<?xml version="1.0" encoding="UTF-8"?>
2<LightningComponentBundle xmlns="http://soap.sforce.com/2006/04/metadata">
3 <apiVersion>59.0</apiVersion>
4 <isExposed>true</isExposed>
5 <targets>
6 <target>lightning__RecordAction</target>
7 </targets>
8 <targetConfigs>
9 <targetConfig targets="lightning__RecordAction">
10 <actionType>ScreenAction</actionType>
11 </targetConfig>
12 </targetConfigs>
13</LightningComponentBundle>Alternatively, you can create the email as a headless action, which opens a modal with the email composer directly. Opening a modal that displays an email composer is similar to the global Send Email action.
See Also
j