Load Record by Lightning Data Service

Loading record by Lightning Data Service

In Lightning Experience, we will load the Account record with some attributes from Contact by Lightning Data Service.

Step 1: Need to create a Lightning Component named “loadAccount“.

loadAccount.cmp | It will show the respective Account Details from the Contact record page.

<aura:component implements="flexipage:availableForRecordHome,force:hasRecordId">

    <aura:attribute name="record" type="Object"/>
    <aura:attribute name="loadedRecordFields" type="Object"/>
    <aura:attribute name="recordError" type="String"/>

    <!-- Lightning Data Service -->
    <force:recordData aura:id="accountLoaderId"
				      recordId="{!v.recordId}"
				      fields="Name, Account.Name, Account.BillingCity, Account.BillingState"
				      targetFields="{!v.loadedRecordFields}"
				      targetError="{!v.recordError}"/>    
    
    <!-- Account Details Section -->
    <lightning:card iconName="standard:contact" title="{!v.loadedRecordFields.Name}" >
    	<div class="slds-p-horizontal--small">
        	<p class="slds-text-heading--small">
        		<div class="demo-only" style="padding: 0.5rem; background: rgb(22, 50, 92);">
  					<div class="slds-text-color_inverse">Account Details</div>
				</div><br/>
                <b>Name:</b> <lightning:formattedText title="Account Name" value="{!v.loadedRecordFields.Account.Name}" />
            </p>
            <p class="slds-text-heading--small">
                <b>BillingCity:</b> <lightning:formattedText title="Billing City" value="{!v.loadedRecordFields.Account.BillingCity}" />
            </p>
            <p class="slds-text-heading--small">
                <b>BillingState:</b> <lightning:formattedText title="Billing State" value="{!v.loadedRecordFields.Account.BillingState}" />
            </p>
        </div>
    </lightning:card>
 
 	<!-- Errors, if any -->
	<aura:if isTrue="{!not(empty(v.recordError))}">
        <div class="recordError">
            {!v.recordError}</div>
    </aura:if>
</aura:component>

Step 2: Please open any Contact record in Lightning Experience & click on “Edit Page” by Settings(Gear Icon at the top-right corner) and drag the “loadAccount” component to the right side of the Contact Lightning Record Page. After this, please save and activate the contact page.

Result
loaded account

You can see the red color highlighted portion of the Contact page and it will show the Account details from Contact: Mr. John Bond.

Notes

If you will use layoutType=”FULL” into “force:recordData“, you can only refer to the Name field of Account(Account.Name) from Contact, you can not refer other Account fields from Contact. That’s why, we have mentioned all the respective Account fields (Account.Name, Account.BillingCity, Account.BillingState) and Contact field(Name) both to query in the “fields” attribute. So, we have used “fields” instead of using “layoutType”.

2,736 total views, 2 views today

Rating: 5.0/5. From 2 votes.
Please wait...
This entry was posted in Lightning Components. Bookmark the permalink.

Leave a Reply