Headless action button using LWC (No Modals)

 

A headless quick action executes custom code in a Lightning web component. Unlike a screen action, a headless action doesn’t open a modal window.

Expose invoke() as a public method for headless quick actions; the invoke() method executes every time the quick action is triggered.

Return type of invoke() is void. Using async will make invoke() execute asynchronously. 

// js file

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

export default class DispatchEventHeadlessAction extends LightningElement {
    @api recordId;
     isExecuting = false;

    @api async invoke() {
        if (this.isExecuting) {
          // This code uses a boolean flag to block a double execution
          return;
        }

        this.isExecuting = true;

        // Fire Toast message
        let event = new ShowToastEvent({
            title: 'I am a headless action!',
            message: 'Hi there! Starting...'
        });
        this.dispatchEvent(event);
        // Wait and fire another another Toast message
        await this.sleep(2000);
        // Fire Toast message
        event = new ShowToastEvent({
            title: 'I am a headless action on record with id ' + this.recordId,
            message: 'All done!'
        });
        this.dispatchEvent(event);
    }

    sleep(ms) {
        // eslint-disable-next-line @lwc/lwc/no-async-operation
        return new Promise((resolve) => setTimeout(resolve, ms));
    }
}

xml file

<?xml version="1.0"?>
<LightningComponentBundle xmlns="http://soap.sforce.com/2006/04/metadata">
	<apiVersion>62.0</apiVersion>
	<isExposed>true</isExposed>
	<targets>
		<target>lightning__RecordAction</target>
	</targets>
	<targetConfigs>
		<targetConfig targets="lightning__RecordAction">
			<actionType>Action</actionType>
		</targetConfig>
	</targetConfigs>
</LightningComponentBundle>