1

I'm using the lightning:overlayLibrary to display a modal in a Lightning Component that's used in a Salesforce Community.

This works for the first time. The modal displays with the correct body and footer when the method handleShowModal() function is called, and closes correctly when clicking on the close button in the top right or when calling the notifyClose() function from a button in the footer.

However, when calling the handleShowModal() function for the second time (see below for code), it does not open again.
The example given is using $A.createComponents to create the body and footer at the same time, and this simply goes into auraproddebug.js when inspected in the developer tools, without any usable error messages.
I also tried it with just a body, using $A.createComponent, which gave an error message stating Unknown component 'markup://c:modalScheduleDemo'.

What could be the problem here? Would it be that I'm trying to create the c:modalScheduleDemo for a second time? Should I destroy it after closing the modal? Or should I simply reopen the model instead of creating the body and footer for a second time?

handleShowModal: function(component, start, end, resource) {
    var modalBody;
    var modalFooter;
    $A.createComponents(
        [
            ["c:modalScheduleDemo",
                {
                    start : start.format('YYYY-MM-DD HH:mm:ss'),
                    end: end.format('YYYY-MM-DD HH:mm:ss'),
                    resource: resource,
                    'aura:id' : 'modalBody'
                }],
            ['c:modalGenericFooter', {
                'aura:id' : 'modalFooter'
            }]
        ],
        function(contents, status, errorMessage) {
            if (status === "SUCCESS") {
                modalBody = contents[0];
                modalFooter = contents[1];
                component.find('overlayLib').showCustomModal({
                    header: "header title",
                    body: modalBody,
                    footer: modalFooter,
                    showCloseButton: true,
                    closeCallback: function() {
                        // component.find('modalBody').destroy(); <- doesn't work
                        // component.find('modalFooter').destroy();
                    }
                });
            } else {
                console.log(errorMessage);
            }

        }
    );
}

Edit: I found that I need to expand my question.
The way I'm calling this handleShowModal() function is from an event callback from the fullcalendar library. When a timeslot on the calendar is selected, it fires this call back, which calls the function and the modal opens successfully. This works once, as stated above.

I've created a test button that also calls handleShowModal(). This works perfectly fine multiple times, opening and closing the modal.
Also when first opening the modal with the event callback, and closing it, the button still works, but the event no longer.

  • 1
    Is your event's callback function wrapper inside $A.getCallback()? Also, try destroying the modal as mentioned here – Praveen Apr 19 '18 at 11:07
  • @Praveen are you referring to developer.salesforce.com/docs/atlas.en-us.lightning.meta/… ? – Folkert Apr 19 '18 at 11:47
  • If I put the callback function inside $A.getCallback() the modal doesn't open at all, giving the error message 'Definition does not exist on the client for descriptor:markup://c:modalScheduleDemo'. So it does go into the $A.createComponent, but returns the error. The second time it returns the same error as before: Unknown component 'markup://c:modalScheduleDemo'. – Folkert Apr 19 '18 at 12:07
1

I've used this library really frequently and I don't typically destroy the individual components within the modal. I leverage the component.find("overlayLib").notifyClose() method provided by the library to destroy them all.

I would leverage the closeCallback for any "onClose" business logic you want to perform, not destroying components. I believe notifyClose() automatically destroys the components (overlay, body, footer).

  • Destroying the components was an idea I had to solve the issue. I'm using the standard action (the cross in the upper right) to close the modal, so like you say, I'd assume it automatically destroys the components. I'm using the notifyClose() to close the modal from a cancel button in the footer. That all works. It's just that it doesn't open a second time after I close it for the first time. – Folkert Apr 20 '18 at 7:19
1

Using $A.getCallback() solved the issue.

The problem was that not only the event callback had a function, but there was also a function on $(document).ready(). They both needed to be wrapped to solve the issue.

$(document).ready($A.getCallback(function() {
    /* some logic*/

    var calendarElement = component.find('calendar').getElement();
    $(calendarElement).fullCalendar({
        /* left out some initialization values*/

        // Select event callback
        select: $A.getCallback(function(start, end, jsEvent, view, resource) {
            helper.handleShowModal(component, start, end, resource);
        })
    });
}));

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.