Record View Form

lightning:recordViewForm

Represents a record view that displays one or more fields, provided by lightning:outputField. This component requires API version 41.0 and later.

For Aura components only. For LWC development, use lightning-record-view-form.

For Use In

Lightning Experience, Experience Builder Sites, Salesforce Mobile App

Use the lightning:recordViewForm component to create a form that displays Salesforce record data for specified fields associated with that record. The fields are rendered with their labels and current values as read-only. You can customize the form layout or provide custom rendering of record data.

You can customize the form layout or provide custom rendering of record data. If you don't require customizations, use lightning:recordForm instead.

To specify read-only fields, use lightning:outputField components inside lightning:recordViewForm.

lightning:recordViewForm requires a record ID to display the fields on the record. It doesn't require additional Apex controllers or Lightning Data Service to display record data. This component also takes care of field-level security and sharing for you, so users see only the data they have access to.

To access raw record data or create a form that needs more customization than the lightning:record*Form components allow, use force:recordData.

Object API Name 

Each Salesforce record is associated with a Salesforce object. For example, a contact record is associated with the Contact object. Record IDs are created with prefixes that indicate the object. The lightning:recordViewForm component requires you to specify the objectApiName attribute to establish the relationship between a record and an object. The object API name must be appropriate for the use of the component. For example, if you include lightning:recordViewForm on a record page for an account, set objectApiName="Account". If the record ID and object API name don't agree, the form doesn't display.

To use your component in a managed package, include your namespace when using objectApiName, for example, objectApiName="namespace__Custom_object__c".

Supported Objects 

This component doesn't support all Salesforce standard objects. This limitation also applies to a record that references a field that belongs to an unsupported object.

This component supports the Task object but Task.IsRecurrence and Task.IsReminderSet won't render even when requested.

This component supports the Event object butEvent.IsRecurrence, Event.IsRecurrence2, and Event.IsReminderSet don't render even when requested.

External objects aren't supported.

For a list of supported objects, see the User Interface API Developer Guide.

If you are working with an unsupported object or if have to use SOQL to query certain records, create your own UI and use Apex to work with Salesforce data. For more information, see Using Apex in the Lightning Aura Components Developer Guide.

Displaying Record Fields 

To display the fields on a record, specify the fields using lightning:outputField.

1<aura:component>
2  <lightning:recordViewForm recordId="003XXXXXXXXXXXXXXX" objectApiName="My_Contact__c">
3    <div class="slds-box">
4      <lightning:outputField fieldName="Name" />
5      <lightning:outputField fieldName="Email__c" />
6    </div>
7  </lightning:recordViewForm>
8</aura:component>

To display a read-only field in the form, use the lightning:outputField component and set the fieldName to the API name of the field. Labels for certain fields can differ from those displayed on a standard record page. For example, the Name field on the opportunity object displays "Name" instead of "Opportunity Name" while the Name field name on the account object displays "Account Name".

For more information, see the documentation for lightning:outputField.

Using Record Edit Form and Record View Form Together 

Here's an example that displays a record edit form and a record view form for the same contact record. When you make edits and click the Update Record button to submit the record edit form, the record view form updates automatically.

Note: The forms are separate from each other. A form can't be nested in another form.

1<aura:component>
2  <div class="slds-p-bottom_large slds-p-left_large" style="width:500px">
3    <lightning:recordEditForm
4      aura:id="recordEditForm"
5      recordId="003R00000000000000"
6      objectApiName="Contact"
7    >
8      <lightning:messages />
9      <lightning:inputField fieldName="FirstName" />
10      <lightning:inputField fieldName="LastName" />
11      <lightning:inputField fieldName="Birthdate" />
12      <lightning:inputField fieldName="Phone" />
13      <!--Picklist-->
14      <lightning:inputField fieldName="LeadSource" />
15      <lightning:button
16        aura:id="submit"
17        type="submit"
18        label="Update Record"
19        class="slds-m-top_medium"
20      />
21    </lightning:recordEditForm>
22  </div>
23  <!-- Record Display -->
24  <div class="slds-p-bottom_large slds-p-left_large" style="width:500px">
25    <lightning:recordViewForm recordId="003R00000000000000" objectApiName="Contact">
26      <div class="slds-box">
27        <lightning:outputField fieldName="Name" />
28        <lightning:outputField fieldName="Birthdate" />
29        <lightning:outputField fieldName="Phone" />
30        <lightning:outputField fieldName="LeadSource" />
31      </div>
32    </lightning:recordViewForm>
33  </div>
34</aura:component>

Creating Multiple Columns 

To create a multi-column layout for your record view, use the Grid utility classes in Lightning Design System. This example creates a two-column layout.

