How to call LWC method from Detail Page Button

Question

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.

Answer 1

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

https://help.salesforce.com/articleView?id=release-notes.rn_lwc_quick_actions.htm&type=5&release=232

You just have to change you xml file to this :

exampleQALWC.js-meta.xml

<?xml version="1.0" encoding="UTF-8"?>
<LightningComponentBundle xmlns="http://soap.sforce.com/2006/04/metadata">
    <apiVersion>52.0</apiVersion>
    <isExposed>true</isExposed>
    <targets>
        <target>lightning__RecordAction</target>
    </targets>
     <targetConfigs>
    <targetConfig targets="lightning__RecordAction">
      <actionType>Action</actionType>
    </targetConfig>
  </targetConfigs>
</LightningComponentBundle>

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

exampleQALWC.js

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 !

Answer 2

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.

Answer 3

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;
                }        
            </aura:html>
            <c:yourlwc recordId="{!v.recordId}" onclose="{!c.closeQA}"> </c:yourlwc>
</aura:component>

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) {
    $A.get("e.force:closeQuickAction").fire();
  },
})

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

const closeQA = new CustomEvent('close')
this.dispatchEvent(closeQA);