Quick Action using LWC with Example

In this post, we will create a Quick Action using LWC (Lightning Web Component). For Aura Components, we have to implement force:lightningQuickAction interface in the Aura component to enable Aura Component as Quick Action.

There is a standard way to use Quick Action in LWC which is introduced in Summer ’21 Release. Please check the Summer ’21 Feature section at the bottom of page.

But as of Summer ’20, there is no standard way to create a Quick Action using Lightning Web Component (LWC). But we can still implement it with a simple and effective workaround without making any major changes. This will work on Mobile App as well. Let’s just hop into the implementation.

Implementation

To implement Quick Action using the Lightning Web Component (LWC):

• First, create a Lightning Web Component.
• Then, we need to include this Lightning Web Component inside Lightning Aura Component.
• Finally, we will create a Global Quick Action for Lightning Aura Component and add it to the record page.

First, create a Lightning Web Component viewAccount that will use lightning-record-view-form of Lightning Data Service to show few fields of the Account record. We will hardcode the Account Id in JS Controller. Ideally, we should make it dynamic but that is not our primary focus. If you want to know how lightning-record-view-form of Lightning Data Service works in detail, please check this post since this post won’t explain it.

viewAccount.html

<template>
    <lightning-card title="Account Details">
        <div class="slds-p-left_medium">
            <div class="slds-p-left_medium">
                <!--To show record edit form-->
                <lightning-record-view-form object-api-name="Account" record-id={strAccountId}>
                    <lightning-output-field field-name="Name"></lightning-output-field>
                    <lightning-output-field field-name="AccountNumber"></lightning-output-field>
                    <lightning-output-field field-name="Phone"></lightning-output-field>
                    <lightning-output-field field-name="Website"></lightning-output-field>
                    <lightning-output-field field-name="Description"></lightning-output-field>
                </lightning-record-view-form>
            </div>
        </div>
    </lightning-card>
</template>

viewAccount.js

import { LightningElement } from 'lwc';
export default class ViewAccount extends LightningElement {
    strAccountId = '0012x000008VEr5AAG';
}

Then, create a Lightning Aura Component and include above Lightning Web Component inside it. Make sure to implement force:lightningQuickAction interface.

QuickAura.cmp

<aura:component implements="flexipage:availableForAllPageTypes,force:lightningQuickAction" 
                access="global" >
	<c:viewAccount></c:viewAccount>
</aura:component>

Finally, we just need to create Quick Action for Lightning Aura Component we created earlier. For this implementation, we will create Global Quick Action.

• Type Global Actions in the Quick Find box and click on Global Actions.
• Click on New Action. For Action Type, select Lightning Component. Select the Lightning Component that we created earlier. Enter the Label and Save it.
• Now, we can use this Global Action wherever supported. Add it on the Record Detail page of any Object.
• Edit the Page Layout, select Global Action we created earlier from Mobile and Lightning Actions. Then, drag-and-drop it under the Salesforce Mobile and Lightning Experience Actions. Click Save.

Quick Action using LWC

This is how our implementation will look like:

This will work on Mobile Device as well.

Summer ’21 Update

Now we can directly use the Lightning Web Component as a Quick Action.

We just need to update the metafile of the component by adding two properties.

• Add lightning__RecordAction as target in targets.
• Add targetConfig for lightning__RecordAction with actionType as Action or Screen.

Below is the sample metadata file:

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

Please Subscribe here if you don’t want to miss new implementations.

This is how we can implement Quick Action using LWC (Lightning Web Component). If you want to check more implementations using Lightning Web Component, you can check it here. If you want to know more about Quick Actions, you can check official Salesforce documentation here.