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

Renuka

6 years ago

Visualforce is nothing but one of the framework of Force.com 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 Force.com platform. To make animation or rich user interface, visualforce can integrate with any standard web technology like JavaScript.

Difference between Standard Controller x (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.

AÂ 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.

AÂ 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.

public class demoControllerExtension
{
	private final Account user_acc;
	public demoControllerExtension(ApexPages.StandardController stdController)
	{
		this.user_acc = (Account)stdController.getRecord();
	}
	public String sayHello()
	{
		Return âHelloâ + user_acc + â(â + user_acc + â)â;
	}
}

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

xapex: pageStandardController = âAccountâ extension = âdemoControllerExtensionâx
xapex:formx
xapex:inputField value = â{!account.name}â/x xp/x
xapex:commandButton value = âSaveâ action = {!Save}â/x
x/apex:formx
x/apex:pagex

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 xapex:inputFieldx is used. The standard account save method is referenced using Â xapex:commandButtonx.

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:

public class opportunityList {

	public ApexPages.StandardSetController sectionDemo {

	get { 
		if(sectionDemo ==  null)   {
			sectionDemo = newApexPages.StandardSetController(Database.getQueryLocator ( [SELECTName, CloseDate FROM Opportunity]));	
		}
		return setCon;
	}
	set;
}

	public ListxOpportunityxgetSomeOpportunities( ){
		return(ListxOpportunityx)setCon.getRecords( );
	}

}

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

xapex: page controller = ââx

xapex:pageBlockx

xapex:pageBlockTable value=â{!opportunities}â var= âmyObjâx

xapex: column value = â{!myObj.Name}â/x

xapex: column value = â{!myObj.CloseDate}â/x

x/apex:pageBlockTablex

x/apex:pageBlockx

x/apex:pagex

Create a button in visual force

xapex:page id=âmypageâ controller=âonLaodControllerâx

xapex:formx

xapex:actionFunction action="{!redirect}" name="OpenPage"reRender="pb,theIframe"x

xapex:param assignTo="{!Page}" value="" name="param1"/x

x/apex:actionFunctionx

xapex:pageBlock id="pb"x

xapex:pageBlockButtonsx

xapex:commandButton value="Google" onclick="OpenPage('google'); return false;"/x

x/apex:pageBlockButtonsx

xapex:iframe id="theIframe" src="{!OpenPageURL}"scrolling="true"/x

x/apex:pageBlockx

x/apex:formx

x/apex:pagex

public class OnLoadController {

	public String Page {get; set;}

	public String OpenPageURL {get; set;}

	public void OnLoadController() {
          Page = '' ;
		  OpenPageURL = '' ;
	}
	public PageReference redirect() {
		if(Page == 'google') {
			OpenPageURL = 'xa target="_blank"  href="http://www.google.co.in/'"rel="nofollow"xhttp://www.google.co.in/'x/ax ;
		}
	return null;
}

Display data in Table format, enabling pagination

xapex:pageBlockTablexÂ orÂ xapex:dataTablex,Â 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Â xapex:pageBlockTablexÂ component to list the contacts associated with an account:

apex:pageÂ standardController="Account"x

xapex:pageBlockÂ title="Hello {!$User.FirstName}!"x

Wel-Come to view {!account.name} account.

x/apex:pageBlockx

xapex:pageBlockÂ title="Contacts"x

xapex:pageBlockTableÂ value="{!account.Contacts}"Â var="contact"x

xapex:columnÂ value="{!contact.Name}"/x

xapex:columnÂ value="{!contact.MailingCity}"/x

xapex:columnÂ value="{!contact.Phone}"/x

x/apex:pageBlockTablex

x/apex:pageBlockx

x/apex:pagex

Two required attributes,Â value andÂ var are xapex:pageBlockTablexÂ ,

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Â xapex:pageBlockTablexÂ 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:

ListxAccountx accountList = [SELECT Name FROM Account LIMIT 30];

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

From a query locator:

ApexPages.StandardSetContoller standardController = 
new ApexPages.StandardSetController(Database.getQueryLocator(
[SELECT Name FROM Account])
)

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 xscriptx tag.

e.g. xapex:includeScriptÂ value=x{!$Resource.SamplejavascriptFile}x/x

Summary

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.