Create Lightning Web Components (LWC) Using Quick Actions

Share this article...

In a user-centric world, we enable our users to do more by placing the right information in the right place at the right time. From the Summer ‘21 release, you can now invoke a custom Lightning Web Component on a record page using Quick Actions!

Today, I will give a high-level overview of the different types of Lightning Web Component Actions, provide a quick decision guide on when to use each action, and finish with a use case combined with a code walkthrough.

Types of LWC Actions

When it comes to record page Lightning Web Components there are two types: Screen Quick Actions and Headless Quick Actions.

Screen Quick Action

These allow users to carry out updates via a modal window, like filling a form to create or edit a new record.

Headless Quick Action

These allow you to carry out an action without the need to display, like navigating to another page or dispatching an event.

💡How do I know which I should use?

Use Case

Danielle is our awesome VP of Sales, when it comes to updating deals, she wants to ensure her sales team is laser-focused on updating the key fields to win deals faster! Currently, the team uses the Edit button, but she would like a smaller consolidated view.

Let’s see how we can achieve this with an LWC Quick Action.

Solution

Using the lightning-record-edit-form component with lightning-input-field components we will create a mini form that captures the key fields for updates on an Opportunity. Lucky for us we can use the following template then tweak it for our use case.

Here is a quick breakdown of our changes to the LWC:

formfill.html

After speaking with Danielle, ‘Amount’, ‘Next Steps’ and ‘Stage’ are the three key fields that the team are constantly updating, so we add these fields as inputs. Let’s add ‘Opportunity Name’ as an Output as well, just for the visual.

<template>

    <lightning-quick-action-panel header=”Edit Fields Action”>

        <lightning-record-edit-form record-id={recordId}

                                    object-api-name={objectApiName}

                                    onsuccess={handleSuccess}>

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

            <lightning-input-field field-name=”Amount”></lightning-input-field>

            <lightning-input-field field-name=”NextStep”></lightning-input-field>

            <lightning-input-field field-name=”StageName”></lightning-input-field>

            <lightning-button variant=”neutral” label=”Cancel”></lightning-button>

            <lightning-button variant=”brand” class=”slds-m-left_x-small” label=”Save” type=”submit”></lightning-button>

        </lightning-record-edit-form>

    </lightning-quick-action-panel>

</template>

formfill.js

For our .js file we will keep it the same and update the message.

import { LightningElement, api } from ‘lwc’;

import { ShowToastEvent } from ‘lightning/platformShowToastEvent’;

import { CloseActionScreenEvent } from ‘lightning/actions’;

export default class FormFill extends LightningElement {

   @api recordId;

   @api objectApiName;

   handleSuccess(e) {

// Close the modal window and display a success toast

        this.dispatchEvent(new CloseActionScreenEvent());

        this.dispatchEvent(

            new ShowToastEvent({

                title: ‘Success’,

                message: ‘Opportunity Record Updated!’,

                variant: ‘success’

            })

        );

   }

}

Defining a Lighting Web Component for a Quick Action

To use a Lightning web component as a Quick Action, we need to define the component’s metadata. In our use case we created a screen Quick Action so we have set our lightning__RecordAction target and specify our actionType as ScreenAction.

<?xml version=”1.0″ encoding=”UTF-8″?>

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

    <apiVersion>52.0</apiVersion>

    <description>Formfill</description>

    <isExposed>true</isExposed>

    <masterLabel>Formfill</masterLabel>

    <targets>

        <target>lightning__RecordAction</target>

    </targets>

    <targetConfigs>

        <targetConfig targets=”lightning__RecordAction”>

            <actionType>ScreenAction</actionType>

        </targetConfig>

    </targetConfigs>

</LightningComponentBundle>

Let’s Create our Quick Action

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

  • Navigate to the Opportunity Object in Setup
  • Under Button, Links and Actions
  • Create a new Action

Let’s fill out the detail:

Then add to our page:

Now let’s see it in Action:

…and voila, Danielle is happy and so are we!

Resources

5 thoughts on “Create Lightning Web Components (LWC) Using Quick Actions

    1. Hi James,

      To answer your question, What’s the benefit of using this over a standard quick action?, this is more suited when a standard quick action is not enough and you need to leverage an LWC. LWC allow you to do a lot more. For example, to extend my use case, if I took the inputs and created an addiontional records.

      The goal here is to give awareness to the fact that you can invoke a custom Lightning Web Component on a record page using Quick Action.

      Hope that helps.

  1. I really don‘t see the point or benefit to quick actions… maybe your Use-case should be more advanced.

    Even if, what‘s the benefit to screenflows? Why using LWC for these light Use-cases?

    1. Christine Marshall

      Reply

      Hi Thomas,

      The aim of the article was to give a high level overview of LWC Quick Actions and a simple use case so that others can understand how to create them.

      Best, Christine

  2. This is a nice read to quickly understand how to use LWC Quick Actions. I think people are misunderstanding the intent though. The LWC Quick Action can invoke any LWC you can imagine. If you do not have a use case or cannot imagine how this might be useful to you that is okay, but since that was not the goal of this article it seems odd to critique that here.

Add Comment