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.