Visualforce Page Tags in Salesforce

In Salesforce Visualforce pages, we have a list of XML markup tags, which are considered components and serve as a container for the data structure returned by the controller.

In this Salesforce tutorial, I will explain the types of tags used in Salesforce Visualforce pages, and with the help of examples, I will also explain their use cases.

Table of Contents

What are Visualforce Tags in Salesforce?

In Salesforce, Visualforce tags are similar to HTML tags, and using these custom tags, we can create custom pages and components in Salesforce. Using the visualforce tags, we can display Salesforce data, create forms, and integrate features like Visualforce controller into the visualforce page, which helps control the visualforce page logic.

Each Visualforce tag serves a specific functionality and is grouped into different categories based on its functions and the requirements of the page features.

Visualforce tags are divided into the categories mentioned below.

Visualforce Input Field Tags
Visualforce Output Field Tags
Select Tags
Visualforce Action component tags
Visualforce Page tags

1. Visualforce Input Field Tags: These tags are used to get the data in Salesforce fields through the user input, and on the user interface of the Salesforce pages, we see them as text, dropdown, and checkbox fields. Within the input tags, we have different tags for different input fields.

<apex:inputText>: This tag is used to get the details such as name, email, and other text-based information.

Syntax:

<apex:inputText value="{!contact.Name}" label="Contact Name"/>

<apex:inputTextarea>: This tag is also used to get input for large text fields such as description, comment, and address.

Syntax:

<apex:inputTextarea value ="{!contact.Description}" label="Description"/>

<apex:inputCheckbox>: This tag is used to take input of boolean values true and false.

Syntax:

<apex:inputCheckbox value="{!contact.IsActive}" label="Active"/>

<apex:inputRadio> – We use the radio button tag when we add multiple options for an input field, and out of that, the user can select any one option.

Syntax:

<apex:inputRadio value="{!selectedOption}" label="Select Option">
        <apex:selectOption itemValue="Option1" itemLabel="Option 1"/>
        <apex:selectOption itemValue="Option2" itemLabel="Option 2"/>
    </apex:inputRadio>

<apex:inputSelect>: This tag creates a dropdown list for selecting from multiple predefined options. It is used to display a list of values in a dropdown format for selection, such as states, countries, or contact categories.

Syntax:

<apex:inputSelect value="{!contact.Type}" label="Contact Type">
        <apex:selectOption itemValue= "Customer" itemLabel="Customer"/>
        <apex:selectOption itemValue= "Prospect" itemLabel="Prospect"/>
   </apex:inputSelect>

<apex:inputSecret>: This input component in Visualforce is used to create a password input field in a Visualforce page. It allows users to enter text that is masked as (********) to make it confidential, commonly used for password inputs or sensitive data.

Example:

<apex:inputSecret value="{!inputValue}" id="theSecretInput"/>

2. Visualforce Output Field Tags: These tags are used to display data that is limited to a Salesforce object or a custom controller. The output field tags help in displaying values dynamically within a Visualforce page.

<apex:outputText>: This tag displays text on the Visualforce page and is used to get user input for a controller method that does not correspond to a field on a sObject.

Syntax:

<apex:outputText value="{!contact.Name}" />

Here, the contact is a sObject, and this tag is supported for sObjects only.

<apex:outputField>: This tag displays the field’s value from a Salesforce object in the standard format, including fields like picklist and dates. It is used when we need to display a field value from a record (such as Account or Contact) on the Visualforce page.

Syntax:

<apex:outputField value="{!contact.Email}" />

<apex:outputPanel>: This tag is used to set content that is grouped together and rendered with an HTML <div> tag and <span> tag. It is used to group and conditionally display output fields, input fields, or other components.

Syntax:

<apex:outputPanel id="thePanel">My span</apex:outputPanel>

3. Select Tags: The select tags in Visualforce are used to create dropdown menus for the user to select a value. This can include standard options or dynamically populated lists. Now, we will see some commonly used select tags on visualforce pages.

