Salesforce Tutorial# 14: Building a Visualforce (Custom) Page for the Salesforce App

Visualforce is nothing but one of the framework of which is component-based user interface. A tag based language more similar to HTML is used by visualforce.  Each tag corresponds to user interface component. It also has 100 built-in components with custom build component development support.

Model-view-controller (MVC) architecture pattern is supported by Visualforce. Apex programming is used to write your own controllers or extensions to controllers. Standard AJAX components and  formula expression language for action, data and component binding interaction are used by visualforce to provide animation.

Let’s see how visualforce create custom components in this article.

Visualforce in Action

Visualforce pages are created by composing components, HTML, and optional styling elements available in platform. To make animation or rich user interface, visualforce can integrate with any standard web technology like JavaScript.

Difference between Standard Controller & (Custom) Controller

Visualforce controllers are used to access a visual force markup associated with particular link or button. These controllers can be used to provide access to the data that should be displayed in a page, and can modify component behavior. There are number of standard controllers exists for each Salesforce object which provides the functionality similar to custom controller.

custom controller  is the user defined an Apex class that implements all of the logic for a page without leveraging a standard controller. Whenever the visualforce pages need to run entirely in system mode and it does not enforce the permissions and field-level security of the current user the custom controller works. You can have controller extension to each controller in visualforce.

controller extension is moreover an Apex class that extends the functionality of a standard or custom controller. The controller extensions can be used in following scenarios:

  • You want to leverage the built-in functionality of a standard controller but want to override one or more of them for custom specification such as edit, view, save, or delete.
  • You can add new actions.
  • Visualforce page which respects user permissions.
  • The controller extension class executes in system mode, but if it extends a standard controller, then the logic from the standard controller does not execute in system mode. Instead, it executes in user mode, applying the sharing rules, field level security, permissions of current user.

Building a Controller Extension

In the following example we will try to build controller extension CustomControllerName which takes a single argument of type ApexPages.

Now check how the controller extension from above can be used in a page:

The {!} is used to referenced the controller extension methods. These extension works in conjunction with the Account standard controller. The standard controller methods are also available. For example, to retrieve the name of  the account using standard controller, the value attribute of <apex:inputField> is used. The standard account save method is referenced using  <apex:commandButton>.

Multiple controller extensions can be defined for a single page through a comma-separated list. This allows for overrides of methods with the same name. 

Create a List-view, Detail-Page, Copy the page as PDF when click a Button or Link

Building a Custom List Controller

A custom list controller is similar to a standard list controller. Custom list controllers can implement Apex logic that you define to show or act on a set of records.

For example you can create the following custom list controller based on a SOQL query:

The getRecords() returns the list of sObjects. Following Markup shows how to use the abouve custom controller.

Create a button in visual force


Display data in Table format, enabling pagination

<apex:pageBlockTable> or <apex:dataTable>,  these components are used  to display information from multiple records at a time. To know more about it lets see the following page which uses the <apex:pageBlockTable> component to list the contacts associated with an account:

Two required attributes, value and var are <apex:pageBlockTable> ,

  • value can have values of any other Apex type or a list of sObject records.
  • var is the name of the iteration variable. One can use this variable within the body of the <apex:pageBlockTable> tag to access the fields on each contact.

StandardSetController objects can be used  to create list controllers similar to, or as extensions of, the pre-built Visualforce list controllers provided by Salesforce.
There are two ways to instantiate a StandardSetController either in list of sObjects or from query locator.

  • From a list of sObjects:

ApexPages.StandardSetContoller standardController = new ApexPages.StandardSetController(accountList);

  • From a query locator:

Use of JavaScript in VF-pages

The existing java script functionality such as java script libraries can be accessed in Visualforce. The java script can be placed in a static resource and invoked from there.

The functions of javascript file can be used under <script> tag.

e.g. <apex:includeScript value=”{!$Resource.SamplejavascriptFile}”/>


This was brief overview on Visualforce and how it can be used to add a custom page to your awesome cloud salesforce app. Please feel free to get back to us if you have any query on this tutorial or any of our previous tutorials.

Tutorial Index

  1. Introduction to Cloud Computing ( and
  2. Overview of Database Concepts (
  3. Introduction to
  4. Building Salesforce Custom App and Objects
  5. Object Relationships and Formula Field in Salesforce
  6. Salesforce Security Model and Overview
  7. Automation in Salesforce
  8. Approval Process in Salesforce
  9. Introduction to SOQL and SOSL
  10. Introduction to Apex
  11. Salesforce Data Management
  12. Visualforce MVC Architecture on Cloud
  13. Salesforce Reports and Dashboards
  14. Building a Visualforce (Custom) Page for the Salesforce App
  15. Salesforce Sandbox and Overview of capabilities
  16. Learning Apex and Deployment Tools



One Comment
  1. Vincy
    August 27, 2019 | Reply

Add a Comment

Your email address will not be published. Required fields are marked *