0

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.

  • Seems like there is some syntax error – Muzammil Bajaria Sep 20 '17 at 16:32
  • @MuzammilBajaria it does say SyntaxError at evalAndReturn at safeEval. This isn't code I've written. I assume it's some security from SFDC but I'm unsure. Any idea? – Josh D Sep 20 '17 at 16:53
  • I don't think it's security. Check your code once. The code which you posted seems good. – Muzammil Bajaria Sep 20 '17 at 16:57
2

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.

enter image description here

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

enter image description here

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}" />
  • Point out to change the event type to APPLICATION instead of COMPONENT – Swathi Sep 20 '17 at 17:22
  • @Himanshu both solutions worked. I opted to use the latter and now I'm wondering why I was trying to use events to begin with.. – Josh D Sep 20 '17 at 17:25
  • @JoshD yah second one is better solution – Himanshu Sep 20 '17 at 19:13

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.