How to Create Visualforce Page in Salesforce

Extension controllers:

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

Where Can Visualforce Pages Be Used?

• 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 salesforce.com 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 Detailed Guide on Salesforce Business Analyst Roles & Responsibilities in 2024

Navigation to the Visualforce page

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

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

</apex:panelGrid>

</apex:pageBlock>

<apex:pageBlockButtons >

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

</apex:pageBlockButtons>

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

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

<apex:column headerValue="Stage">

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

</apex:column>

<apex:column headerValue="Close Date">

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

</apex:column>

</apex:pageBlockTable>

</apex:pageBlock>

</apex:form>

</apex:page>

Learn Salesforce in the Easiest Way

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

Buy Self-learning at Discounted Price

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>

Visualforce Page using  Extension controller