Lightning Data Service display related records

Question

I am trying to display Contact details on a Lightning Data Service component on the Case Level. An example SOQL query that is working is

Select ContactId, Contact.FirstName, Contact.LastName from case

However, I cannot display the Contact.FirstName or anything other than ContactId.

I've tried some of the solutions base in this question here Attributes and Field clarification from Lightning data service trailhead module but dont have a working solution.

My code is working in terms of loading everything correctly for the Case object just not the lookup relationship to Contact

<force:recordData aura:id="record"
    recordId="XXXXXXXXHardCodedIDxxxxxx"
    targetError="{!v.recordError}"
    targetRecord="{!v.record}"
    targetFields="{!v.caseRecord}"
    fields="ContactId,Contact.LastName" 
    recordUpdated="{!c.handleRecordUpdated}"
    mode="VIEW"/>

Also I realize there is a field that is ContactName which works, but I need to be able to get alot of fields off of the Contact object that aren't listed.
Any ideas to get those fields displaying would be great.

Answer 1

You should be able to get the contact information using targetField attribute, below is sample working code.

<aura:component implements="flexipage:availableForAllPageTypes,force:hasRecordId"> 
<!--inherit recordId attribute-->
<aura:attribute name="record" type="Object" description="The record object to be displayed"/>
<aura:attribute name="caseRecord" type="Object" description="A simplified view record object to be displayed"/>
<aura:attribute name="recordError" type="String" description="An error message bound to force:recordData"/>


<force:recordData aura:id="record"
                  recordId="50090000000za59AAA"
                  targetError="{!v.recordError}"
                  targetRecord="{!v.record}"
                  targetFields="{!v.caseRecord}"
                  fields="ContactId,Contact.FirstName, Contact.LastName" 
                  recordUpdated="{!c.handleRecordUpdated}"
mode="VIEW"/>

<div class="Record Details">
    <lightning:card iconName="standard:contact" title="Contact Information" >
        <div class="slds-p-horizontal--small">
            <p class="slds-text-heading--small">
              <lightning:formattedText title="First Name" value="{!v.caseRecord.Contact.FirstName}" /></p>
            <p class="slds-text-heading--small">
              <lightning:formattedText title="Last Name" value="{!v.caseRecord.Contact.LastName}" /></p>
        </div>
    </lightning:card>   
</div>

<!-- Display Lightning Data Service errors, if any -->
<aura:if isTrue="{!not(empty(v.recordError))}">
    <div class="recordError">
        {!v.recordError}</div>
</aura:if>

</aura:component>