lightning:outputField

Represents a read-only display of a label, help text, and value for a field on a Salesforce object. This component requires API version 41.0 and later.

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 Considerations

The following fields are supported.

  • Auto Number: Displays a string that represents the unique number of the record.
  • Checkbox: Displays a disabled checkbox that's either selected or not.
  • Currency: Displays the formatted currency based on the user's locale. Locales are currently not supported for currency.
  • Date: Displays the formatted date based on the user's locale.
  • Date/Time: Displays the formatted date and time based on the user's locale.
  • Email: Displays the email address prepended with the mailto: URL scheme.
  • Formula: Displays the result of the formula based on its data type.
  • Geolocation: Displays latitude and longitude in decimal degrees format: 90.0000, 180.0000.
  • Lookup: Displays a relationship between two records, for example, the account ID associated to a contact record. Lookups render as text only. Linking and hover overlays on lookup values are not supported.
  • Number: Displays the integer or double.
  • Percent: Displays the percentage number.
  • Phone: Displays the phone number prepended with the tel: URL scheme.
  • Picklist and multi-select picklist: Displays picklist values separated by a semi-colon.
  • Text: Displays text up to 255 characters.
  • Text (Encrypted): Displays the encrypted text.
  • Text Area: Displays multi-line text up to 255 characters.
  • Text Area (Long): Displays multi-line text up to 131,072 characters.
  • Text Area (Rich): Displays rich text such as bold or underline text, lists, and images. Unsupported tags and attributes are removed and only their text content is displayed. For more information on supported tags, see Rich Text Editor in Salesforce Help.
  • URL: Displays a link that opens in the same browser window when it's clicked.

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

Attributes

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.