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