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:
Component:
<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"/>
</aura:component>
Controller:
({
onInit : function(component, event, helper) {
// Launch actual target modal
$A.createComponent("c:CampaignMemberWizard", {
recordId : component.get("v.recordId")
},
function(content, status) {
if (status === "SUCCESS") {
component.find('overlayLib').showCustomModal({
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 () {
$A.get("e.force:closeQuickAction").fire();
}), 100)
}
});