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. Since the Summer ‘21 release, you have been able to 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 in 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, such as 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.


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:


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.

    <lightning-quick-action-panel header="Edit Fields Action">
        <lightning-record-edit-form record-id={recordId}
            <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>


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());
            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="">
        <targetConfig targets="lightning__RecordAction">

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 voilà, Danielle is happy and so are we!


7 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


      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.

  3. I was glad to find this article. The details about how to change the metadata file so that the LWC can be exposed as a Quick Action helped me a lot. I’m having an issue though. My use case was to put the quick action on the Order object, when you open it, it brings up a list of Order Items that are attached to the order that meet certain criteria. There is then a button below the list that edits those Order Items so they no longer meet the criteria, it then closes the LWC. Problem is, if you click on the quick action again, those order items that were just edited are still showing in their original state. If you refresh the page, then click the QA then it does not show the edited items. I tried putting a hard refresh in the javascript that closes the LWC, but then when you close it, the page refreshes, but it opens as if it’s trying to load the quick action, (a white modal box opens) and the spinner runs until you close the mystery modal.

  4. Can we pass parameter along with the action ? Like if from record page we call this action and pass the record id also along with this?

Add Comment