1

I'm using OverlayLibrary to display a custom modal body and footer. I have a generic footer that fires an event called "EFLModal_CancelClicked". I have the component that displays in the body set up to handle that event and then fire the notifyClose() method so the modal closes.

The event seems to be firing, however the component in the body of the modal doesn't seem to be catching the event.

Here's how I'm creating the modal:

showModalComponentWithFooter : function(component, componentToInclude, params, 
                                        footerComp, footerParams, headerVal, 
                                        showClose, className, closeCallback) {
    $A.createComponents([
        [componentToInclude,params],
        [footerComp,footerParams]
    ],
                        function(components, status, error) {
                            var modalBody = components[0];
                            var modalFooter = components[1];
                            if (status === "SUCCESS") {
                                try{
                                    component.getSuper().find('overlayLib').showCustomModal({
                                        header: headerVal,
                                        body: modalBody,
                                        footer : modalFooter,
                                        showCloseButton: showClose,
                                        cssClass: className,
                                        closeCallback: closeCallback
                                    });
                                }catch(err){
                                    console.log(err);
                                }
                            } else {
                                console.log(error);
                                throw new Error(error);
                            }
                        });
}

As you can see I'm creating a custom footer override. That component looks like this:

<aura:component>
<aura:registerEvent name="EFLModal_CancelClicked" type="c:EFLModal_CancelClicked" />
    <lightning:button label="Cancel" onclick="{!c.doCancel}"/>
</aura:component>

The "doCancel" function that occurs onclick of the Cancel button just fires an event like this:

doCancel : function(component, event, helper) {
    var appEvent = $A.get("e.c:EFLModal_CancelClicked");
    appEvent.fire();
    console.log('cancel fired');
},

I can confirm that my console log above does show up in console, so I'm assuming the event is firing.

Here's the component that displays in the body of the modal when it's displayed:

<aura:component implements="lightning:actionOverride,flexipage:availableForRecordHome,force:hasRecordId" access="global" >
<lightning:overlayLibrary aura:id="overlayLibrary" />
<aura:handler name="EFLModal_CancelClicked" event="c:EFLModal_CancelClicked" action="{!c.closeModal}"/>
My Component Body Here.
</aura:component>

As you can see it is meant to handle the event that is fired by clicking the Cancel button from the modal's footer component.

However, the handler function is never invoked, so the event is not being detected by the component in the modal body. I have the handler function setup to simply output to the console that it was called.

closeModal : function(component, event, helper){
    console.log('closeModal Fired');
}

Is there any reason this event is not being handled? It is an Application event type. Are there some unknown issues with using modal footer overrides from overlaylibrary in that they cannot communicate with other components?

2

Please remove the name from the handler name="EFLModal_CancelClicked" it should work.

<aura:component implements="lightning:actionOverride,flexipage:availableForRecordHome,force:hasRecordId" access="global" >
    <lightning:overlayLibrary aura:id="overlayLibrary" />
    <aura:handler  event="c:EFLModal_CancelClicked" action="{!c.closeModal}"/>
    My Component Body Here.
    </aura:component>

Please see the documentation here which says if you use the name attribute in application event it won't work

The handler for an application event won’t work if you set the name attribute in . Use the name attribute only when you’re handling component events.

  • wow... what an oversight on my part. Thanks! – Jason Benkert Oct 31 '19 at 17:39

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.