0

I have a lightningOverlayLibrary that generates an LWC component in its body. The LWC dispatches a close event that the aura component handles.

The aura component needs to close the lightningOverlayLibrary but the handler does not have the instance of the component available as a parameter so it can't close it.

I need to either get the component, or get the lightningOverlayLibrary from the aura handler to close it. How can that be done?

Aura Component:

<aura:component implements="lightning:actionOverride,force:hasRecordId,lightning:hasPageReference">
    <aura:handler name="init" value="{!this}" action="{!c.doInit}"/>
    <lightning:overlayLibrary aura:id="overlayLib" />
</aura:component>

Aura Controller:

({
    doInit: function(component, event, helper) {
        $A.createComponents([
            ["c:opportunityActionsOverrideLwc",{ 
                recordId: component.get('v.recordId'),
                recordTypeId: component.get("v.pageReference").state.recordTypeId,
                oncancel: component.getReference("c.handleCancel"),
            }],
        ],
        function(components, status) {
            if (status === "SUCCESS") {
                const form = components[0];
                component.find('overlayLib').showCustomModal({
                    header: "New Opportunity",
                    body: form,
                    showCloseButton: true,
                    cssClass: "slds-modal_medium",
                })
            }
        });
    },
    handleCancel: function(cancelEvent) {
        // I need to either get the component instance here OR the overlayLibrary to close it
        console.log('event:');
        console.log(JSON.parse(JSON.stringify(cancelEvent)));
    }
})

LWC Controller:

handleCancel(event) {
    console.log('canceling');
    this.dispatchEvent(new CustomEvent('cancel'));
}

1 Answer 1

0

In your controller, you want to cache the modal instance when you call showCustomModal() and store it as a component attribute. Like this:

var modalPromise = component.find("overlayLib").showCustomModal({
    header: "Sample Modal",
    body: modalBody,
    footer: modalFooter,
    showCloseButton: true,
    cssClass: "cMyComponent mymodal slds-modal_medium"
});
component.set("v.modalPromise", modalPromise);

Then, when you want to close the modal, you can get a reference to the modal instance, and call close on it. Like so:

component.get("v.modalPromise").then((modal) => {
    modal.close();
});

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.