LWC as a Quick Actions

• In Summer 21’ release, Salesforce introduced Lightning Web Component (LWC) as a quick Action. Earlier this option was available only for Aura components. This can be enabled for LWC components only when it is wrapped inside an aura component. 

• There are two types of actions available in the LWC Quick Action 
• Screen Actions 
• Headless Actions 

• It is only available on lighting record pages. For App page, home page, Community page still aura framework only can support for quick actions 

Screen Action: 

                It is an open modal popup window where users can see the information at the modal popup window. It is used where there is a need to see the visual screen in the UI. To be precise, it is something that a user is going to perform or see any information on the screen when the screen action button is clicked. 

                    To enable the Lightning web components as a quick action, we need the following metadata and, we need to specify the action (Screen Action/Headless Action) in the target configurations. 

Note: Once the action type is defined, it cannot be changed 

Scenario 

  Try to change the action type once it is defined and deployed 

Error: 

Solution: 

Try to delete that component and remove its references; then, create the new one with specific action type you want. Action Types are stored in the memory–that is because the action type cannot be changed once it is defined. 

• To do the screen action implementation, one can use the lightning Quick Action Panel element which will increase the user experience by separating it into three parts namely      
• Header  
• Body 

• Footer 

• For closing the modal popup window, use the Close Action Screen Element. It is defined in our JavaScript file of LWC,. To use this element, import the CloseActionScreenEvent from ‘lightning/actions'(JS File) and then define a method to dispatch this event.  

Example: 

import { CloseActionScreenEvent } from “lightning/actions”. 

export default class ScreenAction extends LightningElement {     

  closeAction() { 

    this.dispatchEvent(new CloseActionScreenEvent()). 

  } 

} 

1) Sample Program implementing the LWC Quick Action (Screen Action): 

ScreenAction.html 

<template> 

<! –Displaying the account information–> 

<lightning-record-view-form record-id={recordId} object-api-name=”Account”> 

<! –Using lightning-quick-action-panel for rich UI separting into three parts –> 

<! –Header–> 

<lightning-quick-action-panel style=”color:#306BFF” header=”Account Basic Information”> 

<! –Body–> 

<! –Showing the account informations–> 

<div class=”slds-grid”> 

<div class=”slds-col slds-size_1-of-3″> 

<lightning-output-field field-name=”Name”></lightning-output-field> 

<lightning-output-field field-name=”AccountNumber”></lightning-output-field> 

</div> 

<div class=”slds-col slds-size_1-of-3″> 

<lightning-output-field field-name=”Phone”></lightning-output-field> 

<lightning-output-field field-name=”BillingAddress”></lightning-output-field> 

</div> 

<div class=”slds-col slds-size_1-of-3″> 

<img src=”https://www.winhelponline.com/blog/wp-content/uploads/2017/12/user.png” style=”width: 150px; height: 150px;”> 

</div> 

</div> 

<! –Footer –> 

<! –Implementing the CloseActionScreenEvent element to close the modal popup–> 

<div slot=”footer”> 

<lightning-button variant=”neutral” label=”Cancel” onclick={closeAction}></lightning-button> 

</div> 

</lightning-quick-action-panel> 

</lightning-record-view-form> 

</template> 

ScreenAction.js 

import { LightningElement,api } from “lwc”; 

import { CloseActionScreenEvent } from “lightning/actions”. 

export default class ScreenAction extends LightningElement { 

    @api recordId; 

  //calling this method in html to close the modal popup 

  closeAction() { 

    this.dispatchEvent(new CloseActionScreenEvent()). 

  } 

} 

ScreenAction.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”> 

<! –Action type–> 

<actionType>ScreenAction</actionType> 

</targetConfig> 

</targetConfigs> 

</LightningComponentBundle> 

Output: 

2) Once you created and deployed the code, you need to create the quick action on the object you need this quick action.  

• Go to Account tabà click SetupàEdit objectà click Buttons, Links, and Actions (left side)àNew action. 
• Choose the Action Type as ‘Lightning Web Component’ 
• Specify the LWC Name and give the label name 

3) Drag and drop the quick action in the specific layout (where you need that quick action) 

• Go to Account tabà click SetupàEdit objectà Page LayoutsàAccount Layout. 
• Go to Mobile & Lightning Actions 
• Search the quick action, drag, and drop into Salesforce Mobile and Lightning Experience Actions section. 

Some other use cases for this screen action are filling in a form while creating a record, displaying the record with crisp information when the screen action button is clicked, etc. 

Headless Action: 

      This can be implemented directly using JavaScript code and hence it does not require the HTML file in the LWC Component. For example, if any JS-oriented task needs to be performed, this headless action will be useful. It shows the console debug when the headless action button (Inspectàconsole tab) is clicked.  

       To implement this headless action, call the invoke () method and it should be exposed as public method. For a public method use @api decorator. 

       The main difference between Screen Action and Headless Action is their meta tag. Define the action type as Action for Headless Action 

<targets> 

<target>lightning__RecordAction</target> 

</targets> 

<targetConfigs> 

<targetConfig targets=”lightning__RecordAction”> 

<! –Action type–> 

<actionType>Action</actionType>  à this ActionType differs 

</targetConfig> 

</targetConfigs> 

1. Sample Program implementing the LWC Quick Action (Headless Action): 

HeadlessAction.html 

• It is optional, even this html file can be deleted. 

<template> 

</template> 

HeadlessAction.js 

import { LightningElement,api} from ‘lwc’; 

export default class HeadlessAction extends LightningElement { 

//calling the invoke method 

@api invoke () { 

console.log (“This is headless quick Action. Have a good day!!!”). 

} 

} 

HeadlessAction.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”> 

<! –Action type–> 

<actionType>Action</actionType> 

</targetConfig> 

</targetConfigs> 

</LightningComponentBundle> 

Output: 

Repeat the step 2 and step 3 mentioned for the screen action. (Create the button and place it in the appropriate layout you want) 

Step 2: 

Step 3: 

Some other use cases for this headless action are navigating to another page, sending email to the user when the headless action button is clicked etc. 

References: 

• https://developer.salesforce.com/docs/component-library/bundle/lightning-quick-action-panel/documentation 

• https://help.salesforce.com/s/articleView?id=release-notes.rn_lwc_quick_actions.htm&type=5&release=232 

• https://help.salesforce.com/s/articleView?language=en_US&type=5&id=sf.actions_overview.htm 

• https://developer.salesforce.com/docs/component-library/documentation/en/lwc/lwc.use_config_for_quick_actions 

• https://www.mstsolutions.com/technical/launching-lightning-component-as-quick-action/