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

Renuka December 8, 2017 Salesforce 1 Comment

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 & (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 + ‘)’;
	}
}

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:

<apex: pageStandardController = “Account” extension = “demoControllerExtension”>
<apex:form>
<apex:inputField value = “{!account.name}”/> <p/>
<apex:commandButton value = “Save” action = {!Save}”/>
</apex:form>
</apex:page>

<apex: pageStandardController = “Account” extension = “demoControllerExtension”>

<apex:form>

<apex:inputField value = “{!account.name}”/> <p/>

<apex:commandButton value = “Save” action = {!Save}”/>

</apex:form>

</apex: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:

public class opportunityList {

	public ApexPages.StandardSetController sectionDemo {

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

	public List<Opportunity>getSomeOpportunities( ){
		return(List<Opportunity>)setCon.getRecords( );
	}

}

public class opportunityList {

public ApexPages.StandardSetController sectionDemo {

get {

if(sectionDemo == null) {

sectionDemo = newApexPages.StandardSetController(Database.getQueryLocator ( [SELECTName, CloseDate FROM Opportunity]));

}

return setCon;

}

set;

}

public List<Opportunity>getSomeOpportunities( ){

return(List<Opportunity>)setCon.getRecords( );

}

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

<apex: page controller = “”>

<apex:pageBlock>

<apex:pageBlockTable value=”{!opportunities}” var= “myObj”>

<apex: column value = “{!myObj.Name}”/>

<apex: column value = “{!myObj.CloseDate}”/>

</apex:pageBlockTable>

</apex:pageBlock>

</apex:page>

<apex: page controller = “”>

<apex:pageBlock>

<apex:pageBlockTable value=”{!opportunities}” var= “myObj”>

<apex: column value = “{!myObj.Name}”/>

<apex: column value = “{!myObj.CloseDate}”/>

</apex:pageBlockTable>

</apex:pageBlock>

</apex:page>

Create a button in visual force

<apex:page id=”mypage” controller=”onLaodController”>

<apex:form>

<apex:actionFunction action="{!redirect}" name="OpenPage"reRender="pb,theIframe">

<apex:param assignTo="{!Page}" value="" name="param1"/>

</apex:actionFunction>

<apex:pageBlock id="pb">

<apex:pageBlockButtons>

<apex:commandButton value="Google" onclick="OpenPage('google'); return false;"/>

</apex:pageBlockButtons>

<apex:iframe id="theIframe" src="{!OpenPageURL}"scrolling="true"/>

</apex:pageBlock>

</apex:form>

</apex:page>

<apex:page id=”mypage” controller=”onLaodController”>

<apex:form>

<apex:actionFunction action="{!redirect}" name="OpenPage"reRender="pb,theIframe">

<apex:param assignTo="{!Page}" value="" name="param1"/>

</apex:actionFunction>

<apex:pageBlock id="pb">

<apex:pageBlockButtons>

<apex:commandButton value="Google" onclick="OpenPage('google'); return false;"/>

</apex:pageBlockButtons>

<apex:iframe id="theIframe" src="{!OpenPageURL}"scrolling="true"/>

</apex:pageBlock>

</apex:form>

</apex:page>

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 = '<a target="_blank"  href="http://www.google.co.in/'"rel="nofollow">http://www.google.co.in/'</a> ;
		}
	return null;
}

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 = '<a target="_blank" href="http://www.google.co.in/'"rel="nofollow">http://www.google.co.in/'</a> ;

}

return null;

}

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:

apex:page standardController="Account">

<apex:pageBlock title="Hello {!$User.FirstName}!">

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

</apex:pageBlock>

<apex:pageBlock title="Contacts">

<apex:pageBlockTable value="{!account.Contacts}" var="contact">

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

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

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

</apex:pageBlockTable>

</apex:pageBlock>

</apex:page>

apex:page standardController="Account">

<apex:pageBlock title="Hello {!$User.FirstName}!">

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

</apex:pageBlock>

<apex:pageBlock title="Contacts">

<apex:pageBlockTable value="{!account.Contacts}" var="contact">

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

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

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

</apex:pageBlockTable>

</apex:pageBlock>

</apex:page>

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:

List<Account> accountList = [SELECT Name FROM Account LIMIT 30];

1	List<Account> 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])
)

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

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

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.

Tutorial Index

One Comment

Vincy
August 27, 2019 | Reply

Pls upload display 10 accounts using extensions write pageblocktable.?

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

Visualforce in Action

Difference between Standard Controller & (Custom) Controller

Building a Controller Extension

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

Building a Custom List Controller

Create a button in visual force

Display data in Table format, enabling pagination

Use of JavaScript in VF-pages

Summary

Tutorial Index

Add a Comment

Openstrap 2.0.3

Aadya 2.0.3

Awakening 2.0.3

Visualforce in Action

Difference between Standard Controller & (Custom) Controller

Building a Controller Extension

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

Building a Custom List Controller

Create a button in visual force

Display data in Table format, enabling pagination

Use of JavaScript in VF-pages

Summary

Tutorial Index

Related Posts

Add a Comment

Openstrap 2.0.3

Aadya 2.0.3

Awakening 2.0.3