Is it possible, from a related list, to have a custom button that opens a lightning modal dialog, as is the behavior of the standard buttons of these related lists?

My research tells me that it isn't possible given that the onclick JavaScript buttons are no longer allowed in the Lightning experience but would like to confirm this with you.

Here are some pictures to show better what I want.

enter image description here

enter image description here


2 Answers 2


With the new Winter 17 release you can Launch a Lightning Component from an Action

So if your modal would be this lightning component, you can launch it as an action

  • The question was about list button and not action! Commented Mar 23, 2023 at 16:38

Quick Actions cannot be used as Related List Buttons: Upvote Idea here, so unfortunately response by Itai is not a complete answer.

The best I have found is to give up on using a related list button for a modal and instead use Lightning Component Action like Itai referenced. Unfortunately the force:LightningQuickAction and force:LightningQuickActionWithoutHeader interfaces display a thin modal that can't be widened.

Solution for a wider modal is to create two Lightning Components: 1. one that implements force:LightningQuickAction and force:LightningQuickActionWithoutHeader to launch from the Action, and 2. one that is launched as another modal from the first Lightning Component using lightning:overlayLibrary and then closes the Quick Action modal.

Example code:


<aura:component implements="force:hasRecordId,force:LightningQuickActionWithoutHeader">
    <aura:attribute name="recordId" type="String"/>
    <aura:handler name="init" value="{!this}" action="{!c.onInit}"/>
    <lightning:overlayLibrary aura:id="overlayLib"/>


    onInit : function(component, event, helper) {
        // Launch actual target modal
        $A.createComponent("c:CampaignMemberWizard", {
            recordId : component.get("v.recordId")
        function(content, status) {
            if (status === "SUCCESS") {
                    body: content,
                    showCloseButton: true,
                    cssClass: "slds-modal_large",
                    closeCallback: function () {
                        // Nothing needed for this component
        // Close quick action modal
        // If done synchronously, closes both modals
        setTimeout($A.getCallback(function () {
        }), 100)

You must log in to answer this question.

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