I have a component which iterates over a list of records and in turn calls a child component for each record returned. This works fine. I also have a lightning:slider in a seperate component which when changed, fires an application event containing a string to use as a filter on the list of records in the list component.
I can get the string value into the event handler and can see it logging in the console when changed. However, when I use this string value as a filter on the list of records I get an exception (sreenshot attached).
My understanding is that lightning:recordViewForm is being passed a null record Id. However I dont see how this is possible as I'm checking the list size before setting the list attribute. Can anyone help?
Related question (unanswered):
Error occurs on lightning:recordViewForm
Thanks
Event:
<aura:event type="APPLICATION" description="MovieGenreEvent">
<aura:attribute name="movieYear" type="String"/>
</aura:event>
Component firing the event:
<aura:component description="MovieSearchSlider" implements="flexipage:availableForAllPageTypes" access="global">
<aura:attribute name="SliderValue" type="String" default="2004" />
<aura:registerEvent name="MovieGenreEvent" type="c:MovieGenreEvent" />
<lightning:slider label="Volume" value="{!v.SliderValue}" onchange="{!c.handleSlide}" min="1990" max="2030" />
</aura:component>
Controller:
handleSlide : function(component, event) {
let sliderValue = component.get("v.SliderValue");
console.log("sliderValue " + sliderValue);
var applicationEvent = $A.get("e.c:MovieGenreEvent");
applicationEvent.setParam("movieYear", sliderValue);
applicationEvent.fire();
console.log("FIRED");
console.log(applicationEvent);
}
Component Receiving the event:
<aura:component description="movieSearchList" controller="movieSearchController" implements="flexipage:availableForAllPageTypes,force:hasRecordId" access="global">
<aura:attribute name="movies" type="Movie__c[]"/>
<aura:attribute name="movieYearFilter" type="String"/>
<aura:handler event="c:MovieGenreEvent" action="{!c.handleEvent}" />
<aura:handler name="init" value="{!this}" action="{!c.doInit}" />
<ul class="list-group">
<lightning:card title="Movies">
<div class="slds-p-left_medium slds-p-right_medium">
<ul class="slds-list_vertical slds-has-dividers_top-space">
<aura:if isTrue="{!v.movies}">
<aura:iteration items="{!v.movies}" var="movie">
<li class="slds-list__item">
<c:movieSearchRecord movie="{!movie}"/>
</li>
</aura:iteration>
</aura:if>
</ul>
</div>
</lightning:card>
</ul>
</aura:component>
Controller:
handleEvent : function(component, event, helper) {
var movieYearFromEvent = event.getParam("movieYear");
console.log('movieYear = ' + movieYearFromEvent);
helper.filterByYear(component, movieYearFromEvent);
}
Helper:
filterByYear : function(component, movieYear, event) {
let movies = component.get("v.movies");
let filteredMovies = movies.filter(movie => movie.Year__c == movieYear);
console.log(filteredMovies);
if (filteredMovies.length >= 1) {
component.set("v.movies", filteredMovies);
}
}
MovieSearchRecord:
<aura:component description="movieSearchRecord">
<aura:attribute name="movie" type="Movie__c"/>
<lightning:recordViewForm aura:id="viewForm" recordId="{!v.movie.Id}" objectApiName="Movie__c">
<div class="slds-media">
<div class="slds-media__figure">
<img src="{!v.movie.Cover_URL__c}" class="slds-avatar_large slds-avatar slds-image__crop--4x3"/>
</div>
<div class="slds-media__body">
<lightning:layout multipleRows="true">
<lightning:layoutItem size="6">
<lightning:layout class="slds-hint-parent">
<a onclick="{!c.navToRecord}">
<h3 class="slds-text-heading_small slds-m-bottom_xx-small">{!v.movie.Name}</h3>
</a>
</lightning:layout>
</lightning:layoutItem>
</lightning:layout>
</div>
</div>
</lightning:recordViewForm>
</aura:component>
Best Answer
It ended up being a capitalised character on "Id" needing to be changed to id: