Use Lightning Web Components for Quick Action

So today we will check how we can use Lightning Web Components (LWC) for Quick Action. To achieve this previously, we need to encapsulate LWC in Aura components. But after the Salesforce Summer 21 release we no longer need that. You can quickly check all the latest feature here. As of now LWC are only supported in Record Detail Quick Action. But going forward Salesforce will keep adding support for different User Experience.

So we have two types of Quick Action available in LWC.

Screen Actions: So this a traditional modal approach. It open a modal where we can ask user to perform some action and once done we can close it. We no longer need to call Aura component to close the window.

Headless Actions: This is a new addition in LWC. It allow us to directly run the JavaScript from the button(Remember this is the same behavior we get in classic JavaScript button). As we are directly calling the JavaScript so we don’t need the HTML file.

How to enable Lightning Web Components (LWC) for Quick Action:

We need to add <target>lightning__RecordAction</target> to enable the LWC for Quick Action. In the targetConfig we need to give ScreenAction, or Action. Below is the updated meta.xml.

<targets>
  <target>lightning__RecordAction</target>
</targets>
<targetConfigs>
  <targetConfig targets="lightning__RecordAction">
    <actionType>ScreenAction</actionType>
  </targetConfig>
</targetConfigs>

How to close Lightning Web Components (LWC) from Quick Action:

We need to import CloseActionScreenEvent from lightning/actions to close the modal.

import { CloseActionScreenEvent } from 'lightning/actions';
 
closeAction(){
  this.dispatchEvent(new CloseActionScreenEvent());
}

Sample Code

lwc_QuickAction.html

<template>
    <lightning-quick-action-panel title="Quick Action Title">
      Quick Action using LWC<br/> Demo by newstechnologystuff
      <div slot="footer">
        <lightning-button variant="neutral" label="Cancel" onclick={closeAction}></lightning-button>
        <lightning-button variant="brand" label="Save" onclick={closeAction}></lightning-button>
      </div>
    </lightning-quick-action-panel>
</template>

lwc_QuickAction.js

import { LightningElement } from 'lwc';
import { CloseActionScreenEvent } from 'lightning/actions';

export default class Lwc_QuickAction extends LightningElement {

    closeAction(){
        this.dispatchEvent(new CloseActionScreenEvent());
    }
}

lwc_QuickAction.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>

You have noticed a new tag lightning-quick-action-panel. This is a new base component which allow us to create a consistent experience for users.

Demo:

Headless Actions: So now we will check how to use Headless Actions. We can invoke this by creating an invoke() method that is exposed publicly with an @api decorator. This is called every time we click the button. All the standard events are called when the page load so we can’t really use them as required. User can accidently click the button twice this is the same issue which we face in JS button. In LWC, JS we can use all the existing features which include lightning data service, calling apex and other APIs.
For Headless Actions we need to use <actionType>Action</actionType> attribute. To prevent the double click we can use Aync-Await asynchronous. If you want to learn about them in detail you can check here.

lwc_QuickAction.js

import { LightningElement, api } from 'lwc';

export default class Lwc_QuickAction extends LightningElement {
 
    isExecuting = false;    
    @api async invoke() {
        if (this.isExecuting) {
            return;
        }  
        console.log('Execution Start');
        this.isExecuting = true;
        await this.sleep(2000);
        this.isExecuting = false;
        console.log('Execution Stop');
    }  sleep(ms) {
        return new Promise((resolve) => setTimeout(resolve, ms));
    }
}

lwc_QuickAction.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>

Demo:

So you have noticed that even if I click button multiple times it will not execute the code again unless the previous execution is completed. We have used Action in attribute. Once saved we cannot change the actionType of LWC. If we try to change it we will get the error “Cannot change the type of the existing Lightning Web Component action.”

Check my Instagram page for more updates.

So now we can truly replace our JS button and all other classic button using LWC. We can Create Quick Actions with Lightning Web Components (LWC) and perform many task in the similar way we done in classic. Did you like the post or do you want to add anything, let me know in comments.