Using LWC Quick Action Buttons on Record Detail page

Summer ’21 Salesforce Release, we can add Lightning web components as a record detail page quick action buttons. Before we were using the Aura component wrapped with LWC. 

LWC QuickAction supports two different options.

Screen Actions:

It simply likes an Aura Quick action, it will open up a modal window that you can use to display data or interact with data. We can convert any LWC component to the Quick action button to changing the configuration file(meta.xml file). By default, it will show without header and footer actions. 

Following the example, we will add this LWC quick action with the header and footer with cancel actions. 

lwcQuickActionButton.html

<template>

    <lightning-quick-action-panel title="Quick Action Hello World">
        <!-- Model Body  -->
        <div class="slds-p-around_large">
            <p>Hello World</p>
        </div>

        <!-- Model Footer -->
        <div slot="footer">
          <lightning-button variant="neutral" label="Cancel" onclick={handleCancel}></lightning-button>
        </div>
        
      </lightning-quick-action-panel>
</template>

lwcQuickActionButton.js

import { LightningElement,api } from 'lwc';
import { CloseActionScreenEvent } from 'lightning/actions';

export default class LwcQuickActionButton extends LightningElement {

    // to close the model window 
    handleCancel(){
        this.dispatchEvent(new CloseActionScreenEvent());
      }
}

Here we need to import new method to close model window.

import { CloseActionScreenEvent } from 'lightning/actions';

then we need to call this event on click of close button and icon.

this.dispatchEvent(new CloseActionScreenEvent());

lwcQuickActionButton.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>ScreenAction</actionType>
   </targetConfig>
 </targetConfigs>
</LightningComponentBundle>

It's a little different from other component's meta files. here we need to specify actionType in targetConfigs. 

<actionType>ScreenAction</actionType>

Also found above code in Tech Shorts Git repo

Headless Actions:

This is simply a component without a .html file, which means there is no interaction. Onclick of this button, it will execute javascript methods and can call apex method to do some operations on the server-side. 

lwcQuickActionHeadless.html

<template>
    <!-- It would be blank -->
</template>

lwcQuickActionHeadless.js

import { LightningElement, api } from 'lwc';

export default class LwcQuickActionHeadless extends LightningElement {
    
    // This method executes on quick action button clicks
    @api invoke() {
        // here we can call apex method, but this method returns nothing. 
        console.log("Quick action called");
    }
}

We need to implement invoke() public method. The invoke() method executes every time the quick action is triggered.

lwcQuickActionHeadless.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>

It's a little different from other component's meta files. here we need to specify actionType in targetConfigs. 

<actionType>Action</actionType>

Also found above code in Tech Shorts Git repo