apex: outputField Component in Visualforce Page

 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>