Output Field
force:outputField
Provides a concrete type-specific output component implementation based on the data to which it is bound.
For Use In
Lightning Experience, Experience Builder Sites, Salesforce Mobile App
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.
force:outputField has been superseded by lightning:outputField. To display record data without using Apex controllers, use lightning:outputField with lightning:recordViewForm, or use lightning:recordForm. To create a generic output field, use a component like lightning:formattedText or lightning:formattedName and so on. For example, use lightning:formattedEmail to display an email address with the mailto: protocol. Alternatively, use lightning:formattedRichText to display rich text, which includes linking for URLs and email addresses.
Note
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" default="{ 'sobjectType': 'Contact' }" />
3 <aura:handler name="init" value="{!this}" action="{!c.doInit}" />
4 <force:outputField value="{!v.contact.Name}" />
5</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});Usage Considerations
force:outputField doesn’t use the Lightning Design System styling. If you’re using force:outputField in a standalone app, this component doesn’t support Lightning Design System styling from force:slds.
Attributes
| Name | Description | Type | Default | Required |
|---|---|---|---|---|
| body | The body of the component. In markup, this is everything in the body of the tag. | Aura.Component[] | ||
| class | A CSS style to be attached to the component. This style is added in addition to base styles output by the component. | String | ||
| value | Data value of Salesforce field to which to bind. | Object |
