Quick Action In LWC.

Today we are gonna talk about Quick Action in LWC.  Earlier we need to wrap up our LWC component inside the Aura component to use in Quick Action but after the Summer'21 Salesforce release, now we no longer need that. As of now, LWC is only supported in Record Detail Quick Action. First off, there are TWO different types of LWC Quick Actions – Screen Actions and Headless Actions.

How to setup Quick Action:

Setup-> Object Manager -> Object-> Buttons, Links, and Actions-> New Action

Screen Action:

 Basically, Screen actions are used when we need to open a modal window that we can use to display data or interact with data. Earlier we use the Aura component and inside Aura, we wrap/call our LWC component but now we don't need the Aura component anymore to call the LWC component in Quick Action.

To set up a Lightning web component as a quick action on a record page, define the metadata in <component>.js-meta.xml. Define a lightning__RecordAction target and specify actionType as ScreenAction for a screen action that opens in a window.

my-action.js-meta.xml

<?xml version="1.0" encoding="UTF-8"?>

<LightningComponentBundle xmlns="http://soap.sforce.com/2006/04/metadata">

    <apiVersion>52.0</apiVersion>

    <isExposed>true</isExposed>

    <targets>

        <target>lightning__RecordAction</target>        

    </targets>

    <targetConfigs>

        <targetConfig targets="lightning__RecordAction">

            <actionType>ScreenAction</actionType>

        </targetConfig>

    </targetConfigs>

</LightningComponentBundle>

my-action.html

<template>

    <lightning-quick-action-panel header="Add Quick Contact">

       Modal Body

        <div slot="footer">

            <lightning-button variant="neutral" label="Close" 

                title="Close" onclick={closeModal}>

            </lightning-button>

            &nbsp;

            <lightning-button variant="brand" label="Save" 

                title="Save">

            </lightning-button>

        </div>

    </lightning-quick-action-panel>

</template>

There is a new base component introduce which is Lightning Quick Action Panel it's allow us to create a consistent experience for users.

This component allows you to:

• Set the header attribute of the component to render the title in the modal header
• Place the content of your action in the body
• Use a slot to place content in the modal footer

my-action.js

import { LightningElement } from 'lwc';

import { CloseActionScreenEvent } from 'lightning/actions';

export default class QuickHeaderAction extends

    NavigationMixin(LightningElement) {

    closeModal() {     

        this.dispatchEvent(new CloseActionScreenEvent());

    }

}

Preview

Close Action Screen Event

We can close the modal when we are using ScreenAction by importing the new  CloseActionScreenEvent from 'lightning/actions'. When fired this will close the model window if the user needs to cancel or close the quick action.

Headless Action:

With the help of this action, we can run JavaScript directly from the click of a button through a Headless Lightning Web Component. As compared to ScreenAction we don't need the HTML file in your LWC.

In our .XML file we need to defined Action inside <actionType> tag for using headlessAction.

my-headless-action.js-meta.xml

<?xml version="1.0" encoding="UTF-8"?>

<LightningComponentBundle xmlns="http://soap.sforce.com/2006/04/metadata">

    <apiVersion>52.0</apiVersion>

    <isExposed>true</isExposed>

     <targets>

        <target>lightning__RecordAction</target>        

    </targets>

    <targetConfigs>

        <targetConfig targets="lightning__RecordAction">

            <actionType>Action</actionType>

        </targetConfig>

    </targetConfigs>

</LightningComponentBundle>

A headless action can be invoked by creating an invoke() method that is exposed publicly with an @api decorator. Each time we clicked on the button this will call invoke() function every time. The component is inserted into the DOM right when the record page is rendered so you cannot rely on any of the standard lifecycle hooks for executing the action.

It is important to note that headless actions do not have the ability to prevent the user to double-click the action. The following code sample will show you how you can make the invoke() method asynchronous to prevent it from being called twice.

my-headless-action.js

import { LightningElement, api, wire } from 'lwc';

import { ShowToastEvent } from 'lightning/platformShowToastEvent';

export default class HeadlessAsync extends LightningElement {

    isExecuting = false;    

    @api async invoke() {

        if (this.isExecuting) {

            return;

        }  

        this.isExecuting = true;

        this.dispatchEvent(new ShowToastEvent({

            title: 'Success',

            message: 'Your invoke function is called',

            variant: 'success'

        }));      

        await this.sleep(2000);

        this.isExecuting = false;    

    }  sleep(ms) {

        return new Promise((resolve) => setTimeout(resolve, ms));

    }  

}

Preview

I'll hope you enjoyed this blog and learned something new today. Please give us your suggestion in the comments section.