<apex:selectList>: This tag creates a dropdown link for selecting one or more options at a time, depending on the value from the multi-select attribute. It is used when you need users to choose from predefined values, such as status types or categories.

Example:

<apex:selectList value="{!selectedType}" size="1">
        <apex:selectOption itemValue="New" itemLabel="New"/>
        <apex:selectOption itemValue="InProgress" itemLabel="In Progress"/>
        <apex:selectOption itemValue="Closed" itemLabel="Closed"/>
    </apex:selectList>

<apex:selectOption>: The purpose of this tag is to define a single option in a tag <apex:selectList>. We have to use it inside the <apex:selectList> to specify each selectable item in the dropdown.

Example:

<apex:selectOption itemValue="Option1" itemLabel="Option 1"/>

4. Visualforce Action Component tags: The Action components in Visualforce pages are used to trigger actions such as saving data, submitting forms, and calling Apex methods. These tags help in making the Visualforce page interactive.

We will see some commonly used action component tags in visualforce pages with their examples.

<apex:commandButton>: This tag creates a button that triggers an action, such as saving data or navigating to a different page. It is used when you have to trigger an action like saving a record or submitting a form.

Example:

 <apex:commandButton value="Save" action="{!saveContact}" />

<apex:commandLink>: Similar to the button tag, this tag creates a link that triggers an action, such as submitting a form or redirecting to another page. It is used when we have to use a hyperlink as an action trigger instead of a button.

Example:

<apex:commandLink value="Click here to save" action="{!saveContact}" />

Here, the text “Click here to Save” will be the hyperlink that will trigger when we click on it.

<apex:actionFunction>: This tag creates a JavaScript function that will be called to trigger an action. It is used when there is a requirement to trigger a controller action method directly from JavaScript code using an AJAX request.

Example:

<apex:actionFunction name="saveContactFunction" action="{!saveContact}" rerender="contactTable"/>

5. Visualforce Page Tags: On a Visualforce page, the Page tags define the structure and settings of the page, like its controller, title, and other page components.

<apea:page>: This tag is considered the base tag of the visualforce page, that is, the first tag block we write to create a visualforce page. It defines the structure and the properties of the Visualforce page. It can include attributes like the controller, action, and style.

Example:

<apex:page standardController="Account">
         <h1>Account Details</h1>
     </apex:page>

<apex:pageBlock>: This page block is used to create a section or a block on the visualforce page to display the page components in a structured way. It uses attributes like “title” to add a title and “id” to add a unique identifier in the page block.

Example:

<apex:pageBlock title="Account Details">
         <apex:outputText value="Account Detail page"/>
</apex:pageBlock>

<apex:pageMessage>: This visualforce tag is used to display messages to users, such as errors, warnings, or messages with any specific information. It uses attributes like “severity“, “summary“, and “detail“. In the severity attribute, we define the type of message that is an error, information, warning, or confirmation message.

Example:

<apex:pageMessage severity="error" summary="Error Occurred" detail="An unexpected error occurred"/>

<apex:pageBlockTable>: This tag displays a data table within a block of the visualforce page. It can iterate over a collection of records and display them in rows and columns.

Example:

<apex:pageBlockTable value="{!accounts}" var="acc">
       <apex:column value="{!acc.Name}"/>
       <apex:column value="{!acc.Industry}"/>
 </apex:pageBlockTable>

<apex:pageBlockSectionItem>: This tag is used inside the <apex:pageBlockSection> tag, and there, it displays a value and a label for a field.

Example:

<apex:pageBlockSection>
         <apex:pageBlockSectionItem label="Account Name">
             <apex:outputText value="{!account.Name}"/>
         </apex:pageBlockSectionItem>
     </apex:pageBlockSection>

