Launch Custom Action from LWC?

Question:

I have a Lightning Web Component (LWC) on a Lightning page for a standard object, and I want to add a button within the LWC that triggers a custom action for that object. The custom action is of type “Lightning Component”.

When I add the action to the page layout and click it, it successfully launches the Aura component in a modal while the URL remains the same (e.g., https://myorg-dev-ed.lightning.force.com/lightning/r/Event/00UHq00000uEzEOMA0/view). However, I want to achieve the same functionality from within the LWC while staying on the view page.

I’ve tried using NavigationMixin, but it doesn’t seem to work for this use case. The primary goal is to control whether the button appears based on conditions while allowing the action to run in a modal.

Is there a way to launch the custom action for the object directly from the LWC? Any suggestions or guidance would be appreciated!

To launch a custom action for a standard object from an LWC, you can use the LightningModal.open() method in combination with Aura interoperability or URL hacks.

Below are two possible solutions:

Solution 1

Using NavigationMixin and URL Redirection

If the custom action is not directly invocable via the LWC, you can use the action’s endpoint URL to trigger it. By redirecting to this URL programmatically, you can simulate the action invocation.

Here’s how to use NavigationMixin in your LWC:

<template>
    <lightning-button label="Launch Action" onclick={handleLaunchAction}></lightning-button>
</template>

import { LightningElement } from 'lwc';
import { NavigationMixin } from 'lightning/navigation';

export default class LaunchCustomAction extends NavigationMixin(LightningElement) {
    handleLaunchAction() {
        const recordId = '00UHq00000uEzEOMA0'; // Replace with dynamic recordId
        const actionName = 'customActionName'; // Replace with your action's API name
        
        // Construct the URL to launch the action
        const actionUrl = `/lightning/r/Event/${recordId}/quickAction/${actionName}`;
        
        this[NavigationMixin.Navigate]({
            type: 'standard__webPage',
            attributes: {
                url: actionUrl
            }
        });
    }
}

This approach launches the action via its URL. However, it will navigate away from the current page and may not open the action in a modal.

Solution 2

Using Aura Interoperability to Invoke the Action in a Modal

If you want the action to open in a modal without leaving the View page, you can use Aura interoperability to invoke the action.

LWC HTML:

<template>
    <lightning-button label="Launch Action" onclick={handleLaunchAction}></lightning-button>
</template>

LWC JS:

import { LightningElement, api } from 'lwc';

export default class LaunchCustomActionAura extends LightningElement {
    @api recordId; // Pass the recordId dynamically if needed

    handleLaunchAction() {
        const event = new CustomEvent('invokeaction', {
            detail: { recordId: this.recordId }
        });
        this.dispatchEvent(event);
    }
}

Parent Aura Component:

<aura:component implements="force:hasRecordId,flexipage:availableForRecordHome" access="global">
    <aura:attribute name="recordId" type="String" />
    <lightning:button label="Launch Action" onclick="{!c.handleLaunchAction}" />

    <aura:handler name="invokeaction" event="c:invokeActionEvent" action="{!c.handleLaunchAction}" />
</aura:component>

Aura Controller:

({
    handleLaunchAction: function (component, event, helper) {
        const recordId = component.get("v.recordId");
        const actionAPI = component.find("quickActionAPI");
        const actionName = "customActionName"; // API name of the action
        
        actionAPI.invokeAction(actionName, {
            entityApiName: "Event",
            recordId: recordId
        }).then(result => {
            console.log("Action successfully invoked", result);
        }).catch(error => {
            console.error("Error invoking action", error);
        });
    }
})

This approach opens the custom action in a modal using Aura’s force:quickActionAPI.

Solution 3

Use Lightning Modal (If Available)

This approach leverages LightningModal (if available in your org) to directly invoke the custom action while maintaining the modal behavior. You can wrap the action in a Lightning Modal and invoke it from the LWC. Refer to Salesforce documentation for specific implementation details.

Summing Up

To launch a custom action for a standard object from an LWC, you have three main solutions:

1. Using NavigationMixin: This method constructs a URL for the action using the recordId and action API name, then navigates to it via NavigationMixin.Navigate. It redirects the user but does not open the action in a modal.
2. Using Aura Interoperability: This approach dispatches a custom event from the LWC to an Aura component. The Aura component uses force:quickActionAPI to invoke the action in a modal, maintaining the desired modal behavior.
3. Using Lightning Modal: If supported in your Salesforce org, you can use LightningModal to wrap and invoke the action directly while staying on the same page. This method offers modern and seamless integration.

Each solution allows dynamic control over the button rendering, ensuring flexibility in when and how the action is launched.

Master Salesforce with Expert Training for Certification

Our Salesforce Course  is thoughtfully designed to provide a thorough understanding of the Salesforce platform, empowering you to build a successful career in this dynamic field. Whether your goal is to become a Salesforce Administrator, Developer, or specialize in AI integrations, our comprehensive courses cover every aspect of the platform in detail.

By focusing on practical, real-world projects, we ensure that you gain hands-on experience and are well-equipped to tackle real business scenarios. Taught by seasoned industry professionals, our training program provides you with the expertise and confidence needed to thrive in the Salesforce ecosystem.

Beyond technical instruction, our Salesforce training in India also offers extensive career support, including one-on-one mentorship and expert certification guidance. We provide detailed learning materials, hands-on project opportunities, and comprehensive interview preparation to ready you for the job market.

Our mission is to not only enhance your Salesforce skills but also to ensure you’re fully prepared to take the next step in your career with confidence. By the end of the training, you’ll have the practical expertise and in-demand knowledge to excel in Salesforce and achieve your professional goals. Enroll for FREE Demo!

The post Launch Custom Action from LWC? appeared first on Salesforce Online Training.