Loading a Record

Loading a record is the simplest operation in Lightning Data Service. You can accomplish it entirely in markup.
To load a record using Lightning Data Service, add the force:recordData tag to your component. In the force:recordData tag, specify the ID of the record to be loaded, a list of fields, and the attribute to which to assign the loaded record. force:recordData must specify the following.
  • The ID of the record to load
  • Which component attribute to assign the loaded record
  • A list of fields to load

You can explicitly specify the list of fields to load with the fields attribute. For example, fields="Name,BillingCity,BillingState".

Alternatively, you can specify a layout using the layoutType attribute. All fields on that layout are loaded for the record. Layouts are typically modified by administrators. Loading record data using layoutType allows your component to adapt to those layout definitions. Valid values for layoutType are FULL and COMPACT.

Loading a Record

The following example illustrates the essentials of loading a record using Lightning Data Service. This component can be added to a record home page in Lightning App Builder, or as a custom action. The record ID is supplied by the implicit recordId attribute added by the force:hasRecordId interface.

ldsLoad.cmp
<aura:component implements="flexipage:availableForRecordHome,force:lightningQuickActionWithoutHeader, force:hasRecordId">

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

    <force:recordData aura:id="recordLoader"
      recordId="{!v.recordId}"
      layoutType="FULL"
      targetRecord="{!v.record}"
      targetFields="{!v.simpleRecord}"
      targetError="{!v.recordError}"
      recordUpdated="{!c.handleRecordUpdated}"
      />

    <!-- Display a header with details about the record -->
    <div class="slds-page-header" role="banner">
        <p class="slds-text-heading--label">{!v.simpleRecord.Name}</p>
        <h1 class="slds-page-header__title slds-m-right--small
            slds-truncate slds-align-left">{!v.simpleRecord.BillingCity}, {!v.simpleRecord.BillingState}</h1>
    </div>

    <!-- Display Lightning Data Service errors, if any -->
    <aura:if isTrue="{!not(empty(v.recordError))}">
        <div class="recordError">
            <ui:message title="Error" severity="error" closable="true">
                {!v.recordError}
            </ui:message>
        </div>
    </aura:if>
</aura:component>
ldsLoadController.js
({
    handleRecordUpdated: function(component, event, helper) {
        var eventParams = event.getParams();
        if(eventParams.changeType === "LOADED") {
           // record is loaded (render other component which needs record data value)
            console.log("Record is loaded successfully.");
        } else if(eventParams.changeType === "CHANGED") {
            // record is changed
        } else if(eventParams.changeType === "REMOVED") {
            // record is deleted
        } else if(eventParams.changeType === "ERROR") {
            // there’s an error while loading, saving, or deleting the record
        }
    }
})