Last Updated on March 20, 2024 by Rakesh Gupta

Big Idea or Enduring Question:

• How can you set up Send Email as a Quick Action in Salesforce Lightning Experience?

Objectives:

After reading this blog, you’ll be able to:

• Understand the needs for using Lightning Web Components to create a Quick Action for sending emails
• Learn about encodeDefaultFieldValues and  invoke functions
• Gain insights into NavigationMixin from a developer’s perspective
• and much more

In the past, I’ve written a few articles on Lightning Web Component. Why not check them out while you are at it?!

1. Add Confirmation, Alert, and Prompt Dialog Box to Lightning Web Component
2. Add Popup Overlay Modal in Lightning Web Component

Business Use case

Janel Parrish is working as a Junior Developer at Gurukul on Cloud (GoC). Janel has been tasked with designing a Lightning Web Component that can be used as a Quick Action for sending out emails lead, as shown in the screenshot below.

What is a Quick Action?

In Salesforce, a Quick Action is a customizable button that performs a specific task, such as creating a record, updating a record, or calling a Visualforce page, Flow, Lightning Web Component or a Lightning Component. Quick Actions are designed to help users work more efficiently by making common tasks easier and faster to perform directly from the Salesforce interface.

Quick Actions can be added to Salesforce Lightning Experience, Salesforce Mobile, and Salesforce Classic interfaces. They are configurable for various objects, allowing administrators and developers to tailor the user experience according to business needs. 

Out of the box, you can only add the Send Email quick action to Case and Activity section. As of Spring ’24, it is not possible to add the Send Email quick action to the Highlight Panel of Lead or Contact. The only possible solution is to create a Lightning Web Component and then use it as a quick action.

What is the use of NavigationMixin?

The NavigationMixin in Lightning Web Components is a powerful tool provided by Salesforce for navigating to different pages within the Salesforce Lightning Experience, Experience Builder site and Salesforce Mobile app. In the context of LWC, it is used to enhance a component with navigation capabilities. 

To use the NavigationMixin, you’ll need to import it and then use it to extend your component’s class. Import the NavigationMixin

import { LightningElement } from 'lwc';
import { NavigationMixin } from 'lightning/navigation';

Extend your component’s class with NavigationMixin. This is done by wrapping your class with NavigationMixin() 

export default class MyNavigationComponent extends NavigationMixin(LightningElement) {
}

Once your component class is extended with NavigationMixin, you can use the this [NavigationMixin.Navigate] method to navigate to different Salesforce pages, including standard pages, custom object pages, and even external URLs in some cases. The method takes a navigation object that specifies the page to navigate to and any parameters.

navigateToRecordPage() {
    this[NavigationMixin.Navigate]({
        type: 'standard__recordPage',
        attributes: {
            recordId: 'YOUR_RECORD_ID',
            actionName: 'view'
        }
    });
}

Implement Invoke()

A headless quick action triggers custom code within a Lightning Web Component without displaying a modal window, unlike a screen action. For headless quick actions within your Lightning Web Component, it’s essential to publicly expose the invoke() method.

This method is executed each time the quick action is triggered. The invoke() method does not return any value, indicating its return type is void. Learn more about Headless Quick Actions here. 

Automation Champion Approach (I-do):

To address the business requirement, we will create Lightning Web Components and a Quick Action on the Lead to call the Lightning Web Component.

emailQuickAction Component

This EmailQuickAction Lightning Web Component will be used to call the Global.SendEmail Quick Action. We will call this LWC component from the Lead Quick Action.

emailQuickAction.html

Create an empty template for your Lightning web component.

<template>
</template>

emailQuickAction.js

This sample JavaScript code uses the @api decorator to create public properties, i.e., accessible from other components or used in HTML templates. It leverages the NavigationMixin to enhance the component with navigation capabilities.

The @api recordId property allows the component to access the ID of the current record. The @api invoke() method constructs a navigation request to the Global.SendEmail quick action, pre-populating the email’s body and subject fields with default values, and then navigates to this quick action using the navigation service.

import { LightningElement, api } from 'lwc';
import { NavigationMixin } from 'lightning/navigation';
import { encodeDefaultFieldValues } from 'lightning/pageReferenceUtils';

export default class EmailQuickAction extends NavigationMixin(LightningElement) {
    @api recordId;
    @api invoke() {
        var pageRef = {
            type: "standard__quickAction",
            attributes: {
                apiName: "Global.SendEmail",
            },
            state: {
                recordId: this.recordId,
                defaultFieldValues: encodeDefaultFieldValues({
                    HtmlBody: "This is a test email to ensure that our messaging system is functioning correctly. The content within this message is placeholder text used for testing purposes. Should you have any questions or require further assistance, please do not hesitate to contact us.",
                    Subject: "Subject Line Placeholder",
                }),
            },
        };

        this[NavigationMixin.Navigate](pageRef);
    }
}

emailQuickAction.js-meta.xml

The isExposed element is set to true, which makes the component available for use in tools like the Lightning App Builder or Flow Builder. The targets element is used to specify where your component can be used. In this case, the lightning__RecordAction tag means that this component is intended to be used in Lightning Record Page. 

The <targetConfig> section further clarifies that the action type for this component is an Action, indicating it can be executed as a headless action. 

<?xml version="1.0" encoding="UTF-8"?>
<LightningComponentBundle xmlns="http://soap.sforce.com/2006/04/metadata">
    <apiVersion>59.0</apiVersion>
    <isExposed>true</isExposed>
    <targets>
        <target>lightning__RecordAction</target>
    </targets>
    <targetConfigs>
        <targetConfig targets="lightning__RecordAction">
            <actionType>Action</actionType>
        </targetConfig>
    </targetConfigs>
</LightningComponentBundle>

Create a Quick Action to Launch the Lightning Web Component

The next step is to create a Quick Action on the Lead object to launch the emailQuickAction lighting web component. Salesforce will automatically pass the Lead Id to the recordId variable.

1. Click Setup.
2. In the Object Manager, type Lead.
3. Select Buttons, Links, and Action, then click New Action.
4. Input the following information:
   1. Select Lightning Web Component as Action Type.
   2. Select emailQuickAction as Lightning Web Component.
   3. Enter Label (Send Email) the Name will auto-populate.
5. Click Save.

Things to Remember

1. Ensure that the fields you specify in the encodeDefaultFieldValues function aren’t Read-Only in the Send Email global action’s layout.
2. As per Salesforce documentation, Lightning web component quick actions are available only on record pages in Lightning Experience. They’re not supported in Aura Experience Builder sites or on the Salesforce mobile app. 

Proof of Concept

Formative Assessment:

I want to hear from you!

What is one thing you learned from this post? How do you envision applying this new knowledge in the real world? Feel free to share in the comments below.