Headless QuickAction in LWC Salesforce
Recently Salesforce has introduced a way to create Quick Action without Modal in LWC (Lightning Web Component), which is called the Headless Quick action in LWC.
Sometimes we need to perform an action using the Quick Action without showing the screen. Sometimes the logic has to run in the backend. Headless Quick Action will help to achieve exactly
headlessQuickAction.html
<template>
</template>In the metafile of the Lightning Web Component, we have to add the target as lightning__RecordAction. And in the targetConfigs, we have to add the actionType for lightning__RecordAction target as Action instead of Screen.
headlessQuickAction.js-meta.xml
import { LightningElement,api} from 'lwc';
<?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>
headlessQuickAction .js
import { LightningElement,api} from 'lwc';
import {ShowToastEvent} from 'lightning/platformShowToastEvent';
import fetchOpportunity from '@salesforce/apex/OpportunityController.fetchOppDetail';
export default class HeadlessQuickAction extends LightningElement {
@api recordId;
@api invoke() {
fetchOpportunity({'recId' : this.recordId}).then(result => {
if(result == true){
}
}).catch(error => {
console.log('error.body.message '+error.body.message);
})
}
}And finally, we need to import the @api decorator and add the @api invoke() method. Once the Quick Action button is clicked, this method will execute. We can add any logic as per our business requirements.
import { LightningElement,api} from 'lwc';
import {ShowToastEvent} from 'lightning/platformShowToastEvent';
import fetchOpportunity from '@salesforce/apex/OpportunityController.fetchOppDetail';
export default class HeadlessQuickAction extends LightningElement {
@api recordId;
@api invoke() {
fetchOpportunity({'recId' : this.recordId}).then(result => {
if(result == true){
// What is Next action
}
}).catch(error => {
console.log('error.body.message '+error.body.message);
})
}
}