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.
does this works for community/experience as well?
Yes it will work.
Thanks for your very well written article. The explanation of the two different uses was very helpful, and especially your example of how to keep the button from running multiple times.
I have discovered that if a LWC is exposed as a QA and the page is refreshed when the QA modal is open, then the page refreshes with the modal open and a spinner that does not go away unless you close the modal manually. Once you close it, the page displays normally and the LWC can be open without problems. Have you noticed this and do you know, is this a known issue? Do you know of any work arounds?
Yes because details are present in URL. If you clear value from URL that will also work.
Can we pass some parameters along with event?
That’s not supported. Also you are closing it then why you want to pass data there?
lwc qa demo where is this label given?I don’t understand how we are adding this functionality to this button.Can you please mention api name for this button.