I am overriding related list object new button with a lightning component and trying to open it as a modal.

It is opening as a modal, but in a different tab. Can it open in the same record page, like how it opens for a standard page when we click new button in related list.

Can this modal logic be done in one single component rather than 2 component.

Component1 -

<aura:component implements="force:appHostable,flexipage:availableForAllPageTypes,flexipage:availableForRecordHome,force:hasRecordId,forceCommunity:availableForAllPageTypes,force:lightningQuickAction" access="global" >
    <aura:attribute name="recordId" type="String" />
    <c:LWC recordId="{!v.recordId}"/>

Modal Component -

<aura:component implements="lightning:hasPageReference,lightning:actionOverride,force:hasRecordId,force:lightningQuickAction" access="global" >
    <lightning:overlayLibrary aura:id="overlayLib"/>
    <aura:handler name='init' action="{!c.init}" value="{!this}" />
    <aura:attribute name="recordId" type="Id"/>

JS -

init : function(component, event, helper) {

    var modalBody;
    var modalFooter;
        ["c:Component1 ",{}]
                        function(components, status){
                            if (status === "SUCCESS") {
                                modalBody = components[0];
                                    header: "New Record",
                                    body: modalBody,
                                    showCloseButton: true,
                                    cssClass: "my-modal,my-custom-class,my-other-class",
                                    closeCallback: function() {



You can have single component by below logic:


doInit: function(component, evt, helper) {
        header: "Application Confirmation",
        body: component.find("modalContent"),
        showCloseButton: true,
        cssClass: "mymodal",
        closeCallback: function() {
            alert('You closed the alert!');

.cmp file:

<aura:handler name="init" value="{!this}" action="{!c.doInit}" />
<lightning:overlayLibrary aura:id="overlayLib"/>

<div class="slds-hide">
    <div aura:id="modalContent">
        This is modal content

In the same way you can have Footer also in same component.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.