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.

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

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

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

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

1({
2    doInit : function(component, event, helper) {
3        var action = component.get("c.getContact");
4        action.setCallback(this, function(response) {
5            var state = response.getState();
6            if (state === "SUCCESS") {
7                component.set("v.contact", response.getReturnValue());
8                console.log(response.getReturnValue());
9            }
10         });
11         $A.enqueueAction(action); 
12    }     
13})

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
`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.

Lightning Components Developer Guide

force:outputField

Attributes