[SalesForce] Open Custom LWC as a modal from object related list new button (override with Lightning component)

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}"/>
</aura:component>

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"/>
</aura:component>

JS –

init : function(component, event, helper) {
    
    var modalBody;
    var modalFooter;
    $A.createComponents([
        ["c:Component1 ",{}]
    ],
                        function(components, status){
                            if (status === "SUCCESS") {
                                modalBody = components[0];
                                component.find('overlayLib').showCustomModal({
                                    header: "New Record",
                                    body: modalBody,
                                    showCloseButton: true,
                                    cssClass: "my-modal,my-custom-class,my-other-class",
                                    closeCallback: function() {
                                        
                                    }
                                });
                            }
                        }
                       );
}

Best Answer

You can have single component by below logic:

JS:

doInit: function(component, evt, helper) {
    component.find('overlayLib').showCustomModal({
        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
    </div>
</div>

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

Related Topic