Create Quick Actions with Lightning Web Components

 

To set up a Lightning web component as a quick action on a record page, define the metadata in <component>.js-meta.xml. 

Define a lightning__RecordAction target and  specify actionType as ScreenAction for a screen action that opens in a window or Action for a headless action that executes when clicked.

callLwc.html

<template>

</template>

callLwc.js

import { LightningElement,api,track } from 'lwc';

import {ShowToastEvent} from 'lightning/platformShowToastEvent'

export default class CallLwc extends LightningElement {

@api recordId;

@api invoke(){

alert('Record Id is: '+this.recordId;

}

callLwc.js-meta.xml

<?xml version="1.0" encoding="UTF-8"?>

<LightningComponentBundle xmlns="http://soap.sforce.com/2006/04/metadata">

<apiVersion>55.0</apiVersion>

<isExposed>true</isExposed>

<targets>

<target>lightning__RecordAction</target>

</targets>

<targetConfigs>

<targetConfig targets="lightning__RecordAction">

<actionType>Action</actionType>

</targetConfig>

</targetConfigs>

</LightningComponentBundle>

To Create Quick Action:

As we are creating this action for the Contact Record Page, it is an object-specific action.

• Navigate to the Contact Object  in Setup.
• Under Button, Links, and Actions.
• Create a new Action.
• Select LWC as Action Type.
• Select your LWC component 
• Give label to your Action
• Name will be auto Populated
• Click Save Button
• Edit the Page Layout, and select Mobile & Lightning Actions
• Drag the new Quick Action to the Lightning Experience Actions section 
• You might have to override the standard actions before you’re able to add custom actions 

If you have any comments or queries about this, please feel free to mention them in the comments section below.