0

I'm trying to load data using Lightning Data Service with force:recordData, but i'm not seeing any data is being displayed.

Below is the code for the same. Can you someone help me where I'm doing the mistake.

CarDetails component

<aura:component implements="force:appHostable,flexipage:availableForAllPageTypes">
    <aura:attribute type="Id" name="Id" access="public" />
    <aura:attribute type="Car__c" name="car" access="public" />
    <aura:attribute name="recordError" type="String" access="private" />

    <aura:handler event="c:CarSelectedApplicationEvent" action="{!c.onCarSelected}" />

    <!-- using lightning data service to fetch record data
        * recordUpdated="{!c.onRecordUpdated}" is optional
        and use it only if you need to fire an event on update
        *mode can be either edit or view-->
    <force:recordData aura:id="service"
                      recordId="{!v.Id}"
                      mode="VIEW"
                      targetFields="{!v.car}"
                      targetError="{!v.recordError}"
                      recordUpdated="{!c.onRecordUpdated}"
                      fields="Id, Name, Mileage__c, Per_Day_Rent__c, Build_Year__c, 
                              Contact__r.Name, Contact__r.Email, Contact__r.HomePhone__c,
                              Car_Type__r.Name, Picture__c" />

    <lightning:layout multipleRows="true">
        <lightning:layoutItem size="12" 
                      smallDeviceSize="12" 
                      mediumDeviceSize="12" 
                      largeDeviceSize="12">
            <aura:if isTrue="{!empty(v.car)}">
                <lightning:tabset aura:id="tabs">
                    <lightning:tab label="Details" id="cardetailtab">
                        Car {!v.car.Name} will be shown here
                        <c:CarDetail car="{!v.car}"/>
                    </lightning:tab>
                </lightning:tabset>
            </aura:if>
        </lightning:layoutItem>
    </lightning:layout>

</aura:component>

CarDetailsController.js

({
    onRecordUpdated : function(component, event, helper) {

    },
    onCarSelected : function(component, event, helper){
        component.set("v.Id",event.getParam("car").Id);
        console.log("carId--"+event.getParam("car").Id);
        component.find("service").reloadRecord();
    }
})

CarSelectedApplicationEvent

<aura:event type="APPLICATION" description="Event template">
    <aura:attribute name="car" type="Car__c" />
</aura:event>

CarDetail

<aura:component implements="flexipage:availableForAllPageTypes">
<aura:attribute type="Car__c" name="car" access="public" 
                default="{
                         'Name' : 'My Default Car',
                         'Contact__r' : {
                                            'Name':'Default Contact'
                                        },
                         'Car_Type__c' : {
                                            'Name':'Default Car Type'
                                        },
                         'Build_Year__c' : 2000,
                         'Per_Day_Rent__c' : 100,
                         'Mileage__c' : 15,
                         'Picture__c' : '/resource/cars/luxury/ford_Mustang.jpeg'
                         }" />
<aura:attribute type="boolean" name="showCardAction" access="public" default="false" />

<aura:handler name="init" action="{!c.doInit}" value="{!this}" />

<lightning:card iconName="utility:setup_assistant_guide">    
    <aura:set attribute="title">        
        <lightning:formattedText value="{!v.car.Contact__r.Name + '\'s Car'}" />        
    </aura:set>
    <aura:set attribute="actions">
        <aura:if isTrue="{!v.showCardAction}">
            <lightning:button variant="neutral" label="Full Details" onclick="{!c.onFullDetails}" />
        </aura:if>
    </aura:set>

    <lightning:layout multipleRows="true">
        <lightning:layoutItem size="12" smallDeviceSize="6" mediumDeviceSize="6" largeDeviceSize="6"
                              flexibility="true">
            <div class="slds-p-horizontal--small">
                <div class="carproperty">
                    <span class="label">Car Name:</span>
                    <lightning:formattedText value="{!v.car.Name}" />
                </div>
                <div class="carproperty">
                    <span class="label">Type:</span>
                    <lightning:formattedText value="{!v.car.Car_Type__r.Name}" />
                </div>
                <div class="carproperty">
                    <span class="label">Build Year:</span>
                    <lightning:formattedNumber value="{!v.car.Build_Year__c}" />
                </div>
                <div class="carproperty">
                    <span class="label">Per Day Rent:</span>
                    <lightning:formattedNumber value="{!v.car.Per_Day_Rent__c}" 
                                             style="currency" currencyCode="USD"/>
                </div>
                <div class="carproperty">
                    <span class="label">Mileage:</span>
                    <lightning:formattedNumber value="{!v.car.Mileage__c}" />
                </div>
            </div>
        </lightning:layoutItem>
        <lightning:layoutItem size="12" smallDeviceSize="6" mediumDeviceSize="6" largeDeviceSize="6"
                              flexibility="true">
            <div class="imageview" style="{!'background-image:url(' + v.car.Picture__c + ')'}" />
        </lightning:layoutItem>
    </lightning:layout>        
</lightning:card>

enter image description here

2

added based on comments:

You will get no data if any of your field APIs in fields is wrong.

For identifying this, you use only Id and Name initially:

fields="Id, Name"

and remove all other fields and its references anywhere else in code and just use Id and Name


According to your implementation in isTrue="{!empty(v.car)}", you are saying you want to render the content only when v.car is empty. Instead it should be isTrue="{!not(empty(v.car))}"

<aura:if isTrue="{!not(empty(v.car))}">
    <lightning:tabset aura:id="tabs">
        <lightning:tab label="Details" id="cardetailtab">
            Car {!v.car.Name} will be shown here
            <c:CarDetail car="{!v.car}"/>
        </lightning:tab>
    </lightning:tabset>
</aura:if>

added based on comments:

Or else you can have like below to render something before record loads:

<lightning:tabset aura:id="tabs">
    <lightning:tab label="Details" id="cardetailtab">
        <aura:if isTrue="{!not(empty(v.car))}">
            Car {!v.car.Name} will be shown here
            <c:CarDetail car="{!v.car}"/>
        </aura:if>
    </lightning:tab>
</lightning:tabset>
  • Hi Thanks for ur reply. when I set it to not(empty(v.car)) the entire section is not coming up as that is null. so for time being i had it like that. – Krishna N Aug 20 at 9:22
  • added in answer. So, the error is gone now? – salesforce-sas Aug 20 at 9:29
  • There is no error comping up. From the attached screenshot above, when I add not(empty(v.car)) instead of empty(v.car), then I'm not seeing anything from there as v.car is becoming empty. – Krishna N Aug 20 at 9:47
  • Tried moving the aura:if to inside the lightning:tab still same. – Krishna N Aug 20 at 9:57
  • 1
    Thank you so much. it worked. Issue is with the list of fields added as you said. – Krishna N Aug 21 at 6:37

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.