1<aura:component>
2  <lightning:recordViewForm recordId="003XXXXXXXXXXXXXXX" objectApiName="My_Contact__c">
3    <div class="slds-grid">
4      <div class="slds-col slds-size_1-of-2">
5        <!-- Your lightning:outputField components here -->
6      </div>
7      <div class="slds-col slds-size_1-of-2">
8        <!-- More lightning:outputField components here -->
9      </div>
10    </div>
11  </lightning:recordViewForm>
12</aura:component>

Form Display Density 

In the Salesforce user interface, the Display Density setting lets users choose how densely the content is displayed. The Comfy density shows labels on top of the fields and more space between page elements. Compact density shows labels next to the fields and less space between page elements.

The record form components, lightning:recordForm, lightning:recordEditForm, and lightning:recordViewForm, handle form density in similar ways. The density attribute is set to auto by default for all record form components.

Display density is supported for lightning:inputField and lightning:outputField within the form; display density is not supported for custom field components within the form.

With auto density:

  • Record form components detect the Display Density setting and the width of the form's container to determine label position. The record form components don't change the space between elements, however.
  • If your Salesforce density setting is Comfy, the fields always display with their labels above them.
  • If your Salesforce density setting is Compact, the fields initially display with their labels next to them. If you resize the form container below a certain width or use the form in a narrow container, the fields display with their labels above them. This behavior is similar to how other elements behave in Lightning Experience when Compact density is enabled. The record form components use the same width settings to determine when to switch the display density.
  • If a record form component doesn't detect the Salesforce density setting, the fields display with their labels next to them. If you resize the form container to a narrow width, the fields display with their labels above them.

Detecting the user's density setting is only supported in Lightning Experience. When a record form component runs outside Lightning Experience, and density is set to auto, the fields display with their labels next to them, and switch to labels above the fields when in a narrow container.

If you specify a variant for lightning:outputField, the variant overrides the display density for that field.

Setting the Form Display Density

To display a record form with a particular density, set the density attribute to one of these values.

  • comfy makes the form always display labels on top of fields and doesn't detect the user setting.
  • compact makes the form display labels next to their fields and doesn't detect the user setting. However, the form switches to the comfy density if the form is narrowed to the width that triggers the automatic change. To reduce the whitespace between the label and field when the form uses compact density, use the slds-form-element_1-col class on lightning:inputField or lightning:outputField.
  • auto makes the form use the default behavior described in Form Display Density.

Working with Person Accounts 

A person account is a record type on the account object. It combines fields from the account and contact object into a single record. To use person accounts in your org, you must enable the Person Accounts setting first. After Person Accounts is enabled, it can’t be disabled. For more information, see Enable Person Accounts.

To access person account fields, use the account object with objectApiName="Account".

Specify the fields using the field names listed in the IsPersonAccountFields section for the Account object in the Object Reference.

The fields that begin with Person are the fields from the contact object.

For standard fields on the contact object, use Person<ContactFieldName>. For example, use fieldName="PersonMobilePhone" for the MobilePhone field on the contact object.

For custom fields on the account object, use CustomFieldName__c as usual.

For custom fields on the contact object, use CustomFieldName__pc.

This example creates a form to view a person account record.

1<aura:component implements="flexipage:availableForRecordHome,force:hasRecordId">
2  <lightning:recordViewForm recordId="{!v.recordId}" objectApiName="Account">
3    <!-- Name field on account -->
4    <lightning:outputField fieldName="Name" />
5
6    <!-- Nickname__c field on account -->
7    <lightning:outputField fieldName="Nickname__c" />
8
9    <!-- MobilePhone field on contact -->
10    <lightning:outputField fieldName="PersonMobilePhone" />
11
12    <!-- Contact_Nickname__c field on contact -->
13    <lightning:outputField fieldName="Contact_Nickname__pc" />
14    <lightning:button class="slds-m-top_small" variant="brand" type="submit" label="Update" />
15  </lightning:recordViewForm>
16</aura:component>

Usage Considerations 

Nesting lightning:recordViewForm in another instance of the component, or nesting it in lightning:recordEditForm or lightning:recordForm is not supported.

Attributes 

NameDescriptionTypeDefaultRequired
bodyThe body of the component. In markup, this is everything in the body of the tag.Aura.Component[]
classA CSS class for the outer element, in addition to the component's base classes.String
densitySets the arrangement style of fields and labels in the form. Accepted values are compact, comfy, and auto (default). Use compact to display fields and their labels on the same line. Use comfy to display fields below their labels. Use auto to let the component dynamically set the density according to the user's Display Density setting and the width of the form.String
objectApiNameThe API name of the object.String
recordIdThe ID of the record to be displayed.String