Nested Lightning Components and Events

Question

I've built a Lightning App with a Contact Record Home Page built in the App Builder. I'm trying to create a simple Lightning Component to add to the Record Home Page which displays some fields from a related Task. I have my Pane component and an Item component. Ultimately I want to have two Items nested in the Pane, as of now I just have one Item in my code. I've managed to display the fields I want if the Item is added on its own, however adding the Pane to the record home page prevents the page from rendering. I'm by no means a JS expert so the errors on in the console are opaque to me. I don't think I'm doing anything particularly unique so I'm confused what's happening.

Here is the code:

<!-- Pane -->
<aura:component controller="AccountDevelopmentTaskController" access="global" implements="force:appHostable,flexipage:availableForRecordHome,force:hasRecordId">
  <aura:registerEvent name="loadTasks" type="c:AccountDevelopmentLoadTasks"/>
  <aura:handler name="init" value="{!this}" action="{!c.doInit}"/>
  <c:AccountDevelopmentTaskItem />

<!-- Item -->
<aura:component controller="AccountDevelopmentTaskController" access="global" implements="force:appHostable,flexipage:availableForAllPageTypes,force:hasRecordId" >
  <aura:attribute name="task" type="Task" access="GLOBAL"/>
  <aura:attribute name="id" type="String" access="GLOBAL"/>
  <aura:handler name="loadTasks" event="c:AccountDevelopmentLoadTasks" action="{!c.start}"/>
  <div class="row">
    <ui:outputText value="{!v.task.Subject+' '}"/>
    <ui:outputText value="{!v.task.OwnerId+' '}"/>
    <ui:outputText value="{!v.task.ActivityDate+' '}"/>
    <ui:outputText value="{!v.task.Status}"/>
  </div>

<!-- Event -->
<aura:event type="COMPONENT">
  <aura:attribute name="id" type="String"/>

//Pane Controller
doInit : function(component, event, helper){
  var id = component.get("v.recordId");
  var loadTask = component.getEvent("loadTasks");
  loadTask.setParams({"id":id}).fire();
}

---

//Item controller
start : function(component, event, helper) {
  var id = event.getParam("id");
  var action = component.get("c.loadPlan");
  action.setParams({"tId":id});
  action.setCallback(this, function(response){
    var task = response.getReturnValue();
    component.set("v.task", task);
  });
  $A.enqueueAction(action);
}

---

//Apex
@AuraEnabled
public static Task loadPlan(Id tId){
  ... //finding record type id stuff
  return (Task) [SELECT Id, Subject, WhoId, WhatId, OwnerId, ActivityDate, Status
                 FROM Task Where (WhoId = :tId) AND (RecordTypeId=:rid) LIMIT 1];
}

Here are the console errors:

Uncaught SyntaxError: missing ) after argument list at evalAndReturn (safeEval.html?id=Custom:97) at safeEval (safeEval.html?id=Custom:122) at value (safeEval.html?id=Custom:137) at Object.co (aura_prod.js:839) at Object.create (aura_prod.js:838) at Object.qs (aura_prod.js:837) at eval (AccountDevelopmentTaskPane.js:2) at nJ.Gc (aura_prod.js:259) at V.Gc (aura_prod.js:568) at V.Cb (aura_prod.js:584) Uncaught (in promise) XI {component: "flexipage:runtimeComponent$controller$init", componentStack: "[force:recordLayoutBroker] > [one:recordHomeFlexip…ct__1505850635000] [flexipage:runtimeComponent]", action: null, name: "SyntaxError", message: "Action failed: flexipage:runtimeComponent$controll…e at: components/c/AccountDevelopmentTaskPane.js]", …}

I know there are issues with null return cases, for the moment I'm only interested why it doesn't work as such given there is a Task of the required record type. If I tweaked the code so the Item was stand alone it worked as desired. So I think there is an issue with how I'm nesting the components and/or the event firing.

I've also tried changing the event type from COMPONENT to APPLICATION (and the corresponding call in the controller) which hasn't changed the resulting errors.

Answer 1

Explanation:

Component events are “clones” of standard DOM events (mouse clicks, key press, and so on). Just like their DOM counterparts, they propagate up in the component hierarchy via a bubbling mechanism and can be stopped en route to the application root component.

It means you can't capture component event in child component so in your case Application Event will work.

Solution:

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

so you need to update your code as

<!--Item-->
<aura:component controller="AccountDevelopmentTaskController" access="global" implements="force:appHostable,flexipage:availableForAllPageTypes,force:hasRecordId" >
  <aura:attribute name="task" type="Task" access="GLOBAL"/>
  <aura:attribute name="id" type="String" access="GLOBAL"/>
  <aura:handler event="c:AccountDevelopmentLoadTasks" action="{!c.start}"/>
  <div class="row">
    <ui:outputText value="{!v.task.Subject+' '}"/>
    <ui:outputText value="{!v.task.OwnerId+' '}"/>
    <ui:outputText value="{!v.task.ActivityDate+' '}"/>
    <ui:outputText value="{!v.task.Status}"/>
  </div>
</aura:component>

controller:

//Pane Controller
doInit : function(component, event, helper){
        var id = component.get("v.recordId");
        var loadTask = $A.get("e.c:AccountDevelopmentLoadTasks");
        loadTask.setParams({"id":id}).fire();
    }

Another solution is pass value using aura:attribute because firing an event cost most in terms of performance.

 <c:AccountDevelopmentTaskItem id="{!parentrecordId}" />