Application Event Handler not getting invoked

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!

July 7, 2020
·
Like
0
·
Follow
1

Best Answer chosen by GGill31

GGill31
Hi,

I was able to solve my problem. Both the parent and child need to be in the same container component. I added my child components into MasterComponent, and it gave me the desired result.

<aura:component implements = "force:appHostable,flexipage:availableForAllPageTypes,flexipage:availableForRecordHome,force:hasRecordId,force:lightningQuickAction" 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}"/>
<c:SubmissionConfirmationEmailJobApplicant recordId = "{!v.recordId}"/>
<lightning:button type = "button" iconName = "utility:text_template" variant = "brand" label = "Submit Candidate" title = "Submit Candidate" onclick = "{!c.submitCandidate}"/>
<c:SubmitCandidateComponent recordId = "{!v.recordId}"/>
</div>
</aura:component>

Thanks!

July 7, 2020
·
Like
0
·
Dislike
0

Maharajan C
Hi,

1. In both the child component js you have referred the evt instead of event.
2. And also you are calling the init function in both cmp & JS but you have not declared,

```
**SubmitCandidateComponent.js**
```
({
doInit : function(component, event, helper){
console.log(' === SubmitCandidateComponent === ');
},
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 = event.getParam("submitStatus"); /////// changed evt => event
console.log("Event Param: "+evtParam);
alert(evtParam);
var init = component.get("c.doInit");
$A.enqueueAction(init);
},
})

```
**SubmissionConfirmationComponent.js**
```

({
doInit : function(component, event, helper){
console.log(' === SubmissionConfirmationComponent === ');
},
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 = event.getParam("submissionStatus");   ////// changed evt => event
console.log("Event Param: "+evtParam);
alert(evtParam);
var init = component.get("c.doInit");
$A.enqueueAction(init);
   },
})
```

Thanks,
Maharajan.C

July 7, 2020
·
Like
0
·
Dislike
0

GGill31
Hi Maharanjan,

Thanks for your reply. I do have 'doInit' function defined in both the compoent js. I just wrote the application event related part in the previos post, thinking that part has some flaw, which needs to be corrected. As you can see, I'm using var evt = $A.get("e.c:SubmissionConfirmationEvent");
that is why I used evt.getParam("submissionStatus"); instead of event.getParam("submissionStatus"); There have to some other reason, for it to be not executing the handler part. Below is my doInit function which I'm using in both the child components.

doInit : function(component, event, helper) {

console.log("In Doinit");
var recid = component.get("v.recordId");
console.log("recId:: "+recid);
if(recid){
var action = component.get("c.getJobApplicantAM");
var emailTemplateAction = component.get("c.getTemplate");
action.setParams({
recId : recid
});

action.setCallback(this, function(response){
console.log("In call back doinit notify");
var state = response.getState();
console.log(state);
if(state === "SUCCESS"){
var result = response.getReturnValue();
console.log("Result");
console.log(JSON.stringify(result));
component.set("v.accountManagerId", result);
console.log("AM result");
console.log(result);
const childComp = component.find("Record");
const childCompActual = (childComp.length == null) ? [childComp] : childComp;
console.log("childCompActual");
console.log(childCompActual);
childComp.prePopulateMethod(result);

}

});

$A.enqueueAction(action);

emailTemplateAction.setCallback(this, function(response){
var state = response.getState();
if(state === "SUCCESS") {
var result = response.getReturnValue();
var emailBody = '';
var emailSubject = '';
var templateName = '';
console.log("Template Result::::: "+result);
console.log("Html value:"+result[0]['HtmlValue']);
console.log("Subject:"+result[0]['Subject']);
templateName = result[0]['Name'];
emailBody = result[0]['HtmlValue'];
emailSubject = result[0]['Subject'];
console.log("Email Subject: "+emailSubject);
console.log("Email Body: "+emailBody);
component.set("v.templateNameList", templateName);
component.set("v.emailbody", emailBody);
component.set("v.subject", emailSubject);
}
});
$A.enqueueAction(emailTemplateAction);
}
},

Thanks!

July 7, 2020
·
Like
0
·
Dislike
0

Browse by Topic

Welcome to Support!

Show

sorted by

Application Event Handler not getting invoked

All Answers

You need to sign in to do that.