The <apex: outputField> is one of the most used components in Visualforce Page that act as a read-only display of a label and value for a Salesforce object's field. All the attributes associated with the Salesforce field are respected by this component.
We use this component for getting input from the user for a controller method that doesn't correspond to a Salesforce Object's field.
The <apex: outputField> component should always be the child of the <apex: pageBlock> and <apex: pageBlockSectionItem> components.
HTML pass-through attributes are supported by this component by using the "html-" prefix.
The <apex: outputField> component has the following attributes on Visualforce Page:
1. dir
The dir is a string-type attribute that is used for specifying the direction in which the generated HTML component should be read. RTL and LTR are the two possible values for this attribute.
Syntax:
<apex: outputField dir="RTL"></apex: outputField>
2. id
The id is a string-type attribute, i.e., a unique identifier that allows this component to be referenced by other components on the page.
Syntax:
<apex: outputField id="outputFieldId"></apex: outputField>
3. label
The label is a string-type attribute that is used for specifying the text value that needs to be used as the component label.
Syntax:
<apex: outputField label="Output Field Label"></apex: outputField>
4. lang
The lang is a string-type attribute that is used for specifying the base language for the generated HTML output.
Syntax:
AD
<apex: outputField lang="en-US"></apex: outputField>
5. rendered
The rendered is a Boolean-type attribute that is used for specifying whether this component needs to be rendered on the page or not. Boolean-value true is set as a default value for this attribute.
Syntax:
<apex: outputField rendered="false"></apex: outputField>
6. style
The style is a string type attribute used to specify the inline CSS style that will be applied for displaying the input component.
AD
Syntax:
<apex: outputField style="display:none;"></apex: outputField>
7. styleClass
The styleClass is a string type attribute used to specify the style class that will be applied for displaying the input component.
Syntax:
<apex: outputField styleClass="outputClass"></apex: outputField>
8. title
The title is a string-type attribute used to specify the text that needs to be displayed as a tooltip when the user hovers the mouse pointer over this component.
Syntax:
<apex: outputField title="Output Field Title"></apex: outputField>
9. value
The value is an Object-type attribute that is used for specifying the expression that references the Salesforce field associated with this output field.
Syntax:
<apex: outputField value="{!account.name}"></apex: outputField>
Let's take an example to understand how we can use this component on Visualforce Page:
ApexOutputFieldExample.vfp
<!-- apex page with Contact standardController to demonstrate the functionality of apex outputField-->
<apex:page standardController="Contact" tabStyle="Contact">
<apex:pageBlock>
<apex:pageBlockSection title="Contact Information">
<apex:outputField value="{!Contact.OwnerId}"/>
<apex:outputField value="{!Contact.Phone}"/>
<apex:outputField value="{!Contact.Name}"/>
<apex:outputField value="{!Contact.HomePhone}"/>
<apex:outputField value="{!Contact.AccountId}"/>
<apex:outputField value="{!Contact.MobilePhone}"/>
<apex:outputField value="{!Contact.Title}"/>
<apex:outputField value="{!Contact.OtherPhone}"/>
<apex:outputField value="{!Contact.Department}"/>
<apex:outputField value="{!Contact.Fax}"/>
<apex:outputField value="{!Contact.Birthdate}"/>
<apex:outputField value="{!Contact.Email}"/>
<apex:outputField value="{!Contact.ReportsToId}"/>
<apex:outputField value="{!Contact.AssistantName}"/>
<apex:outputField value="{!Contact.LeadSource}"/>
<apex:outputField value="{!Contact.AssistantPhone}"/>
</apex:pageBlockSection>
<apex:pageBlockSection title="Address Information">
<apex:outputField value="{!Contact.MailingStreet}"/>
<apex:outputField value="{!Contact.OtherStreet}"/>
<apex:outputField value="{!Contact.MailingCity}"/>
<apex:outputField value="{!Contact.OtherCity}"/>
<apex:outputField value="{!Contact.MailingState}"/>
<apex:outputField value="{!Contact.OtherState}"/>
<apex:outputField value="{!Contact.MailingPostalCode}"/>
<apex:outputField value="{!Contact.OtherPostalCode}"/>
<apex:outputField value="{!Contact.MailingCountry}"/>
<apex:outputField value="{!Contact.OtherCountry}"/>
</apex:pageBlockSection>
<apex:pageBlockSection title="Other Information">
<apex:outputField value="{!Contact.Languages__c}"/>
<apex:outputField value="{!Contact.Level__c}"/>
<apex:outputField value="{!Contact.CreatedById}"/>
<apex:outputField value="{!Contact.LastModifiedById}"/>
<apex:outputField value="{!Contact.Description}"/>
</apex:pageBlockSection>
</apex:pageBlock>
</apex:page>
