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. 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.
Global Quick Action
Global Quick Action
Global Quick Action in Page Layout
Global Quick Action in Page Layout

Quick Action using LWC

This is how our implementation will look like:

Quick Action using LWC
Quick Action using LWC

This will work on Mobile Device as well.

Quick Action using LWC on Mobile App
Quick Action using LWC on Mobile App

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.

Leave a Reply

Your email address will not be published. Required fields are marked *