Quick Action without Modal in LWC – Headless Quick Action

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 that. Let’s hop into the implementation.

Headless Quick Action in LWC

In this implementation, we will create a Headless Quick Action in LWC to perform some logic. We can write any logic after clicking a button. But for this demonstration, we will just show the success message.

In order to create Headless Quick Action in LWC, we need to create a Lightning Web Component. The Lightning Web Component will not have any code in the HTML file except the <template> tag, as we are not showing a screen for this quick action.

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

<?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>

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. For this implementation, we will just display the success message.

Also Read:

headlessQuickAction.js

import { LightningElement, api } from 'lwc';
import {ShowToastEvent} from 'lightning/platformShowToastEvent';

export default class HeadlessQuickAction extends LightningElement {

    @api invoke() {
        const successToast = new ShowToastEvent({
            title : "Headless Quick Action!",
            message : "Headless Quick Action executed successfully.",
            variant : 'success'
        });
        this.dispatchEvent(successToast);
    }
}

That is all. Just create a Quick Action from Settings -> Object Manager -> Object Name -> Buttons, Links, and Actions -> New Action. For Action Type, select Lightning Web Component and select the component from the list.

Finally, add the button on the Page Layout and we are done.

Quick Action without Modal in LWC

After clicking a button, a success message will be displayed like below:

Quick Action without Modal in LWC - Headless Quick Action
Quick Action without Modal in LWC – Headless Quick Action

That is all from this post. This is how we can execute Quick Action without Modal in LWC using Headless Quick Action.

Must Read:

If you don’t want to miss new implementations, please Subscribe Here.

Feel free to check other Complete Lightning Web Component Implementations.

If you want to know more about Headless Quick Action, check official Salesforce documentation here.

See you in the next implementation, thank you.

Leave a Comment