Grab Deal : Flat 30% off on live classes + 2 free self-paced courses! - SCHEDULE CALL

- Salesforce Blogs -

How to Create Visualforce Page in Salesforce

What is Visualforce?

Visualforce is a markup language that allows you to describe the user interface components that live on your is the component-based user interface framework for the platform. The framework includes a tag-based markup language; similar to HTML. Visualforce is used for building various attractive and dynamic applications. Visualforce lives on the server. So any code you write will be generated and run on the server.

Visualforce Action

A Visualforce page is created by using composing components, HTML, and optional styling elements on the platform. Visualforce also can integrate with other standard web technology, javascript, jQuery, anugalr.js, bootstrap to give more animated and attractive users. Each page is then accessible by a unique URL. When someone accesses a page, the server renders the page.

Salesforce Training For Administrators & Developers

  • No cost for a Demo Class
  • Industry Expert as your Trainer
  • Available as per your schedule
  • Customer Support Available

How to create Visualforce Page in salesforce As the figure above image, pages are constructed on the server and depending on the logic behind the page may interact with the database; invoke external web service calls, or both, before returning the view to the client (browser). In fact:

  • Visualforce pages can react differently to different client browsers such as those on a mobile or touch screen device.
  • Everything runs on the server, so no additional client-side callbacks are needed to render a complete view.
  • Optional server-side callouts can be made to any Web service.

What is a Visualforce Page?

Visualforce is a salesforce markup language which allows user to create interface component in salesforce.

Read: What are Escalation Rules in Salesforce?

There are two elements in the Visualforce page.

  • Visualforce markup
  • A Visualforce controller

Visualforce Markup

Visualforce markup consists of Visualforce tags, HTML, JavaScript, jQuery, CSS, and Ajax or any other Web-enabled code embedded within a single tag, Visualforce is salesforce custom markup language and represents the view in a Model-View-Controller software design pattern.

VisualForce Controller


The Visualforce controller is an element in Visualforce pages which set to manipulate data with user interactions. Visualforce controllers are of three types they are

  1. Standard controllers.
  2. Custom Controllers.
  3. Extension controllers.

Standard controller:

The standard controller is a pre-built visualforce controller by controllers that contain the same functionality and logic that are used for standard Salesforce pages. If you use the standard Accounts controller, clicking a Save button in Visualforce page results in the same functionality as clicking Save on a standard Account edit page.It can be used in both standard and custom object Syntax

<apex: page standardcontroller ="Account">

</apex: page>

Custom controller

: When a developer needs more customize functionality then we should go to their own apex controller class.

<apex: page controller = "CustomController"></apex: page>

Extension controllers:

A controller extension is an Apex class that extends the functionality of a standard or custom controller. Extension controllers give additional functionality to a standard controller and controller. When we need both standard controller and Controller functionality we use extension controllers to call Controller in visual force page. If there is more than one extension it will execute from left to right.  

<apex: page standardcontroller= “Account” extensions = “CustomController1, CustomController1”>
</apex: page>

Where Can Visualforce Pages Be Used?

Developers can use Visualforce pages to:
  • Override standard functionality, such as the New, Edit
  • Override tab overview pages, such as the Accounts tab home page
  • Define custom tabs
  • Can be integrated with HTML, CSS, Ajax, jQuery
  • Embed components in detail page layouts
  • Create dashboard components or custom help pages
  • Customize, extend, or integrate the sidebars in the Salesforce console (custom console components)
  • Add menu items, actions, and mobile cards in Salesforce1

Creating Simple Visualforce Page

Visualforce is a unique markup language of salesforce used to develop user interface pages according to the client requirement. It runs on platform. We can create a visual force page using a standard controller or controller or extension. Before creating a Visualforce page check that you have permission for visual force or not. Enable development mode to enable developer console

Read: A Step-by-Step Guide to Embark on the Full-Stack Developer Journey

Navigation to the Visualforce page

Setup =>Build =>Develop=>page Enter Label name

How to create Visualforce Page in salesforce

After saving click on preview button

How to create Visualforce Page in salesforce

Creating Simple Visualforce Page using Standard Controller

Read: What is the Custom Setting in Salesforce? Know in 2020

<apex:page standardController="Opportunity" recordSetVar="opportunities" tabStyle="Opportunity" sidebar="false">

<apex:form >

<apex:pageBlock >

<apex:pageMessages />

<apex:pageBlock >

<apex:panelGrid columns="2">

<apex:outputLabel value="View:"/>

<apex:selectList value="{!filterId}" size="1">

<apex:actionSupport event="onchange" rerender="opp_table"/>

<apex:selectOptions value="{!listviewoptions}"/>




<apex:pageBlockButtons >

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


<apex:pageBlockTable value="{!opportunities}" var="opp" id="opp_table">

<apex:column value="{!}"/>

<apex:column headerValue="Stage">

<apex:inputField value="{!opp.stageName}"/>


<apex:column headerValue="Close Date">

<apex:inputField value="{!opp.closeDate}"/>






Save and click on the preview

How to create Visualforce Page in salesforce

Learn Salesforce in the Easiest Way

  • Learn from the videos
  • Learn anytime anywhere
  • Pocket-friendly mode of learning
  • Complimentary eBook available

Visualforce Using Custom controller

