<apex: outputText> Component in Visualforce Page

The <apex: outputText> is another important component for displaying text on a Visualforce page. The text generated from the <apex: outputText> is wrapped in an HTML <span> tag. However, we can customize the appearance of the <apex: outputText> by using the CSS.

The <apex: outputText> component is used to get the input from the user for the controller method that doesn't correspond to a Salesforce field.

This component supports the HTML pass-through attributes by simply adding "html-" prefix.

The <apex: outputText> component has the following attributes on the Visualforce page:

1. dir

The dir is a string-type attribute used to specify the direction in which the generated HTML component should be read. LTR and RTL are the two possible values for this attribute.

Syntax:

2. escape

The escape is a Boolean-type attribute used for specifying whether the sensitive HTML and XML characters should be escaped in the generated HTML output by this component.

Syntax:

3. label

The label is a string-type string used to specify the text that needs to be displayed as a label next to the output text.

Syntax:

4. id

The id is a string-type attribute that allows this component to be referenced by other components on the page.

Syntax:

5. lang

The lang is a string-type attribute that specifies the base language used for the generated HTML output. The values can be "en" or "en-US" etc.

Syntax:

6. rendered

The rendered is a Boolean-type attribute used to specify whether this component is rendered on the page. By default, its value is set to true.

Syntax:

7. style

The style is a string-type attribute used to specify the CSS that needs to be applied to it. Inline CSS is used as a value for this attribute.

Syntax:

8. styleClass

The styleClass is a string-type attribute used to specify the external CSS stylesheet that needs to be applied to it to display the output text.

Syntax:

9. title

The title is a string-type attribute used to specify the text that needs to be displayed as a tooltip when the mouse hovers over this component

Syntax:

10. value

The value is an Object-type attribute used to specify the text displayed when the component is rendered on the page.

Syntax:

Let's take an example to understand how we can use the <apex: outputText> component inside the VF page:

ApexOutputTextExample.vfp

<!-- apex page with Contact standardController to demonstrate the functionality of apex outputText--> 
<apex:page controller="ApexOutputTextController" tabStyle="Contact">
    <apex: form >
        <apex:pageBlock>
            <input type="button" value="Show Contact Information" onclick="showContactInfo();" />
            <input type="button" value="Show Address Information" onclick="showAddressInfo();" />
            <input type="button" value="Show Other Information" onclick="showOtherInfo();" />
            <apex:pageBlockSection title="Contact Information">
                <apex:actionFunction name="showContactInfo" action="{!showData1}"/>
                <apex:outputPanel id="message1" rendered="{!showFlag1}">
                    <apex:outputText value="{!con.OwnerId}"/>
                    <apex:outputText value="{!con.Phone}"/>
                    <apex:outputText value="{!con.Name}"/>
                    <apex:outputText value="{!con.HomePhone}"/>
                    <apex:outputText value="{!con.AccountId}"/>
                    <apex:outputText value="{!con.MobilePhone}"/>
                    <apex:outputText value="{!con.Title}"/>
                    <apex:outputText value="{!con.OtherPhone}"/>
                    <apex:outputText value="{!con.Department}"/>
                    <apex:outputText value="{!con.Fax}"/>
                    <apex:outputText value="{!con.Birthdate}"/>
                    <apex:outputText value="{!con.Email}"/>
                    <apex:outputText value="{!con.ReportsToId}"/>
                    <apex:outputText value="{!con.AssistantName}"/>
                    <apex:outputText value="{!con.LeadSource}"/>
                    <apex:outputText value="{!con.AssistantPhone}"/>
                </apex:outputPanel>
            </apex:pageBlockSection>
            <apex:pageBlockSection title="Address Information">
                <apex:actionFunction name="showAddressInfo" action="{!showData2}"/>
                <apex:outputPanel id="message2" rendered="{!showFlag2}">
                    <apex:outputText value="{!con.MailingStreet}"/>
                    <apex:outputText value="{!con.OtherStreet}"/>
                    <apex:outputText value="{!con.MailingCity}"/>
                    <apex:outputText value="{!con.OtherCity}"/>
                    <apex:outputText value="{!con.MailingState}"/>
                    <apex:outputText value="{!con.OtherState}"/>
                    <apex:outputText value="{!con.MailingPostalCode}"/>
                    <apex:outputText value="{!con.OtherPostalCode}"/>
                    <apex:outputText value="{!con.MailingCountry}"/>
                    <apex:outputText value="{!con.OtherCountry}"/>
                </apex:outputPanel>
            </apex:pageBlockSection>
            <apex:pageBlockSection title="Other Information">
                <apex:actionFunction name="showOtherInfo" action="{!showData3}"/>
                <apex:outputPanel id="message3" rendered="{!showFlag3}">
                    <apex:outputText value="{!con.Languages__c}"/>
                    <apex:outputText value="{!con.Level__c}"/>
                    <apex:outputText value="{!con.CreatedById}"/>
                    <apex:outputText value="{!con.LastModifiedById}"/>
                    <apex:outputText value="{!con.Description}"/>
                </apex:outputPanel>
            </apex:pageBlockSection>
        </apex:pageBlock>
    </apex: form>
</apex: page>

ApexOutputTextController.vfp

public class ApexOutputTextController {
    
    public Contact con {get;set;}
    public Boolean showFlag1{ get; set; }
    public Boolean showFlag2{ get; set; }
    public Boolean showFlag3{ get; set; }
    
    public ApexOutputTextController(){
        con = [SELECT Id, AccountId, LastName, FirstName, Salutation, Name, OtherStreet, OtherCity, OtherState, 
               OtherPostalCode, OtherCountry, OtherLatitude, OtherLongitude, OtherGeocodeAccuracy, OtherAddress, 
               MailingStreet, MailingCity, MailingState, MailingPostalCode, MailingCountry, MailingLatitude, 
               MailingLongitude, MailingGeocodeAccuracy, MailingAddress, Phone, Fax, MobilePhone, HomePhone, 
               OtherPhone, AssistantPhone, ReportsToId, Email, Title, Department, AssistantName, LeadSource, 
               Birthdate, Description, OwnerId, CreatedDate, CreatedById, LastModifiedDate, LastModifiedById, 
               SystemModstamp, LastActivityDate, LastCURequestDate, LastCUUpdateDate, LastViewedDate, 
               LastReferencedDate, EmailBouncedReason, EmailBouncedDate, IsEmailBounced, PhotoUrl, Jigsaw, 
               JigsawContactId, CleanStatus, IndividualId, Level__c, Languages__c, Comment__c, External_Id__c 
               FROM Contact WHERE Id = :ApexPages.currentPage().getParameters().get('id')];
        showFlag1 = false;
        showFlag2 = false;
        showFlag3 = false;
    }
    public void showData1(){
        showFlag1 = true;
    }
    public void showData2(){
        showFlag2 = true;
    }
    public void showData3(){
        showFlag3 = true;
    }
}

Output