[SalesForce] Lightning Component to display related record detail

I am new to Lightning Component Design and I am trying to use the lightning:recordForm to display related record detail on the case object. I can get the fields to show and the lightning component to display on the case but it shows no data even when the case has a contact assigned. Below is the code I have been trying to use but I cannot seem to get it to populate with data. Any help is much appreciated. Thanks

<aura:component implements="flexipage:availableForRecordHome,force:hasRecordId" access="global">
<aura:attribute name="recordId" type="Id"/>
<aura:attribute name="case" type="Case"/>
<aura:attribute name="contactFields" type="String[]" default="Name,Title"/>
<force:recordData aura:id="caseRecord"
                    recordId="{!v.recordId}"
                    targetFields="{!v.Case}"
                    layoutType="FULL"/>
<lightning:card iconName="standard:user" title="{! 'Contact Details'}">
    <div class="slds-p-left_large slds-p-right_medium">
        <lightning:recordForm aura:id="ContactForm"
                            recordId="{!v.Case.ContactId}"
                            objectApiName="Contact"
                            fields="{!v.contactFields}"
                            columns="2"
                            mode="View"/>
    </div>
</lightning:card>

Best Answer

Your primary issue is here where you defining targetFields="{!v.Case}"

<force:recordData aura:id="caseRecord"
                recordId="{!v.recordId}"
                targetFields="{!v.Case}"
                layoutType="FULL"/>

AND

here where you are defining recordId="{!v.Case.ContactId}"

<lightning:recordForm aura:id="ContactForm"
                        recordId="{!v.Case.ContactId}"
                        objectApiName="Contact"
                        fields="{!v.contactFields}"
                        columns="2"
                        mode="View"/>

The issue: case sensitivity

You have the attribute declared as <aura:attribute name="case" type="Case"/> with a lowercase c, and that you are trying to reference it with an UPPERCASE C as mentioned in the places above.

Once you change the references of the attribute at the places wherever it is referred, as below (or better rename it not to conflict with the object name to say myCase), it will work.

Change:

  • targetFields="{!v.Case}" TO targetFields="{!v.case}" (to start with lowercase c)
  • recordId="{!v.Case.ContactId}" TO recordId="{!v.case.ContactId}" (to start with lowercase c)

Additionally, on top of this you should also remove reference of the below declaration:

<aura:attribute name="recordId" type="Id"/>

This may lead to a runtime error, as you are already implementing force:recordId which mentions (emphasis mine):

Note If your component implements force:hasRecordId, you don’t need to add a recordId attribute to the component yourself. If you do add it, don’t change the access level or type of the attribute or the component will cause a runtime error.

Related Topic