component.find("overlayLib").notifyClose(); not working inside apex controller's returned promise

Question

I have a parent component with the <lightning:overlayLibrary aura:id="overlayLib"/> component added.

The parents controller creates an instance of the modal component, assigns it to the body of the modal, and displays the modal using component.find('overlayLib').showCustomModal(). Nothing used in the footer.

Now, inside the modal component I have two buttons, 'Cancel' and 'Save'. Cancel just closes the modal, while Save makes a callout to the apex controller, then closes the modal.

Both button methods utilize component.find("overlayLib").notifyClose();... however, it only works for the Cancel button.

The Save button fires the notifyClose method from the then() function of the promise returned by the apex controller, and this seems to cause an error.

Console Log Error: There is no event definition for event "notify", probably because there is no component to handling it.

submitSaveObject : function(component, saveObj){
    var action = component.get('c.saveConfiguration');
    action.setParams({ "saveObj" : JSON.stringify(saveObj)});

    var actionPromise = new Promise(function (resolve, reject){

        action.setCallback(this, $A.getCallback( function(actionResult){
            var state = actionResult.getState();
            console.log('apex callback result: ');
            if (state === "SUCCESS"){
                var result = actionResult.getReturnValue();
                resolve(result);        
            } else if (state === "ERROR"){
                reject();
            }

        }));

        $A.enqueueAction(action);       
    });

    actionPromise.then(function(returnValue){
        alert('Save successful!');
        //this is throwing an error
        component.find("overlayLib").notifyClose();

    });
}

How can I successfully close the modal in such a way that it is enqueued after the asynch call to the apex controller?

Answer 1

Did you tried by adding a callback in .then

actionPromise.then($A.getCallback(function(returnValue){
        alert('Save successful!');
        //this is throwing an error
        component.find("overlayLib").notifyClose();

    }));

Answer 2

I am not a javascript wizard, but let me try putting my thought. You are not passing component to actionPromise method. Thus it doesn't have a component to fire .notifyClose();

As actionPromise happens asynchronously, somewhere in future, where component may or may not exists . it has no access to component

You have to pass it, Something like

submitSaveObject : function(component, saveObj){
    var action = component.get('c.saveConfiguration');
    action.setParams({ "saveObj" : JSON.stringify(saveObj)});

    var actionPromise = this.executeAction(component, accAction);

    actionPromise.then(function(returnValue){
        alert('Save successful!');
        //this is throwing an error
        component.find("overlayLib").notifyClose();

    });
}


executeAction: function(cmp, action, callback) {
    return new Promise(function(resolve, reject) {
        action.setCallback(this, $A.getCallback( function(actionResult){
            var state = actionResult.getState();
            console.log('apex callback result: ');
            if (state === "SUCCESS"){
                var result = actionResult.getReturnValue();
                resolve(result);        
            } else if (state === "ERROR"){
                reject();
            }

        }));
    }
}

Src: http://bobbuzzard.blogspot.com/2016/12/javascript-promises-in-lightning_30.html

Answer 3

This is my solution for the modal, I did this a few months ago and I may be doing things here that you don't need to do anymore. My solution may be overly complicated for what you need

Inside my component markup I create my attributes

<aura:attribute name="modalPromise" type="Aura.Component" />
<lightning:overlayLibrary aura:id="overlayLib" />

I also create custom components and inject them into the modal but I don't believe you need to do that

showModal: function(component, event, helper) {
    var modalBody;
    var modalFooter;

    $A.createComponents([
        ["c:DataTableNoteModalContent", {
            label:"modalContent",
            "textAreaInputValue" : component.getReference("v.textAreaInputValue")
        }],
        ["c:DataTableNoteModalFooter", {
            label:"modalFooter", 
            "rowID" : component.get("v.rowID"),
            "dataTableID" : component.get("v.dataTableID"),
            "buttonClickEvent":component.getReference("c.onButtonClick")
        }]],
        function(components, status) {
            if(status === "SUCCESS") {
                modalBody = components[0];
                modalFooter = components[1];
                var modalPromise = component.find("overlayLib").showCustomModal({
                    header: "Add",
                    body: modalBody, 
                    footer : modalFooter,
                    showCloseButton: true,
                    cssClass: "",
                    closeCallback: function(){
                        component.set("v.textAreaInputValue", component.get("v.textAreaInputPreviousValue"));
                    }
                });
                component.set("v.modalPromise", modalPromise);
            }
        }
    );
},

I have my button in my footer

<aura:attribute name="modalFooter" type="Aura.Component[]" >
<lightning:button aura:id="cancel" name="cancel" iconName="action:remove" 
 label="Cancel" onclick="{!c.handleCancel}" class="slds-button_neutral" />
</aura:attribute>

Then that calls my helper function

handleCancel : function(component, event) { 
    component.get("v.modalPromise").then(
        function (modal) {
            modal.close();
        }
    );
},

I hesitate to just code dump on you but I hope this can help