Hello friends today we will learn create quick Action in Lightning Web Components in Salesforce. By quick action we can perform business logics in Lightning record page. With custom quick actions, you can make your users navigation as smooth as possible by giving them convenient access to information that’s most important. A quick action can invoke a custom Lightning web component on record pages.
We have two types of Quick Action available in LWC.
- Screen Actions : In it a screen flow is open like modal pop and ask users to fill and submit the information.
- Headless Actions: In it we can perform action without opening any screen flow. its same like JavaScript button action in classic view in salesforce. As we are directly calling the JavaScript so we don’t need the HTML file.
Lets understand with simple example:
1.Screen Action
LWCQuickActionTechdicer.html :
<template>
<lightning-quick-action-panel header="LWC Quick Action Techdicer">
<p>In it a screen flow is open like modal pop and ask users to fill and submit the information.</p>
<div slot="footer">
<lightning-button variant="neutral"
label="Cancel" onclick={closeAction}>
</lightning-button>
<lightning-button variant="brand"
label="Save" onclick={closeAction}
class="slds-m-left_x-small">
</lightning-button>
</div>
</lightning-quick-action-panel>
</template>
LWCQuickActionTechdicer.JS :
import { LightningElement } from 'lwc';
import { CloseActionScreenEvent } from 'lightning/actions';
export default class LWCQuickActionTechdicer extends LightningElement {
closeAction(){
this.dispatchEvent(new CloseActionScreenEvent());
}
}
LWCQuickActionTechdicer.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>
2. LWCQuickActionHeaderLessTechdicer.Js :
import { LightningElement, api} from 'lwc';
import { ShowToastEvent } from 'lightning/platformShowToastEvent';
export default class LWCQuickActionHeaderLessTechdicer extends LightningElement {
isExecuting = false;
@api recordId;
@api async invoke() {
if (this.isExecuting) {
return;
}
this.isExecuting = true;
await this.sleep(2000);
this.isExecuting = false;
this.dispatchEvent(
new ShowToastEvent( {
title: 'Success',
message: 'LWC HeaderLess Quick Action',
variant: 'success'
} )
)
}
sleep(ms) {
return new Promise((resolve) => setTimeout(resolve, ms));
}
}
2. LWCQuickActionHeaderLessTechdicer.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>
After creating these components add them this component to custom object quick action and add these button to layout.
Total views : 1048999