Loading a Record

To load a record using Lightning Data Service, add the force:recordPreview tag to your component. In the force:recordPreview tag, specify the ID of the record to be loaded, a list of fields, and the attribute to which to assign the loaded record.

Loading a record is the simplest operation in Lightning Data Service. You can accomplish it entirely in markup. The force:recordPreview must specify the following three things.

The ID of the record to be loaded
The component attribute to which the loaded record should be assigned
A list of fields to load

The list of fields to load can be specified explicitly, using the fields attribute. Simply provide a list of fields to query for. For example, fields="Name,BillingCity,BillingState".

Alternatively, and more powerfully, 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. There are several layouts available but in practice the FULL and COMPACT layouts are the simplest and most common to use.

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

1<aura:component
2    implements="flexipage:availableForRecordHome,force:lightningQuickActionWithoutHeader,force:hasRecordId">
3
4    <aura:attribute name="record" type="Object"/>
5    <aura:attribute name="recordError" type="String"/>
6
7    <force:recordPreview aura:id="recordLoader"
8      recordId="{!v.recordId}"
9      layoutType="FULL"
10      targetRecord="{!v.record}"
11      targetError="{!v.recordError}"
12      />
13
14    <!-- Display a header with details about the record -->
15    <div class="slds-page-header" role="banner">
16        <p class="slds-text-heading--label">{!v.record.Name}</p>
17        <h1 class="slds-page-header__title slds-m-right--small
18            slds-truncate slds-align-left">{!v.record.BillingCity}, {!v.record.BillingState}</h1>
19    </div>
20
21    <!-- Display Lightning Data Service errors, if any -->
22    <aura:if isTrue="{!not(empty(v.recordError))}">
23        <div class="recordError">
24            <ui:message title="Error" severity="error" closable="true">
25                {!v.recordError}
26            </ui:message>
27        </div>
28    </aura:if>
29
30</aura:component>

Lightning Components Developer Guide

Loading a Record

Loading a Record

See Also: