force:outputField

A component that provides a concrete type-specific output component implementation based on the data to which it is bound.

Represents a read-only display of a value for a field on a Salesforce object. This component respects the attributes of the associated field and how it should be displayed. For example, if the component contains a date and time value, then the default output value contains the date and time in the user's locale.

As of Winter '18, we recommend using lightning:outputField instead.

This example displays data for a contact name. Bind the field using the value attribute and provide a default value to initialize the object.

<aura:component controller="ContactController">
    <aura:attribute name="contact" type="Contact" 
               default="{ 'sobjectType': 'Contact' }"/>
    <aura:handler name="init" value="{!this}" action="{!c.doInit}" />
    <force:outputField value="{!v.contact.Name}"/>
</aura:component>

To load record data, wire up the container component to an Apex controller that returns the contact.

public with sharing class ContactController {
    @AuraEnabled
    public static Contact getContact() {
        return [select Id, Name from Contact Limit 1];
    }
}

Pass the contact data to the component via a client-side controller.

({
    doInit : function(component, event, helper) {
        var action = component.get("c.getContact");
        action.setCallback(this, function(response) {
            var state = response.getState();
            if (state === "SUCCESS") {
                component.set("v.contact", response.getReturnValue());
                console.log(response.getReturnValue());
            }
         });
         $A.enqueueAction(action); 
    }     
})

This component doesn't use the Lightning Design System styling. Use lightning:input if you want an input field that inherits the Lightning Design System styling.

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 style to be attached to the component. This style is added in addition to base styles output by the component.
value Object Data value of Salesforce field to which to bind.