Headless Quick Action (LWC)

Hi Trailblazer,

Hope you are doing well. And welcome to my new article.

When we create a quick action in salesforce , it opens as a popup, even we create it with LWC. But sometime we do not want to open that popup and just want to perform some opertaion and want to see a success or failure message. To achieve this lets follow the below steps.

Create an LWC component and use below code and modify it as per given steps

Html

We just need to keep html part as it as given below.

<template> </template>

JS controller

We need to add a invoke() method in js controller. This method is executed when we launch our quick action. We can put our business logic in it. i.e. Making update with apex or need to call any api .

And handle the response of business logic and display toast message .

import { api, LightningElement } from 'lwc'; import { ShowToastEvent } from 'lightning/platformShowToastEvent'; export default class Quickclosecase extends LightningElement { @api invoke() { // implement business logic and check response and accordinly display success or failure message. this.dispatchEvent( new ShowToastEvent({ title: "Headless Action", message: "Action Completeds", variant: "success" }) ); } }

XML

In xml we need to set target as lightning__RecordAction and actionType as Action.

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

Once you done this, deploy your code. And now we can create quick action from object (on which you want to take action) menu.

And then drop it on approperiate page layout. That’s it.

Feel free to share your comments in comment box.

Looking forward for you in next article.

Scroll to Top