URL Hack – Open button and action from LWC

open button and action from lwc :- Salesforce allows Lightning Web Component and Aura Components to be directly used as button and actions on record page. Sometimes, We need to open custom button and actions invoked from LWC. As a solution, We can rely on URL hack invoke button and action from LWC.

In Aura, A lightning:quickActionAPI component allows you to access methods for programmatically controlling quick actions on record pages. This component is supported in Lightning Experience only. There is no alternative at the moment in Lightning Web Component.

URL Hack for Quick Action API – Open button and Action from button click in LWC

As Quick Action API is not available in Lightning Web component, We wanted an alternative to invoke the actions from LWC programtically. In this use case, We are going to invoke a LWC button, Aura button and global action on button click.

LWC Code – invokeCustomButton

invokeCustomButton.html

HTML files includes three buttons with event handlers for different actions. It is very simple without any condition displayed on the page.

<template>
	<lightning-button variant="brand" label="Invoke LWC button" title="Invoke LWC button" onclick={handleLwcClick}>
	</lightning-button>
	<lightning-button variant="brand" label="Invoke Aura button" title="Invoke Aura button" onclick={handleAuraClick}>
	</lightning-button>
	<lightning-button variant="brand" label="Invoke Standard Quick Action" title="Invoke Standard Quick Action" onclick={handleQuickClick}>
	</lightning-button>
</template>

invokeCustomButton.js

The component provides methods to navigate to different types of quick actions:

• handleLwcClick(): Sets apiName to the LWC quick action and navigates.
• handleAuraClick(): Sets apiName to the Aura quick action and navigates.
• handleQuickClick(): Sets apiName to a standard quick action (Global.NewNote) and navigates.

PS: LWC_Button and Aura_comp are api names of action. You need change this with the api name you have used in your org. If you don’t have any LWC button and Aura button, Please create one.

import { LightningElement, api } from 'lwc';
import { NavigationMixin } from 'lightning/navigation';
export default class InvokeCustomButton extends NavigationMixin(LightningElement) {
    apiName;
    @api recordId;
    @api objectApiName;
    get pagereference() {
        return {
            "type": "standard__quickAction",
            "attributes": {
                "apiName": this.apiName
            },
            "state": {
                "objectApiName": this.objectApiName,
                "context": "RECORD_DETAIL",
                "recordId": this.recordId,
                "backgroundContext": "/lightning/r/Opportunity/" + this.recordId + "/view"
            }
        }
    }
    handleLwcClick() {
        this.apiName = this.objectApiName+'.LWC_Button';
        this[NavigationMixin.Navigate](this.pagereference, true);
    }

    handleAuraClick() {
        this.apiName = this.objectApiName+'.Aura_comp';
        this[NavigationMixin.Navigate](this.pagereference, true);
    }

    handleQuickClick() {
        this.apiName = 'Global.NewNote';
        this[NavigationMixin.Navigate](this.pagereference, true);
    }
}

invokeCustomButton.js-meta.xml

The component has been only exposed to record page as we are looking to open button and action available on record page.

<?xml version="1.0"?>
<LightningComponentBundle xmlns="http://soap.sforce.com/2006/04/metadata">
	<apiVersion>57.0</apiVersion>
	<isExposed>true</isExposed>
	<targets>
		<target>lightning__RecordPage</target>
	</targets>
</LightningComponentBundle>

Demo – Invoke LWC quick action, Aura Quick action and Global action from button click in LWC

You need to edit the lightning record page and place your component on the page to test it. Once you added the component, save and activate the lightning page.

Do you need help?

Are you stuck while working on this requirement? Do you want to get review of your solution? Now, you can book dedicated 1:1 with me on Lightning Web Component completely free.

GET IN TOUCH

Schedule a 1:1 Meeting with me

Also checkout this https://salesforcediaries.com/category/lightning-web-component