Admins / Developers

Create Lightning Web Components (LWC) Using Quick Actions

By Nadina Lisbon

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!


The Author

Nadina Lisbon

Salesforce MVP | Salesforce Certified Domain Architect | Platform Developer II | Platform Champion | User Group Leader


    James Mcvicar
    October 27, 2021 10:25 pm
    What's the benefit of using this over a standard quick action?
    Nadina Lisbon
    October 28, 2021 7:56 pm
    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.
    Thomas Kaplanski
    October 28, 2021 10:39 pm
    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?
    Christine Marshall
    October 29, 2021 9:47 am
    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
    Asterisk Loftis
    November 03, 2021 3:01 pm
    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.
    Tim Osborn
    February 07, 2022 2:59 am
    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.
    March 03, 2022 12:40 pm
    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?
    November 11, 2022 7:32 am
    can we make these action buttons available on salesforce mobile app also. i tried but there is some limitation to call lwc from mobile app
    Shamser Dhami
    December 22, 2022 6:26 pm
    I tried many option available along with this one but I couldn't get the desired output in Case page though it works in Opportunity and Leads. Does anyone know why?
    Shamser Dhami
    December 26, 2022 4:53 am
    why this doesn't work in case page ??
    Shamser Dhami
    December 26, 2022 4:56 am
    I was able to get expected result in Leads and Opportunity but doesn't works on Cases. Is there any particular reason for this to not to work on Case page ?
    Shamser Dhami
    December 26, 2022 5:00 am
    I was able to get expected result in Leads and Opportunity but doesn’t works on Cases. Is there any particular reason for this to not to work on Case page ?

Leave a Reply