Visualforce Pages

Introduction to Visualforce Pages | Salesforce Guide

What is Visualforce Page?

Visualforce page is a web development language created by Salesforce. The syntax for this language is like HTML. It allows developers to build custom web pages. Not intended for pure custom website creation, only useful for internal work of Salesforce.

It allows developers to easily create a complete custom page that has the exact look and feel like a standard Salesforce page. A basic level web design or web development skillset is required to create a Visualforce page like HTML skill.

Why Do We Use Visualforce Pages?

  • To work on complex pages.
  • To display records from multiple objects.
  • When we want more than 2 column displays of data.
  • To edit multiple records at the same time.
  • To create multiple records at the same time.
  • To add custom analytics capabilities.

dont miss out iconDon't forget to check out: Salesforce Lightning Component Inside Lightning Web Component Using Visualforce Page

Types of Controllers in Visualforce Page

There are basically 3 types of Controllers i.e.

  • Standard Controller: With the help of this controller we can use the standard functions like save, edit, delete etc. We don’t need to code for a standard controller, it is already built-in.
  • Custom Controller: To customize the functionality of the controller, we use custom controllers. We use the apex class to create custom controllers.
  • Extension Controller: It is a combination of standard and custom controllers.

Issues with Standard Controller

  • We cannot show data from multiple objects.
  • We cannot write our logic in some apex class and call the same when a button is pressed.
  • We cannot fetch data from the database.
  • We cannot do any DML.
  • Relationship data fetching process is not feasible.

Basic Visualforce page example

Calculator by using visualforce page:

Visualforce Page Code:

<apex:page controller="Numbers">
        <apex:pageBlock title="My Content Section">
            Number 1: <apex:inputText value="{!NumberA}"/>
            Number 2: <apex:inputText value="{!NumberB}"/>
            <apex:commandButton value="Sum" Action="{!ShowAdd}"/>
            <apex:commandButton value="Sub" Action="{!ShowSub}"/>
            <apex:commandButton value="Mul" Action="{!ShowMul}"/>
            <apex:commandButton value="Div" Action="{!ShowDiv}"/>
            <apex:outputlabel id="Id1"> {!message} </apex:outputlabel>

dont miss out iconCheck out another amazing blog by Romil here: Types of Relationships in Salesforce - All You Need to Know

Controller Code:

Public class Numbers{
    Public integer NumberA{get;set;}
    Public integer NumberB{get;set;}
    Public string message{get;set;}    
    Public void ShowAdd(){
        String result = 'The result is ' +(NumberA+NumberB);
    Public void ShowSub(){
        String result = 'The result is ' +(NumberA-NumberB);
    Public void ShowMul(){
        String result = 'The result is ' +(NumberA*NumberB);
    Public void ShowDiv(){
        String result = 'The result is ' +(NumberA/NumberB);



Popular Salesforce Blogs