Create an Email as a Quick Action in Lightning Web Component Salesforce | LWC Stack ☁️⚡️

Kapil February 11, 2023

 In this blog I will show you how you can create an Email as a Quick Action in Lightning Web Component.

In LWC we are having two quick actions-

1. Screen Action

2. Headless Action


In this example I will create a Email Quick Action. So I will open an Email Composer with some pre-populated values using a quick action. 

If we will go with Screen Action then we have to build a UI as well where we can have a send email button which will trigger the email composer OR we can use headless quick action and open the composer directly.

For this demo I will use Headless Quick Action. On the load of the headless quick action we will redirect user to an email composer. For that we will be using below libraries: 

  1. NavigationMixin: Redirect user to another location.
  2. encodeDefaultFieldValues: Pre-populate values in the email composer.
Please follow below code-

Note: As it's a headless action so we won't be having HTML here.

emailQuickAction.js

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
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: "Default values from Quick Action.",
                        Subject:"Hello from Salesforce Bolt"
                    })
            }
        };
        this[NavigationMixin.Navigate](pageRef);
    }
}


emailQuickAction.js-meta.xml

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
<?xml version="1.0" encoding="UTF-8"?>
<LightningComponentBundle xmlns="http://soap.sforce.com/2006/04/metadata">
    <apiVersion>56.0</apiVersion>
    <isExposed>true</isExposed>
    <targets>
        <target>lightning__RecordAction</target>
    </targets>
    <targetConfigs>
        <targetConfig targets="lightning__RecordAction">
            <actionType>Action</actionType>
        </targetConfig>
    </targetConfigs>
</LightningComponentBundle>


Output




Checkout complete video tutorial below

 If you have any question please leave a comment below.

If you would like to add something to this post please leave a comment below.
Share this blog with your friends if you find it helpful somehow !

Thanks
Happy Coding :)

Tags:

Post a Comment

1 Comments

  1. Gunjan AswaniMay 24, 2023 at 8:37 AM

    Spinner loads then closed with this code. Can you help the pop up doesn't show on button click

    ReplyDelete