I have created an LWC component to do verification of some fields on the current record and want to call the LWC method from a button on the page layout. I tried using LWC inside the lightning component and call that Lightning component from quick action, but it is opening quick action popup, I don't need to open any popup or page, just want to call the LWC method, and based on the result I will show toaster. Also tried the VF page to achieve this but I am not able to achieve this.

Please help.

3 Answers 3


Since Summer 21, you can invoke LWC from a Quick action button.

Documentation : https://developer.salesforce.com/blogs/2021/05/learn-moar-with-summer-21-lwc-quick-actions.html


You just have to change you xml file to this :


<?xml version="1.0" encoding="UTF-8"?>
<LightningComponentBundle xmlns="http://soap.sforce.com/2006/04/metadata">
    <targetConfig targets="lightning__RecordAction">

You will be able to create a regular Quick Action button and you will have the option to select a LWC component

You will also change your js to implement the


export default class exampleQALWC extends LightningElement {
// you can also do wire or recordId here as standard LWC
  @api invoke() {
    //Here insert your code

Don't forget to import :

import { LightningElement, api } from 'lwc';

Note that you can't use HTML at all when you creating this type of buttons

Good luck !

  • How do you add the button to the record page?
    – user2018
    Commented Feb 11, 2022 at 10:53

The simplest approach is to implement your LWC so it visually shows a button of its own, have it set isExposed as true in its metadata with appropriate target config to let you add it to Lightning Record Pages of the required object type(s), then add the LWC as a component on the Lightning Record Page itself (using the Lightning App Builder). That way you will see the button and the user can press it to have the record "validated" and the toast raised as needed.

  • Thanks Phil. Yes, I know this approach and it is working fine. But the customer wants to call from the page layout button. Commented Oct 29, 2020 at 10:34
  • You mean by defining a custom button on the actual page layout? Why?
    – Phil W
    Commented Oct 29, 2020 at 10:50
  • Yes, I told the same to the client why you need to use the button on-page layout, they said we were using the same functionality in classic and they want in LWC with the same button. Commented Oct 29, 2020 at 10:59
  • In this case, why use LWC for the processing? It makes it much harder to support classic (jumping hoops using Lighting-Out etc.)
    – Phil W
    Commented Oct 29, 2020 at 13:25

If you need to use a quick action then you can hide the modal using the following markup. You will also need to automatically close the quick action after the verification is finished.

<aura:component implements="force:lightningQuickAction,force:hasRecordId" >
            <aura:html tag="style">
                .slds-modal {
                  visibility: hidden;
                  display: none;
                .slds-backdrop {
                  display: none;
            <c:yourlwc recordId="{!v.recordId}" onclose="{!c.closeQA}"> </c:yourlwc>

Add this to your Aura component controller to close the Quick Action. This function can be called from your lwc.

    closeQA : function (component, event, helper) {

After the verification has finished you can dispatch an event to close the quick action.

const closeQA = new CustomEvent('close')
  • Thanks Jemat, Yes this is one of the approach but I have to click on that button only, nothing wants to show like a popup or page. If I use this approach and hide that popup in the init method then the popup will appear for a half sec. What they want after clicking on that button it should call the LWC function directly instead of open any popup or page. Commented Oct 29, 2020 at 12:03

You must log in to answer this question.

Not the answer you're looking for? Browse other questions tagged .