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?

4
  • 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, 2018 at 1:34
  • 1
    Attribute v.modalPromise is not defined or not included in your code snippet?
    – Raul
    Mar 13, 2018 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, 2018 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, 2018 at 15:08

1 Answer 1

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

1
  • What does your attribute definition look like for modalPromise? Aug 14, 2021 at 20:00

You must log in to answer this question.

Not the answer you're looking for? Browse other questions tagged .