1

I am attempting to build a button that will close a modal, I have tried multiple different ways. I have attempted to close it using the promises or component.find('overlayLib');

I have a component where I'm building out an overlay

<lightning:overlayLibrary aura:id="overlayLib" />

I built it in my controller in a button click it opens.

showModal: function(component, event, helper) {
    var modalBody;
    var modalFooter;
    modalBody = component.get("v.modalBody");
    modalFooter = component.get("v.modalFooter");
    component.find("overlayLib").showCustomModal({
        header: "Add",
        body: modalBody,
        footer: modalFooter,
        showCloseButton: true,
        cssClass: ""
    }).then(function (overlay) {
        component.set("v.modalPromise", overlay);
    });
},

And then I try to close with this this logic, and fire an event..

handleSave: function(component, event, helper) {  
    var value = component.find("inputTextAreaID").get("v.value");
    var row = component.get("v.row");
    var dataTableID = component.get("v.datatableID");   
    var column = component.get("v.column");

    var overlayPanel = component.get("v.modalPromise");

    console.log(overlayPanel);
    console.log(overlayPanel.close);
    overlayPanel.close();

    var cmpEvent = component.getEvent("cellChangeEvent");
    cmpEvent.setParams({
        "value": value,
        "rowIndex": row.rowIndex,
        "row": row,
        "fieldName": column.fieldName,
        "dataTableID": dataTableID
    });

    cmpEvent.fire();
}

My console then spits out the details

enter image description here

I've checked out all the solutions that have been posted here.. Does anyone have a surefire way of solving this?

  • i think there might be an issue with the component, i tried the example in the documentation, and when using notifyClose() method with the latest API version, it throws "Exception: TypeError: 'caller', 'callee', and 'arguments' properties may not be accessed on strict mode functions or the arguments objects for calls to them at", which is a bummer – glls Mar 13 '18 at 1:34
  • 1
    Attribute v.modalPromise is not defined or not included in your code snippet? – Raul Mar 13 '18 at 6:41
  • 1
    This answer had worked for me, try giving it a shot- https ://salesforce.stackexchange.com/a/193928/4726 – Raul Mar 13 '18 at 6:46
  • Updated, I tried Aura.Action, Aura.Component and Object so far, I've tried every solution that is there – EricSSH Mar 13 '18 at 15:08
0

I finally figured it out, I was creating the promise incorrectly, I needed to do the var declare

var modalPromise = component.find("overlayLib").showCustomModal({
        header: "Add",
        body: modalBody,
        footer: modalFooter,
        showCloseButton: true,
        cssClass: ""
})

Then set it

component.set("v.modalPromise", modalPromise);

Then when ever I needed to close it I called

component.get('v.modalPromise').then(
        function (modal) {
            modal.close();
        }
);

There is an answer here https://salesforce.stackexchange.com/a/193928/4726 which I thought I tried but must of implemented it incorrectly

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.