How to Create Visualforce Page in Salesforce

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 use to develop user interface page according to the client requirement. It runs on salesforce.com platform. We can create visual force page using standard controller or controller or extension. Before creating visual force page check that you have permission for visual force or not. Enable development mode to enable developer console

Navigation to the Visualforce page

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

Read: How to Get Certified as a Salesforce Professional and Verify the Certification

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>();

if(!lstAccounts.isEmpty()){

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

for(Account acc : lstAccounts){

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

}

}

}

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:selectoptions>

</apex:selectList>

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

</apex:pageblockSection>



<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="{!con.phone}"/>

</apex:pageblockTable>

</apex:pageblockSection>

</apex:pageblock>

</apex:form>

</apex:page>

Save and Click on preview 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">

{!acct.name}

</apex:dataList>

</apex:pageBlockSection>

<apex:panelGrid columns="2">

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

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

</apex:panelGrid>

</apex:form>

</apex:pageBlock>

</apex:page>