A lightning:outputField component displays the field value in the correct format based on the field type. You must provide the record ID in the wrapper lightning:recordFormView component, and specify the field name on lightning:outputField. For example, if fieldName references a date and time value, then the default output value contains the date and time in the user's locale. If fieldName references an email address, phone number, or URL, then a clickable link is displayed.
This component inherits styling from input (readonly state) in the Lightning Design System.
To create a record detail layout, wrap the fields with lightning:recordViewForm and provide the record ID. You don't need additional Apex controllers or Lightning Data Service as data refresh happens automatically.
<aura:component> <!-- Replace the record ID with your own --> <lightning:recordViewForm recordId="001XXXXXXXXXXXXXXX" objectApiName="Contact"> <div> <lightning:outputField fieldName="Name" /> <lightning:outputField fieldName="Phone"/> <lightning:outputField fieldName="Email" /> <lightning:outputField fieldName="Birthdate" /> <lightning:outputField fieldName="LeadSource" /> </div> </lightning:recordViewForm> </aura:component>
The user's locale settings determine the display formats for numbers, percentages, and date and time. Locales are currently not supported for currency. Besides field values, lightning:outputField displays the localized labels and help text for the fields based on their metadata, which are defined by your Salesforce admin. Additionally, no output label or value is rendered if you reference an invalid field.
Usage ConsiderationsThe following fields are supported.
For supported objects, see the User Interface API Developer Guide.
Attribute Name | Attribute Type | Description | Required? |
---|---|---|---|
body | Component[] | The body of the component. In markup, this is everything in the body of the tag. | |
class | String | A CSS class for the outer element, in addition to the component's base classes. | |
fieldName | String | The API name of the field to be displayed. | |
variant | String | Changes the appearance of the output. Accepted variants include standard and label-hidden. This value defaults to standard. |