public class LoadContactsPageController {

Public List<SelectOption> lstOptions {get; set;}

Public string selectedAccount {get;set;}

Public List<Contact> lstContacts {get;set;}

Public LoadContactsPageController(){

List<Account> lstAccounts = [select id, name from account order by name];

lstOptions = new List<Selectoption>();


lstOptions.Add(new SelectOption('','---None---'));

for(Account acc : lstAccounts){

lstOptions.Add(new SelectOption(acc.Id,;




Public PageReference LoadContacts(){

lstContacts = [select id, firstname, lastname,phone from contact where accountid =: selectedAccount ];

return null;



Visualforce page

<apex:page controller="LoadContactsPageController" tabstyle="Lead" sidebar="false" setup="false" id="out" >

<apex:sectionHeader title="Contacts" subtitle="Contact Search"/>

<apex:form >

<apex:pageblock title="Search Contacts">

<apex:pageblockSection title="Contact Search" collapsible="false" columns="2">

<apex:selectList label="Select Account Name" multiselect="false" size="1" value="{!selectedAccount}">

<apex:selectoptions value="{!lstOptions}">

<apex:actionSupport event="onchange" action="{!LoadContacts}" rendered="pgblock" />



<apex:commandButton value="Load Contacts" action="{!LoadContacts}" rerender="pgBlock"/>


<apex:pageblockSection id="pgBlock" title="Search Results : {!lstContacts.size}" collapsible="false" columns="1">

<apex:pageblockTable value="{!lstContacts}" var="con">

<apex:column value="{!con.FirstName}"/>

<apex:column value="{!con.LastName}"/>

<apex:column value="{!}"/>





Save and Click on preview How to create Visualforce Page in salesforce

Visualforce Page using  Extension controller

public class AccountPagination


private final Account acct;

public AccountPagination(ApexPages.StandardSetController controller) {

this.acct = (Account)controller.getRecord();


public ApexPages.StandardSetController accountRecords {

get {

if(accountRecords == null) {

accountRecords = new ApexPages.StandardSetController(

Database.getQueryLocator([SELECT Name FROM Account]));


return accountRecords;


private set;


public List<Account> getAccountPagination() {

return (List<Account>) accountRecords.getRecords();



Visualforce page

<apex:page standardController="Account" recordSetVar="accounts" extensions="AccountPagination">

<apex:pageBlock title="Viewing Accounts">

<apex:form id="theForm">

<apex:pageBlockSection >

<apex:dataList value="{!accountPagination}" var="acct" type="1">




<apex:panelGrid columns="2">

<apex:commandLink action="{!previous}">Previous</apex:commandlink>

<apex:commandLink action="{!next}">Next</apex:commandlink>




Save and preview How to create Visualforce Page in salesforce

Summing up

Visualforce requires approximately 150 built-in components that provide a variety of UI elements and behavior. Practice more and grow more. Happy learning!

Read: Learn Salesforce Developer Skills: Your Journey to a Fulfilling Career

Salesforce Tutorial Overview

fbicons FaceBook twitterTwitter lingedinLinkedIn pinterest Pinterest emailEmail


    JanBask Training

    A dynamic, highly professional, and a global online training course provider committed to propelling the next generation of technology learners with a whole new way of training experience.

  • fb-15
  • twitter-15
  • linkedin-15


Trending Courses

Cyber Security Course

Cyber Security

  • Introduction to cybersecurity
  • Cryptography and Secure Communication 
  • Cloud Computing Architectural Framework
  • Security Architectures and Models
Cyber Security Course

Upcoming Class

12 days 05 Jul 2024

QA Course


  • Introduction and Software Testing
  • Software Test Life Cycle
  • Automation Testing and API Testing
  • Selenium framework development using Testing
QA Course

Upcoming Class

5 days 28 Jun 2024

Salesforce Course


  • Salesforce Configuration Introduction
  • Security & Automation Process
  • Sales & Service Cloud
  • Apex Programming, SOQL & SOSL
Salesforce Course

Upcoming Class

3 days 26 Jun 2024

Business Analyst Course

Business Analyst

  • BA & Stakeholders Overview
  • BPMN, Requirement Elicitation
  • BA Tools & Design Documents
  • Enterprise Analysis, Agile & Scrum
Business Analyst Course

Upcoming Class

-0 day 23 Jun 2024

MS SQL Server Course

MS SQL Server

  • Introduction & Database Query
  • Programming, Indexes & System Functions
  • SSIS Package Development Procedures
  • SSRS Report Design
MS SQL Server Course

Upcoming Class

5 days 28 Jun 2024

Data Science Course

Data Science

  • Data Science Introduction
  • Hadoop and Spark Overview
  • Python & Intro to R Programming
  • Machine Learning
Data Science Course

Upcoming Class

6 days 29 Jun 2024

DevOps Course


  • Intro to DevOps
  • GIT and Maven
  • Jenkins & Ansible
  • Docker and Cloud Computing
DevOps Course

Upcoming Class

1 day 24 Jun 2024

Hadoop Course


  • Architecture, HDFS & MapReduce
  • Unix Shell & Apache Pig Installation
  • HIVE Installation & User-Defined Functions
  • SQOOP & Hbase Installation
Hadoop Course

Upcoming Class

12 days 05 Jul 2024

Python Course


  • Features of Python
  • Python Editors and IDEs
  • Data types and Variables
  • Python File Operation
Python Course

Upcoming Class

13 days 06 Jul 2024

Artificial Intelligence Course

Artificial Intelligence

  • Components of AI
  • Categories of Machine Learning
  • Recurrent Neural Networks
  • Recurrent Neural Networks
Artificial Intelligence Course

Upcoming Class

6 days 29 Jun 2024

Machine Learning Course

Machine Learning

  • Introduction to Machine Learning & Python
  • Machine Learning: Supervised Learning
  • Machine Learning: Unsupervised Learning
Machine Learning Course

Upcoming Class

19 days 12 Jul 2024

 Tableau Course


  • Introduction to Tableau Desktop
  • Data Transformation Methods
  • Configuring tableau server
  • Integration with R & Hadoop
 Tableau Course

Upcoming Class

12 days 05 Jul 2024

Search Posts


Receive Latest Materials and Offers on Salesforce Course