In the above information, we have discussed the commonly used tags in Salesforce visualforce pages to define the components and structure the page in an organized way. Like this, there are nearly 90 tags available for Visualforce pages.

Use case example of Visualforce Tags

Now, I will show you the use case of all basic visualforce tags, through which you will understand how to implement those tags in a visualforce page.

1. To create a Visualforce page, navigate to the Salesforce developer console and select File>New>Visualforce page, enter the label for it, and then click OK.

After this, enter the below text on the visualforce page and save it.

<apex:page controller="AccountController">
    <apex:sectionHeader title="Visualforce Tags Implementation" subtitle="Account List and Details" />

    <apex:form id="createAccountForm">
        <apex:pageBlock title="Create New Account">
            <apex:pageBlockSection columns="1">
                <apex:inputField value="{!newAccount.Name}" label="Account Name" />
                <apex:inputField value="{!newAccount.Phone}" label="Phone Number" />
                <apex:inputField value="{!newAccount.Industry}" label="Industry" />
            </apex:pageBlockSection>
            <apex:commandButton action="{!saveAccount}" value="Save Account" />
        </apex:pageBlock>
    </apex:form>

    <apex:pageBlock title="Account List">
        <apex:form id="accountListForm">
            <apex:pageBlockTable value="{!accounts}" var="account">
                <apex:column value="{!account.Name}" headerValue="Name" />
                <apex:column value="{!account.Phone}" headerValue="Phone" />
                <apex:column value="{!account.Industry}" headerValue="Industry" />
                <apex:column>
                    
                    <apex:commandLink value="View Details" action="{!viewDetails}">
                        <apex:param name="accountId" value="{!account.Id}" assignTo="{!selectedAccountId}" />
                    </apex:commandLink>
                </apex:column>
            </apex:pageBlockTable>
        </apex:form>
    </apex:pageBlock>

    <apex:outputPanel rendered="{!NOT(ISNULL(selectedAccount))}">
        <apex:pageBlock title="Selected Account Details">
            <apex:pageBlockSection>
                <apex:outputField value="{!selectedAccount.Name}" label="Account Name" />
                <apex:outputField value="{!selectedAccount.Phone}" label="Phone" />
                <apex:outputField value="{!selectedAccount.Industry}" label="Industry" />
            </apex:pageBlockSection>
        </apex:pageBlock>
    </apex:outputPanel>

</apex:page>

2. To control the logic of the visualforce page methods and buttons, we need to create a visualforce controller, and for that, enter the code below.

public with sharing class AccountController {
    public List<Account> accounts { get; set; }
    public Account newAccount { get; set; }
    public Id selectedAccountId { get; set; }
    public Account selectedAccount { get; set; }

    public AccountController() {
        accounts = [SELECT Id, Name, Phone, Industry FROM Account];
        newAccount = new Account();
    }

    public void saveAccount() {
        insert newAccount;
        newAccount = new Account();
        accounts = [SELECT Id, Name, Phone, Industry FROM Account];
    }

    public void viewDetails() {
        selectedAccount = [SELECT Id, Name, Phone, Industry FROM Account WHERE Id = :selectedAccountId];
    }
}

3. To view the preview of the visualforce page, navigate to Setup > Visualforce pages. Then, click on the visualforce page that we have created. Then, in the next window, click on the button Preview Layout.

As we can see, we have created the visualforce pages, and we have displayed blocks and fields using various tags such as <apex:page>, <apex:form id>, <apex:column>,<apex:pageBlocktitle>, <apex:pageBlockSection>, and <apex:pageblock>.

To save the account records, we have added a button using the <apex:commandButton> tag, and to view the details of accounts, we have added a link “view details” using the tag <apex:commandLink>.

Visualforce Page Tags in Salesforce

What are Visualforce Tags in Salesforce?

Use case example of Visualforce Tags

DOWNLOAD FREE AGENTFORCE EBOOK

FREE SALESFORCE FLOW EBOOK