Application Event handler not getting invoked

Question

I have a Master aura component containing 2 buttons to open another aura component - 1 for each button in the master component. I'm transferring the control using the Application Events from master component to the child component using the below code:

MasterComponent.cmp:

<aura:component implements = "flexipage:availableForAllPageTypes, flexipage:availableForRecordHome, force:hasRecordId" access = "global">
    <aura:attribute name = "recordId" type = "Id"/>
    <aura:registerEvent name = "SubmitCandidateEvent" type = "c:SubmitCandidateEvent"/>
    <aura:registerEvent name = "SubmissionConfirmationEvent" type = "c:SubmissionConfirmationEvent"/>
    <div>
        <lightning:button type = "button" iconName = "utility:text_template" variant = "brand" label = "Submission Confirmation Email" title = "Submission Confirmation Email" onclick = "{!c.submissionConfirmation}"/>
        <lightning:button type = "button" iconName = "utility:text_template" variant = "brand" label = "Submit Candidate" title = "Submission Confirmation Email" onclick = "{!c.submitCandidate}"/>
    </div>
</aura:component>

MasterComponent.js

({
    submissionConfirmation : function(component, event, helper) {
        console.log("Inside Submission Confirmation Master Component Controller");
        var submissionConfirmationEvent = $A.get("e.c:SubmissionConfirmationEvent");
        submissionConfirmationEvent.setParams({"submissionStatus":"SubmissionComponent"});
        console.log("SubmissionConfirmationEvent: "+submissionConfirmationEvent);
        submissionConfirmationEvent.fire();
        console.log("SubmissionConfirmationEvent fired");
    },
    
    submitCandidate : function(component, event, helper) {
        console.log("Inside Submit Candidate Master Submit Controller");
        var submitCandidateEvent = $A.get("e.c:SubmitCandidateEvent");
        submitCandidateEvent.setParams({"submitStatus" : "SubmitComponent"});
        console.log("SubmitCandidateEvent: "+submitCandidateEvent);
        submitCandidateEvent.fire();
        console.log("SubmitCandidateEvent fired");
    },
})

SubmitCandidateEvent.evt

<aura:event type="APPLICATION" description="Event template" >
    <aura:attribute name = "submitStatus" type = "String" />
</aura:event>

SubmissionConfirmationEvent.evt

<aura:event type="APPLICATION" description="Event template" >
    <aura:attribute name = "submissionStatus" type = "String" />
</aura:event>

SubmitCandidateComponent.cmp

<aura:component controller = "SubmitCandidateController" implements="force:appHostable,flexipage:availableForAllPageTypes,flexipage:availableForRecordHome" access="global">
    <aura:attribute name="recordId" type="String"/>
    <aura:attribute name="open" type="Boolean" default="false"/>
    <aura:attribute name = "isOpen" type = "Boolean" default = "false"/>
    <aura:handler name="init" value="{!this}" action="{!c.doInit}"/>
    <aura:handler event = "c:SubmitCandidateEvent" action = "{!c.openSubmitCandidate}"/>
    
    <aura:if isTrue = "{!v.isOpen}" >
        //doSomething
    </aura:if>
</aura:component>

SubmitCandidateComponent.js

({ openSubmitCandidate : function(component, event, helper) {
        console.log("In Submit Candidate Controller: Setting the open attribute");
        component.set("v.isOpen", true);
        var source = event.getSource();
        console.log("Source: "+source);
        var evt = $A.get("e.c:SubmitCandidateEvent");
        console.log("Submit Candidate Event: "+evt);
        var evtParam = evt.getParam("submitStatus");
        console.log("Event Param: "+evtParam);  
        alert(evtParam);
        var init = component.get("c.doInit");
        $A.enqueueAction(init);     
    },
})

SubmissionConfirmationComponent.cmp

<aura:component controller="SubmissionConfirmationEmailJobApplicant" implements="force:appHostable,flexipage:availableForAllPageTypes,flexipage:availableForRecordHome,force:hasRecordId" access="global" >
    <aura:attribute name="recordId" type="Id"/>
    <aura:attribute name="open" type="Boolean" default="false"/>
    <aura:attribute name = "isOpen" type = "Boolean" default = "false"/>

    <aura:handler name="init" value="{!this}" action="{!c.doInit}"/>
    <aura:handler event = "c:SubmissionConfirmationEvent" action = "{!c.openSubmissionConfirmation}"/>
    
    <aura:if isTrue = "{!v.isOpen}" >
    //doSomething
    </aura:if>
</aura:component>

SubmissionConfirmationComponent.js

 ({ openSubmissionConfirmation : function(component, event, helper) {
        console.log("In Submission Confirmation Controller: Setting up the open attribute");
        component.set("v.isOpen", true);
        var source = event.getSource();
        console.log("Source: "+source);
        var evt = $A.get("e.c:SubmissionConfirmationEvent");
        console.log("Submission Confirmation Event: "+evt);
        var evtParam = evt.getParam("submissionStatus");
        console.log("Event Param: "+evtParam);
        alert(evtParam);
        var init = component.get("c.doInit");
        $A.enqueueAction(init);
    },
})

I can see the events being fired when the buttons are clicked. But I can't see the flow moving to the handler component. Handler code in the SubmitCandidateComponent and SubmissionConfirmationComponent not getting invoked, hence the application event handler not working as it should do. Kindly suggest what can be wrong in this code, its been hours I'm stuck on this piece of code. Thanks!

Answer 1

The components should be present on that record page/app to listen the event and respond to that event.

Either you need to wrap those components in a container or you need to have somewhere on record page.

Application Event framework - Reference

-