In this Salesforce Tutorial, you will learn all about Visualforce in Salesforce — including what it is, various terminologies associated with Visualforce Pages, Components Controllers and much more! STEP BY STEP tutorial.

What is a Visualforce used for?

Visual Force is a framework that allows developers to build sophisticated, custom user interfaces that can be hosted natively on the Force.com platform. The Visualforce framework includes a tag-based markup language, similar to HTML.

In the Visual Force markup language, each Visualforce tags corresponds to a coarse or fine-grained user interface component, such as a section of a page, a related list, or a field. The behavior of Visualforce components can either be controlled by the same logic that is used in standard Salesforce pages, or developers can associate their own logic with a controller class written in Apex.

Steps to create a Visualforce pages

  1. Go to Setup > Quick Find and search for Visualforce Pages.
  2. Click New to create a Visualforce page.
  3. Write your Visualforce markup. For example:
<apex:page>
  <h1>Hello, Visualforce World!</h1>
</apex:page>

Save the page.

In Visualforce, developers can create custom UI Obviously having their HTML, CSS and JavaScript. In Visualforce, a page is made up of tags (sometimes called components) and their associated controllers that ensure the correct behavior on the page.

Tags have certain attributes which define the properties of the tag. Most Visualforce components will come with two standard attributes by default:

  • ID: ID is a unique identifier which helps in binding or connecting this component with other components ID.
  • Rerender: This attribute determines whether the component should be displayed and hidden every time an event occurs, which allows pages to update in real-time without fully reloading.

Controllers:

  1. Standard Controller :t is having basic functionality for dealing with standard Salesforce objects like Accounts, Contacts etc.
  2. Controller (Custom): This provides the capability to write custom Apex code in order to control page behavior.
  3. Controller Extension: Calls a constructor to add selected logic and functionality of standard or custom controllers with more control over the behavior.

These are the building blocks of constructing dynamic, interactive web applications within Salesforce in a flexible manner.

Where we can use Visualforce pages?

Visualforce pages can be used to

  1. Override standard buttons, such as New button for accounts, save button for contacts….etc..
  2. To override custom tabs, to create Visualforce tabs.
  3. Embed components in detail page layout.
  4. Create dashboard components on custom help pages
  5. Customize, extend on integrating the sideboards in the service cloud console(custom console components)

Standard Controller

Standard Controller objects reference the pre-built Visualforce controllers provided by Salesforce.com. The only time it is necessary to refer to a Standard Controller object is when defining an extension for a standard controller. Standard Controller is the data type of the single argument in the extension class constructor.

  • Standard Controller is used for customization of both standard and custom objects.

Standard Controller example:

<apex:page standardController="Account">
    <h1>Account Name: {!Account.Name}</h1>
    <apex:form>
        <apex:inputField value="{!Account.Phone}" />
        <apex:commandButton value="Save" action="{!save}" />
    </apex:form>
</apex:page>

Custom Controller

The Controller is an apex class which is used to implement all the logic of Visualforce page without leveraging the standard functionality.

Custom controller Example:

Apex Custom Controller:






public class CustomAccountController {
    public Account account { get; set; }
    
    public CustomAccountController() {
        account = [SELECT Name, Phone FROM Account WHERE Id = :ApexPages.currentPage().getParameters().get('id')];
    }
    
    public PageReference saveAccount() {
        update account;
        return null;
    }
}






Visualforce Page with Custom Controller





<apex:page controller="CustomAccountController">
    <h1>Account Name: {!account.Name}</h1>
    <apex:form>
        <apex:inputField value="{!account.Phone}" />
        <apex:commandButton value="Save" action="{!saveAccount}" />
    </apex:form>
</apex:page>






Here, the Custom Controller fetches the account data based on the page URL parameter and updates it manually through the saveAccount method.





Extension Controller





A Controller Extension extends the functionality of a Standard or Custom Controller, allowing you to add custom logic while still leveraging the default behaviors.





Extension Controller Example





Apex Controller Extension:





public class AccountExtension {
    private final Account account;
    
    public AccountExtension(ApexPages.StandardController stdController) {
        this.account = (Account) stdController.getRecord();
    }

    public void customMethod() {
        account.Phone = '123-456-7890';
    }
}






Visualforce Page with Controller Extension:





<apex:page standardController="Account" extensions="AccountExtension">
    <h1>Account Name: {!Account.Name}</h1>
    <apex:form>
        <apex:inputField value="{!Account.Phone}" />
        <apex:commandButton value="Set Phone" action="{!customMethod}" />
        <apex:commandButton value="Save" action="{!save}" />
    </apex:form>
</apex:page>






The Extension Controller allows adding custom logic (setting the phone number) while still relying on the Standard Controller for standard operations like saving.