Loading a Record

Display a Record Using lightning:recordForm

To display a record using lightning:recordForm, provide the record ID and the object API name. Additionally, provide fields using either the fields or layoutType attribute. You can display a record in two modes using the mode attribute.

view

Loads the form using output fields with inline editing enabled. Editable fields have edit icons. If a user clicks an edit icon, editable fields in the form become editable, and the form displays Cancel and Save buttons. This is the default mode when a record ID is provided.

readonly

Loads the form with output fields only. The form doesn’t include edit icons or Cancel and Save buttons.

This example displays an account record in view mode using the compact layout, which includes fewer fields than the full layout. The columns attribute displays the record fields in two columns that are evenly sized. Update the record ID with your own.

1<aura:component>
2    <lightning:recordForm
3        recordId="001XXXXXXXXXXXXXXX"
4        objectApiName="Account"
5        layoutType="Compact"
6        columns="2"/>
7</aura:component>

To display the field values on a record page, implement the flexipage:availableForRecordHome and flexipage:hasRecordId. The component automatically inherits the record ID.

This example displays read-only values for the account’s Name and Industry fields. Add this example to an account record page.

1<aura:component implements="flexipage:availableForRecordHome,force:hasRecordId">
2    <aura:attribute name="recordId" type="String" />
3    <aura:attribute name="fields" type="String[]" default="['Name','Industry']" />
4    <lightning:recordForm recordId="{!v.recordId}" 
5                          objectApiName="Account"
6                          mode="readonly"
7                          fields="{!v.fields}" />

If you provide both fields and layoutType attributes, the display order of the fields is not guaranteed. To specify the field order, use fields without the layoutType attribute. Alternatively, use the lightning:recordViewForm component as shown in the next section.

Display a Record with a Custom Layout Using lightning:recordViewForm

To display a read-only record with a custom layout, use the lightning:recordViewForm component. To compose a form field, use lightning:outputField components, which maps to a Salesforce field by using the fieldName attribute. Including individual fields lets you style a custom layout using the Lightning Design System utility classes, such as the grid system.

1<aura:component>
2    <lightning:recordViewForm recordId="001XXXXXXXXXXXXXXX" 
3                              objectApiName="Account">
4    <div class="slds-grid">
5        <div class="slds-col slds-size_2-of-3">
6            <lightning:outputField fieldName="Name" />
7            <lightning:outputField fieldName="Phone" />
8        </div>
9        <div class="slds-col slds-size_1-of-3">
10            <lightning:outputField fieldName="Industry" />
11            <lightning:outputField fieldName="AnnualRevenue" />
12        </div>
13    </div>
14</lightning:recordViewForm>
15</aura:component>

If you require more customization when displaying a record than what lightning:recordForm and lightning:recordViewForm allow, consider using force:recordData.

Display Record Data in a Custom User Interface Using force:recordData

To specify a list of fields to load, use 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. The layout depends on the page layout assignment for the profile. For example, if a user using the Marketing User profile is assigned the default account layout, all fields on that layout are available to that user. Layouts are typically modified by administrators, so layoutType isn’t as flexible as fields when you want to request specific fields. Loading record data using layoutType allows your component to adapt to layout definitions. Valid values for layoutType are FULL and COMPACT.

To get a field from an object regardless of whether an admin has included it in a layout, use the fields attribute and request the field by name.

targetRecord is populated with the current record, containing the fields relevant to the requested layoutType or the fields listed in the fields attribute. targetFields is populated with a simplified view of the loaded record. For example, for the Name field, v.targetRecord.fields.Name.value is equivalent to v.targetFields.Name.