Visualforce Part 1
Visualforce Part 1
com)
1. What is VF?
It is a native language of Salesforce.
It is used to create custom user interface in Salesforce Lightning platform.
It is referred as VF page or page in short.
2. Visualforce markup
a. It is a tag based elements like html and xml.
b. It consists of
i. Visualforce Tags
These tags are provided by salesforce to build user interface. These tags are referred as
standard components or elements.
<apex:page>
<apex:pageBlock>
<apex:pageBlockSection>
3. Visualforce Controller
The VF page could refer an action module through which the defined action can be performed on the server side
when user interacts with visualforce page elements. They are classified into below types
SNo Visualforce Controllers Purpose
1 StandardController Using this controller, a VF page would perform functionalities of
standard page of any of the salesforce object that is referring to.
2 StandardList Controller If we want to display the list of records similar to list view under
object tab, then we use standardList controller.
3 Controller When we want to write the custom logic using apex then we
create apex classes. The apex classes are called controllers in
the VF Page.
4 Extensions If you want to use standard properties as well as custom logics
in a VF page, then we define extensions.
HTML example:
<html>
<body>
<h1>My First Heading</h1>
</body>
</html>
Visualforce Example
<apex:page>
<apex:pageBlock>
This is my VF page
</apex:pageBlock>
</apex:apex>
Every visualforce page must be written inside two main tags such as <apex:page> and
</apex:page>
b. Inner elements should be closed before the outer elements are closed.
(div is closed before the apex: page is closed)
<apex:page>
<div> Capital Info Training</div>
</apex:page>
c. if the element does not have the body, then the element can be closed by including forward slash at the end
of the same element.
<apex:inputText />
<apex:outputText />
d. Properties: Properties of the elements are called as attributes. This help to add properties to elements in the
form of name=value format. Here, the title is an attribute for the element apex:pageBlock. Every element
has its own attributes.
<apex:page>
<apex:pageBlock title=”My Title”>
<div> Capital Info Training</div>
</apex:pageBlock>
</apex:page>
a. STANDARD NAVIGATION
Setup
|-- Build
|-- Develop
|-- Lightning Components
| - Visualforce Pages
Click New
Step 1: Enter PageName
Step 2: Enter Body of the Page
Step 3: Save
Step 4: Preview
b. USING URL
If you want to create a VF page using URL we need to enable development mode for the user.
Navigation:
Setup
|-- Administer
|-- Manage Users
|-- Users
Step 1: Choose the user
Step 2: Click one Edit Button on the selected user
Step 3: Enable Development Mode checkbox
Step 4: Save the user.
i. URL to open an existing page. If page name is firstPage, then URL would be as follows
https://c.ap8.visual.force.com/apex/firstPage
c. DEVELOPER CONSOLE
This is an IDE (Integrated Development Environment) of Salesforce. To open this tool, use any of the below
navigation.
Salesforce Classic: From the drop down of your name at the top, select option 'Developer Console'.
Saleforce Lightning: Click on the gear symbol at the lightning interface, select the option 'Developer Console'.
This will show a pop up. Now choose the "Pages" under entity type. This will show the list of existing page at the
right side. Select the required page here by double click to open in developer console.
d. ECLIPSE
There are some more IDE available to create VF pages in salesforce.
e. Salesforce dx ( sfdx)
This is a type of command-line interface (CLI) used to create all types of application in salesforce including
visualforce.
Example: - When a custom object is created in Salesforce and a visualforce page is created to display the details of
the record of the custom object using controller. In this Scenario, we observe three parts as below
In MVC pattern, the designers and developers can work on Visualforce pages independently while developers work
on writing business logic.
For example, if you want to create a page called “HelloWorld” and your Salesforce organization uses
na3.salesforce.com as server domain, then simply enter the url below
a. What happens in background when user creates the new VF page in salesforce?
i. When a developer finishes writing a Visualforce page and saves it to the platform.
ii. It means the platform application server attempts to compile the markup into an abstract
set of instructions that can be understood by the Visualforce renderer.
iii. If compilation generates errors, the save is aborted and the errors are returned to the
developer. Otherwise, the instructions are saved to the metadata repository and sent to the
Visualforce renderer.
iv. The renderer turns the instructions into HTML and then refreshes the developer's view,
thereby providing instantaneous feedback to the developer for whatever changes were made
in the markup.
b. What happens in background when user load the url for existing VF page in salesforce?
When user requests a Visualforce page, the application server simply retrieves the page
from the metadata repository and sends it to the Visualforce renderer for conversion into HTML.
2. standardController -> inbuilt controller existing for every standard and custom object
eg.,
<apex:page standardController="Account">
<apex:page standardController="Training__c" >
3. Extensions -> custom controller (apex class) used to add additional functionality or override existing
functionality of standard or custom controller.
7. STANDARD VF COMPONENTS
apex:page:
1. Page is a pre-defined component.
2. Apex is a namespace.
3. Every VF page will start and end with apex:page
4. Attributes:
SNo Name Type Description
1 id String 1. This is a unique string assigned to component
2. Using this id we can refer to this component/element in the page.
2 showHeade Boolean 1. When set as true ,Salesforce standard header and sidebar will be
r displayed
2. When set as false, Standard Header and sidebar will be hidden; 3.
Default: true
3 sidebar Boolean 1. When set as true, Salesforce standard sidebar will be displayed
2. When set as false, Salesforce standard sidebar will be hidden; 3. Default
: true
4 setup Boolean 1. When set as true, Salesforce force.com setup will be displayed
2. When set as false, Salesforce sidebar components will be displayed
3. Default value is false.
5 rendered Boolean 1. When set as true, content of apex page will be displayed.
2. When set as false, content will be hidden; 3. Default value is true
6 action ApexPages 1. This will be invoked when we load/call the page
.Action 2. This can be a url of page or method from apex class.
7 apiVersion Number 1. This will specify version of the api we are using
2. By Default latest version will be applied
3. Current version is 45.0
8 renderAs PDF 1. This will render the content of the page in the form PDF
9 contentTyp MIMETYPE 1. This will specify in which form body of the page should be loaded
e 2. Example :msword#example.doc
:ms-excel#example.xls
:text/html
:text/csv
10 standardCo String(sobj This will specify name of the sobject(table) which we want to use in the
ntroller ectName) page
11 controller String(Ape This will specify name of the apex class which we want to use in the VF
x class page
Name)
12 readOnly Boolean Content of the page will be in the readable format.
Example:
<apex:page >
<!-- Begin Default Content REMOVE THIS -->
<h1>Congratulations</h1>
This is your new Page: TestPage
<!-- End Default Content REMOVE THIS -->
</apex:page>
Example:
<apex:page id="pg" sidebar="false">
<h1>This is demo Page</h1>
</apex:page>
Example:
<apex:page rendered="false">
<h1>
Page Demo Component
</h1>
</apex:page>
Example:
<apex:page sidebar="false" contentType="application/nds/ms-excel#example.xls">
This is my showheader demo
</apex:page>
Example:
<apex:page renderAs="PDF">
<h1>
Developer Session
</h1>
<div>
<h1>
Capital Info
</h1>
Ameerpet
</div>
</apex:page>
apex:sectionHeader:
1. This will create header for the page.
2. This will be the first element in the page.
3. Attributes:
Sno Name Type Description
1 title String This will be displayed as title for the header after the image
2 subtitle String This will be displayed as subtitle for the header after the image
3 Description String This will displayed below the image of the header as description
for the page
4 help url This will specify absolute /relative path of the page which should
be opened when use clicks on help for this page.
5 rendered Boolean 1. When set as true, content of the header will be displayed
2. When set as false, content of the header will be hidden
3. Default value is true
<apex:page tabStyle="account">
<apex:sectionHeader title="Student"/>
title -> to add title for the page
</apex:page>
apex:pageBlock
1. This will include a section similar to the appearance of a standard page.
2. It can exists without any content also.
3. Using attributes of this component, the title, helpURL, tabstyles can be included.
4. Attributes:
SNo Name Type Description
6 Onclic String The JavaScript invoked if the onclick event occurs--that is, if the user clicks the
k page block. Like this we have ondblclick, onkeydown, onkeypress etc.,
7 Rende Boolea A Boolean value that specifies whether the component is rendered on the page.
red n If not specified, this value defaults to true.
8 tabStyl String Refer the name of the standard object or api name of custom object to inherit
e the color of the relevant object to this block.
Eg., tabStyle="MyCustomObject__c".
Example 1:
<apex:page >
<apex:pageblock title="My Block 1" >
<!-- Title - used to add title for the block -->
<h1>This is my block 1 content</h1>
</apex:pageblock>
</apex:page>
Example 2:
<apex:page >
<apex:pageblock title="helpURL Demo" helpUrl="https://help.salesforce.com" helpTitle="Knowledge Base">
<h1>
This is my block for HELP URL
</h1>
</apex:pageblock>
</apex:page>
Example 3:
<apex:page >
<apex:pageblock tabStyle="Training__C" title="Block with help for another VF" helpURL="/apex/SamplePage"
helpTitle="SamplePage">
<h1>
This is a block referring Traning Object Tab Style
</h1>
</apex:pageblock>
</apex:page>
Example 4:
<apex:page >
<apex:pageblock tabStyle="Account" title="Block with help for another VF" helpURL="/apex/SamplePage"
helpTitle="SamplePage">
<h1>
This is a block referring Account Object Tab Style
</h1>
</apex:pageblock>
</apex:page>
Example 5:
<apex:page >
<apex:pageblock title="Block 1 - Rendered is true by default" >
Rendered is true by default
</apex:pageblock>
</apex:pageblock>
apex:commandButton
This will add a button in VF page.
This element must be included inside the apex:form element.
Using attribute action, the apex method or link can be invoked.
If no action is referred, the page will be refreshed by default on click of this button.
5. Attributes:
SNo Name Type Description
1 Id String An identifier that allows the commandButton component to be referenced by
other components in the page.
2 Value String To give label for this button.
3 Action ApexP 1. To refer the apex method or link.
2. If an action isn't specified, the page simply refreshed
ages.A
3. Use merge-field syntax to reference the method. For example,
ction action="{!save}" references the save method in the controller
4 Disabled Boolea 1. A Boolean value that specifies whether this button should be displayed in
n a disabled state.
2. If set to true, the button appears disabled. If not specified, this value
defaults to false.
5 Immediat Boolea To display label for the helpURL. If specified, you must also provide a value for
e n helpURL.
6 rendered Rende Boolean value specifies whether the button is rendered on the page. By
red default it is true.
7 reRender Object Used to refer another component at the end of AJAX event. Helps to refresh
the part of the page.
8 tabIndex String 1. To number the commandbutton component in sequence so that when
user hit tab key repeatedly, the button will be selected in the order of
tabindex.
2. This value must be a number between 0 and 32767.
9 Title String T he text to display as a tooltip when the user's mouse pointer hovers over
this component.
10 Style String used to add CSS stylings. This is referred as inline CSS Styles.
11 styleClass String The style class used to display the commandButton component according to
CSS from external resource or within page through CSS Class.
Example 1:
<apex:page >
<apex:form >
<apex:pageblock title="without label">
<apex:commandButton />
</apex:pageblock>
<apex:form >
</apex:page>
Example 2:
<apex:page >
<apex:form >
<apex:pageblock title="with label">
<apex:commandButton value="Click Here"/>
</apex:pageblock>
<apex:form >
</apex:page>
Example 3:
<apex:page >
<apex:form >
<apex:pageblock title="call method or link">
<apex:commandButton value="Call" action="/apex/SamplePage"/>
</apex:pageblock>
<apex:form >
</apex:page>
Example 4:
<apex:page >
<apex:form >
<apex:pageblock title="call method or link">
<apex:commandButton value="Call" action="/apex/SamplePage"/>
</apex:pageblock>
<apex:form >
</apex:page>
Example 5:
<apex:page >
<apex:form >
<apex:pageBlock title="Command Button Demo!">
<apex:commandButton value="Button 1" tabIndex="3"/>
<apex:commandButton value="Button 2" tabIndex="1"/>
<apex:commandButton value="Button 3" tabIndex="2"/>
</apex:pageBlock>
<apex:form >
</apex:page>
apex:pageBlockButton
6. This will place the buttons in the header and footer similar to the appearance of standard salesforce buttons.
7. This element must be child to pageBlock element.
8. Attributes:
SNo Name Type Description
4 Disabled Boolean
A Boolean value that specifies whether this button should be displayed in a
disabled state. If set to true, the button appears disabled. If not specified, this
value defaults to false.
5 Immediate Boolean To display label for the helpURL. If specified, you must also provide a value for
helpURL.
6 rendered Rendered Boolean value specifies whether the pageBlockButton component is rendered
on the page. By default it is true.
7 Style String used to add CSS stylings. This is referred as inline CSS Styles.
8 styleClass String The style class used to display the pageBlockButton component according to
CSS styling from external resource or within page through CSS Class.
Example 1:
<apex:page >
<apex:form >
<apex:pageblock title="Location both by default">
<apex:pageBlockButtons >
<apex:commandButton value="with PBB"/>
</apex:pageBlockButtons>
</apex:pageblock>
<apex:form >
</apex:page>
Example 2:
<apex:page >
<apex:form >
<apex:pageblock title="Location: Bottom">
<apex:pageBlockButtons location="bottom">
<apex:commandButton value="with PBB"/>
</apex:pageBlockButtons>
</apex:pageblock>
<apex:form >
</apex:page>
Example 3:
<apex:page >
<apex:form >
<apex:pageblock title="Location: Top">
<apex:pageBlockButtons location="Top">
<apex:commandButton value="with PBB"/>
</apex:pageBlockButtons>
</apex:pageblock>
<apex:form >
</apex:page>
apex:inputText
9. This will include a text box in the page
10. This must be wrapped inside the apex:form element
11. Attributes:
SNo Name Type Description
Example 3: size attributes. This determines the width of the text box to be displayed.
<apex:page >
<apex:form >
<apex:pageblock title="InputText Demo">
Example 4: list - A list of auto-complete values to be displayed. it is part of HTML-5.0 and hence the page must be
save with attribute docType="HTML-5.0"
<apex:page docType="HTML-5.0">
<apex:form >
<apex:pageblock title="InputText Demo">
List: <apex:inputText list="value1, value2, value3"></apex:inputText>
</apex:pageblock>
</apex:form>
</apex:page>
apex:inputTextArea
12. This will include a text box to accept more than 1 line as input.
13. This must be wrapped inside the apex:form element
14. Attributes:
SNo Name Type Description
1 Id String An identifier that allows the inputText component to be referenced
by other components in the page.
2 Cols Object To set the width of the text box .
rows Integer The height of the text area, as expressed by the number of rows
that can display at a time.
3 disabled String A Boolean value that specifies whether this text area should be
displayed in a disabled state.
By default it is false means user can enter the text.
4. Rendered Boolean A Boolean value that specifies whether the inputTextArea
component is rendered on the page. If not specified, this value
defaults to true.
5. Required Boolean A Boolean value that specifies whether this field is a required field.
If set to true, the user must specify a value for this field. If not
selected, this value defaults to false.
6. Style String The style used to display the inputText component. We can refer
CSS stylings code directly here.
7. styleClass String Used to refer the CSS from external source
8. Tabindex String The order in which this field is selected compared to other page
components when a user presses the Tab key repeatedly.
9. Title String The text to display as a tooltip when the user's mouse pointer
hovers over this component.
10. Value Object Refers to apex class variable using merge syntax. Example:
{!apexVariable}
11. readOnly Boolean A Boolean value that specifies whether this text area should be
rendered as read-only. If set to true, the text area value cannot be
changed. If not selected, this value defaults to false.
12. Onblur String The JavaScript invoked if the onblur event occurs--that is, if the
focus moves off of the field
13. Onchange String The JavaScript invoked if the onchange event occurs--that is, if the
user changes the content of the field. Similar to this, there are
many events such as onclick, onmouseover, keypress etc.,
Example 1:
<apex:page >
<apex:form >
<apex:pageblock>
Name: <apex:inputText/> <br/>
About Me: <apex:inputTextarea /> <br/>
</apex:pageblock>
</apex:form>
</apex:page>
Example 3: readOnly
<apex:page >
<apex:form >
<apex:pageblock>
Name: <apex:inputText/> <br/>
About Me: <apex:inputTextarea /> <br/>
Address: <apex:inputTextarea cols="10"/> <br/>
ReadOnly: <apex:inputTextarea readOnly="true"/> <br/><br/>
Rows: <apex:inputTextarea rows="8"/><br/><br/><br/>
</apex:pageblock>
</apex:form>
</apex:page>
Example 4: rows
<apex:page >
<apex:form >
<apex:pageblock>
Name: <apex:inputText/> <br/>
About Me: <apex:inputTextarea /> <br/>
Address: <apex:inputTextarea cols="10"/> <br/>
ReadOnly: <apex:inputTextarea readOnly="true"/> <br/><br/>
Rows: <apex:inputTextarea rows="8"/><br/><br/><br/>
</apex:pageblock>
</apex:form>
</apex:page>
apex:inputFile
This will include an input button to upload to a file from your local drive.
This must be wrapped inside the apex:form element
Attributes:
SNo Name Type Description
1 Id String An identifier that allows the inputFile component to be referenced by
other components in the page.
2 accessKey String The keyboard access key that puts the component in focus.
Example: If accessKey = any alphabet then by pressing ATL + that
alphabet, the cursor would be focused to this component.
3 contentType String String property that stores the uploaded file's content type.
4. Disabled Boolean A Boolean value that specifies whether this component should be
displayed in a disabled state. If set to true, the component appears
disabled. If not specified, this value defaults to false
5. filename String String property that stores the uploaded file's name.
This will be stored in a apex variable. Example:
filename=”{!apexVariable}”
6. fileSize Integer Integer property that stores the uploaded file's size.
7. Style String The style used to display the inputText component. We can refer CSS
stylings code directly here.
8. styleClass String Used to refer the CSS from external source
9. Tabindex String The order in which this field is selected compared to other page
components when a user presses the Tab key repeatedly.
10. Title String The text to display as a tooltip when the user's mouse pointer hovers
over this component.
11. rendered Rendered Boolean value specifies whether the inputFile component is rendered
on the page. By default it is true.
12. Onblur String The JavaScript invoked if the onblur event occurs--that is, if the focus
moves off of the field
13. Onchange String The JavaScript invoked if the onchange event occurs--that is, if the user
changes the content of the field. Similar to this, there are many events
such as onclick, onmouseover, keypress etc.,
Example 1:
<apex:page >
<apex:form >
<apex:inputFile value="" title="upload your file here!"></apex:inputFile>
</apex:form>
</apex:page>
apex: pageBlockSection
1. This is an area inside the pageblock which will appear similar to a section in a standard Salesforce page layout
definition.
2. This will divide a row into 2 columns by default. Each component found in the body of an <
apex:pageBlockSection > is placed into one column.
3. Each column consists of two cells (cell1 and cell2). The cell1 is for label and cell2 is for the value.
4. To add a field from a Salesforce object to an < apex:pageBlockSection >, use an < apex:inputField > or <
apex:outputField > component. Each of these components automatically displays with the field's associated
label.
5. To add field not related to salesforce object to an < apex:pageBlockSection >, use an <apex:outputLabel/> for
label and <apex:inputText/> for value.
6. Attributes:
SNo Name Type Description
1 Id String An identifier that allows the inputFile component to be referenced by other components
in the page.
2 Collapsi String A Boolean value that specifies whether the page block section can be expanded and
ble collapsed by a user. If true, a user can expand and collapse the section. If not specified,
this value defaults to true.
This will appear when the title for the pageblockSection is added.
3 Title String The text displayed as the title of the page block section.
4. Column Integer The number of columns that can be included in a single row of the page block section.
s Note that a single column spans two cells - one for a field's label, and one for its value.
5. showHe Boolea A Boolean value that specifies whether the page block section title is displayed. If set to
ader n true, the header is displayed. If not specified, this value defaults to true.
6. rendere Render Boolean value specifies whether this component is rendered on the page. By default it is
d ed true.
7. Onblur String The JavaScript invoked if the onblur event occurs--that is, if the focus moves off of the
field
8. Onchan String The JavaScript invoked if the onchange event occurs--that is, if the user changes the
ge content of the field. Similar to this, there are many events such as onclick, onmouseover,
onkeypress etc.,
Example 1:
<apex:page >
<apex:form >
<apex:pageblock title="PageBlock Section Demo" >
<apex:pageBlockSection title="by Default - 2 columns" showHeader="true">
<apex:outputLabel value="Name :"/>
<apex:inputText />
<apex:outputLabel value="City :"/>
<apex:inputText />
<apex:outputLabel value="Age: "/>
<apex:inputText />
</apex:pageBlockSection>
</apex:pageblock>
Result
apex: pageBlockSectionItem
15. This is a child to apex:pageBlockSection where two components inside this can be placed in one column of the
row.
16. If you include an < apex:outputField > or an < apex:inputField > component in an < apex:pageBlockSectionItem >,
these components do not display with their label or custom help text as they do when they are children of an <
apex:pageBlockSection >.
17. Attributes:
SNo Name Type Description
1 Id String An identifier that allows the inputFile component to be referenced by other
components in the page.
2 dataStyle String The CSS style used to display the content of the right, "data" cell of the
pageBlockSection column.
Example: The background color for the inputText will be displayed in blue.
<apex:pageBlockSectionItem dataStyle="background-color:blue" >
<apex:outputLabel value="Name :"/>
<apex:inputText />
</apex:pageBlockSectionItem>
3 dataTitle String The text displayed when you hover over the right, "data" cell of the
pageBlockSection column.
4. helpText String The help text that is displayed next to this field as a hover-based tooltip,
similar to the text that is displayed next to standard Salesforce fields if
custom help is defined for the field in Setup.
Example:
<apex:pageBlockSectionItem dataStyle="background-color:blue"
helpText="enter name!">
<apex:outputLabel value="Name :"/>
<apex:inputText />
</apex:pageBlockSectionItem>
5. labelStyle String The CSS style used to display the content of the left, "label" cell of the
pageBlockSection column
6. labelStyleClass String The CSS style class used to display the content of the left, "label" cell of the
pageBlockSection column.
7. labelTitle String The text displayed when you hover over the left, "label" cell of the
pageBlockSection column.
8. onDataclick String The JavaScript invoked if the onDataclick event occurs--that is, if the user
clicks the right, "data" cell of the pageBlockSection column. Like this, there
are many events available such as onLabelclick, onLabeldblclick,
onLabelmouseup ec.,
9. rendered Rendered Boolean value specifies whether this component is rendered on the page.
By default it is true.
Example 1:
<apex:page >
<apex:form >
<apex:pageblock title="without PageBlockSection Item" tabStyle="Contact">
<apex:pageBlockSection title="PageBlockSection Item" columns="1">
<apex:outputLabel value="Name :"/>
<apex:inputText />
</apex:pageBlockSection>
</apex:pageblock>
<apex:pageblock title="with PageBlockSection Item" tabStyle="Contact">
<apex:pageBlockSection title="PageBlockSection Item" columns="1">
<apex:pageBlockSectionItem >
<apex:outputLabel value="Name :"/>
<apex:inputText />
</apex:pageBlockSectionItem>
</apex:pageBlockSection>
</apex:pageblock>
</apex:form>
</apex:page>
Result:
Result:
8. WHAT IS CONTROLLER?
This is a business layer of MVC architecture.
What needs to be performed when user invokes an event in VF page?
Example:
Account
Contact
Department__c
Employee__c
Example:
To associate a VF page with standard controller belongs to Account Object.
<apex:page StandardController="Account">
This page can refer one or list of records of the object specified.
A Visualforce controller is a set of instructions that specify what happens when a user interacts with the components
specified in associated Visualforce markup, such as when a user clicks a button or link.
The Lightning platform provides a number of standard controllers that contain the same functionality and logic that
are used for standard Salesforce pages.
clicking a Save button in a Visualforce page results in the same behavior as clicking Save on a standard Account edit
page.
<apex:page standardController="Account">
Name : {!Account.Name} <br/>
Industry : {!Account.Industry} <br/>
Rating : {!Account.Rating}/>
</apex:page>
The standard Controller has inbuilt getter method to get ID from the query string (?FieldName=) and hence display
the values of the record id under context.
In real-time, the standard controller page is used to override the standard functionality such as View, Edit, Delete
etc., where the id of the corresponding record will be passed to the url automatically.
It has inbuilt action methods such as save, delete, cancel, edit, quickSave which can be referred in VF page of
standardcontroller in the same name.
Example:
save => This will insert and update the data and redirected to detail page similar to the behaviour of save method in
standard page.
edit => this will redirect to edit page of standard page and once updated, the control will redirect to the existing VF
page.
QuickSave => it commits the data into object under context and stay in the same page.
All the user permissions will be enforced in the standard controller page. User can not insert data if the user profile
does not have create permission for the object.
apex:inputField -> component to refer the object field. When it is direct child to the pageBlockSection component,
then the label of the object will be displayed in the page.
apex:form -> the input components such as inputField, inputText, commandButton etc., must be included inside the
apex:form component.
Example:
<apex:page standardController="Account">
<apex:form >
<apex:pageBlock >
<apex:pageBlockButtons >
<apex:commandButton value="save" action="{!save}"/>
</apex:pageBlockButtons>
<apex:pageBlockSection >
<apex:inputText value="{!Account.name}"/>
</apex:pageBlockSection>
<apex:pageBlockSection >
<apex:inputField value="{!Account.name}"/>
</apex:pageBlockSection>
<apex:pageBlockSection >
<apex:inputText value="{!Account.Industry}"/>
</apex:pageBlockSection>
<apex:pageBlockSection >
<apex:inputField value="{!Account.Industry}"/>
</apex:pageBlockSection>
<apex:pageBlockSection >
<apex:inputText value="{!Account.SLAExpirationDate__c}"/>
</apex:pageBlockSection>
<apex:pageBlockSection >
<apex:inputField value="{!Account.SLAExpirationDate__c}"/>
</apex:pageBlockSection>
</apex:pageBlock>
</apex:form>
</apex:page>
Example
<apex:page standardController="Account">
<apex:form >
<apex:sectionHeader title="Account" subTitle="Account Edit Page" help="/apex/CustomLabelDemo"/>
<apex:pageblock >
<apex:pageBlockSection columns="3">
<apex:inputField value="{!Account.Name}"/>
<apex:inputField value="{!Account.Industry}"/>
<apex:inputField value="{!Account.AnnualRevenue}"/>
<apex:inputField value="{!Account.Rating}"/>
<apex:inputField value="{!Account.Active__c}"/>
</apex:pageBlockSection>
<apex:pageBlockButtons location="top">
<apex:commandButton value="save" action="{!save}"/>
</apex:pageBlockButtons>
</apex:pageblock>
</apex:form>
</apex:page>
<apex:page StandardController="Account">
{!Account.Name}
{!Account.customFieldName__c}
</apex:page>
<apex:page StandardController="CustomObjectName__c">
{!CustomObjectName__c.Name}
{!CustomObjectName__c.customFieldName__c}
</apex:page>
eg., {!ChildObjectName.CustomRelationshipFieldName__r.ParentFieldName}
<apex:page StandardController="Contact">
{!Contact.Account.Name} <!-- Account is the relationship field name in contact object -->
</apex:page>
Example:
<apex:page standardController="Employee__c">
EmpName : {!Employee__c.First_Name__c + ' ' + Employee__c.Last_Name__c} <br/><br/>
DOJ : {!Employee__c.Date_of_Join__c} <br/><br/>
Example
<apex:page standardController="Employee__c">
<apex:pageBlock >
<apex:pageBlockSection >
<apex:outputField value="{!Employee__c.Name}"/>
<apex:outputField value="{!Employee__c.Department_Name__r.Department_Grade__c}"/>
<!-- ChildObjectName.RelationshipFieldName__r.ParentFieldName -->
</apex:pageBlockSection>
</apex:pageBlock>
</apex:page>
<apex:pageBlock >
<apex:pageBlockTable value="{!accs}" var="a">
<apex:column value="{!a.Name}" headerValue="Company"/>
<apex:column value="{!a.Name}"/>
</apex:pageBlockTable>
<apex:pageBlockButtons >
<apex:commandButton value="first" action="{!first}"/>
<apex:commandButton value="next" action="{!next}"/>
<apex:commandButton value="previous" action="{!previous}"/>
<apex:commandButton value="last" action="{!last}"/>
</apex:pageBlockButtons>
</apex:pageBlock>
</apex:form>
</apex:page>
Example 2:
<apex:page standardController="Account" recordSetVar="accs">
<apex:pageBlock title="Using pageBlockTable - standard look and feel">
<apex:pageBlockTable value="{!accs}" var="a">
<apex:column headerValue="Company" value="{!a.Name}"/>
<apex:column value="{!a.Industry}"/>
<apex:column value="{!a.Phone}"/>
<apex:column value="{!a.AnnualRevenue}"/>
</apex:pageBlockTable>
</apex:pageBlock>
<apex:pageBlock >
<apex:repeat value="{!accs}" var="a">
{!a.name} <br/>
</apex:repeat>
</apex:pageBlock>
<apex:pageBlock >
<table>
<apex:repeat value="{!accs}" var="a">
<tr>
<td>{!a.Name}</td>
<td>{!a.Industry}</td>
<td>{!a.AnnualRevenue}</td>
</tr>
</apex:repeat>
</table>
</apex:pageBlock>
</apex:page>
Syntax:
{!URLFOR(target, [id], [inputs], [no override])}
Example:
To execute a VF page
VFPageName?id=...
<apex:commandLink action="{!URLFOR($Page.VFPageName, null,[Id=parameter])}"
With URLFOR
URLFOR( $Page.VFPageName,null,[Parameter=value])
Example:
<apex:page standardController="Account">
<!-- Write a standard controller page for Account and display the list of cases
for specified account -->
<apex:form >
<apex:commandButton value="back" action="{!URLFOR($Page.StandardListControllerExample4,null)}"/>
</apex:form>
<apex:pageBlock >
<apex:pageBlockTable value="{!Account.cases}" var="c">
<apex:column value="{!c.caseNumber}"/>
<apex:column value="{!c.subject}"/>
</apex:pageBlockTable>
</apex:pageBlock>
<!-- Display the list of account records in another page and include a column as cases. when user clicks on it should
execute this page -->
</apex:page>
eg.,
<apex:pageBlockTable>
<apex:facet name='caption'/>
</apex:pageBlockTable>
4. apex:repeat
5. apex:dataList
6. pageBlockSection
<apex:outputField value="{!Account.Name}">
<apex:inlineEditSupport event="ondblclick"/>
</apex:outputField>
attributes
event = allowed events such as ondblclick, onmouseover to enable the field to editable mode
Example:
<apex:page standardController="Employee__c">
<apex:sectionHeader title="Employee" subtitle="Employee Status Update"/>
<apex:form >
<apex:pageblock >
<apex:pageBlockSection >
<apex:outputField value="{!Employee__c.Name}"/>
<apex:outputField value="{!Employee__c.Status__c}">
<apex:inlineEditSupport event="ondblclick" showOnEdit="UpdateButton" hideOnEdit="DelButton"/>
</apex:outputField>
<apex:outputField value="{!Employee__c.Date_of_Join__c}"/>
<apex:outputField value="{!Employee__c.Years_of_Experience__c}"/>
<apex:outputField value="{!Employee__c.Department_Name__c}"/>
<apex:outputField value="{!Employee__c.Department_Name__r.Is_Active__c}"/>
</apex:pageBlockSection>
<apex:pageBlockButtons >
<apex:commandButton value="Update" action="{!save}" id="UpdateButton"/>
<apex:commandButton value="Delete" action="{!delete}" id="DelButton"/>
</apex:pageBlockButtons>
</apex:pageblock>
</apex:form>
</apex:page>
15. <apex:pageMessages>
It is to display the standard or custom validation error messages on top of the page
<apex:page standardController="Account">
<apex:form >
<apex:pageMessages ></apex:pageMessages>
<!-- to display the messages warning or error of components in the page -->
<apex:pageblock >
<apex:pageBlockSection >
<apex:inputField value="{!Account.Name}"/>
</apex:pageBlockSection>
</apex:pageblock>
<apex:commandButton value="save" action="{!save}"/>
</apex:form>
</apex:page>
16. Exercise
1. Write a standard list controller page to display the all departments with details such as Name, Department Grade
and is Active.
a. Include inline edit only for the is Active field.
RelationshipNames
Parent Child Parent2Child
Account Contact Account.Contacts
Account Cases Account.Cases
Account Opportunity Account.Opportunities
ParentOName__c ChildOName__c ParentOName__r.ChildRelName__c
Note: The child relationship name for standard object is plural name of the child object.
The child relationship name for custom object is plural name with double under score 'r'.
17. <apex:tabPanel>
is used to add tabs in te page using the child component apex:tab
atrributes
switchType is used to implement the model of tab navigation
client -> this will take less time to render the tab
server -> this will refresh the page which is the default one
ajax -> to do the http post method to get the data
18. <apex:iframe>
is used to include a VF page/external site inside another page.
19. <apex:detail>
is used to render the standard detail page for record id of standard controller page referred in subject attribute.
<apex:detail subject="{!Account.Id}">
21. <apex:selectList>
used to add a field to include more than one options for user to select.
<apex:page >
<apex:form >
<apex:sectionHeader title="SelectList"/>
<apex:pageBlock >
<apex:selectList size="1">
<apex:selectOption itemLabel="Chn" itemValue="Chennai"></apex:selectOption>
<apex:selectOption itemLabel="Hyd" itemValue="Hyderabad"></apex:selectOption>
<apex:selectOption itemLabel="DLH" itemValue="Delhi"></apex:selectOption>
</apex:selectList>
</apex:pageBlock>
To refer any variable from apex class, that should be declared as property.
To pass value between VF page and apex, the variable in apex should be declared as property.
Example
public String name {get; set;}
Purpose of keyword:
get and set keyword defines whether the variable is readable or writeable one.
Example.,
public Integer varEditable {get; set;} => read/write
public Integer varReadOnly {get; } => This will not execute ‘Variable is not visible: PropertyDemo.varReadOnly’
In another words.
get -> the data can be passed from apex to VF.
set -> the data can be passed/assigned from VF to apex class.
public PropertyDemo(){
name = 'Ranjith';
city ='Chennai';
}
}
<apex:page controller="PropertyDemo">
Name : {!name} <br/>
City : {!city}
</apex:page>
When VF page executes the class associated with the page will be instantiated automatically.
/apex/propertyDemoPage
Output:
Name : Ranjith
City : Chennai
Hence if any variable needs to be initialized when page is loaded, then keep those variable initialization inside the
constructor.
Property can also be written as getter and setter method.
public class PropertyDemo {
public String result {get; set;}
public String city {get; set;}
public void setCity(String myName){ //setter method will have argument to get value from VF
result = myName;
}
}
Example:
public class DemoCollege {
public String collName {get; set;}
public String city {get; set;}
public String branch {get; set;}
public DemoCollege(){
CollName = 'GCT';
city = 'Cbe';
branch ='loly road';
}
}
<apex:page controller="DemoCollege">
College Name : {!CollName} <br/>
City : {!City} <br/>
Branch :{!Branch}
</apex:page>
Example:
<apex:page controller="Demo2">
{!name}
{!age}
</apex:page>
</apex:form>
</apex:page>
Apex Class
public with sharing class ActionDemoController {
public String name {get; set;}
Example:
Requirement is to call controller method or any action when user initiates the events as below
i. change the value in a input text box - ( onchange event )
ii. enable the checkbox – ( onclick)
iii. select any option in a picklist field etc., - (onchange)
The above components are not action components (like commandButton, commandLink etc.,) and hence we cannot
call controller method for the mentioned events.
To call controller on click of checkbox, include the actionSupport component as child to apex:inputCheckBox with
below attributes event=onclick and action=apexMethod to be called.
<apex:inputCheckbox >
<apex:actionSupport action="{!callMethod}" event="onclick" reRender="res"/>
</apex:inputCheckbox>
Class:
public class ActionSupportDemo1 {
public String result {get; set;}
public ActionSupportDemo1(){
result = 'Before the controller method is called!';
}
public void callMethod(){
<apex:page controller="ActionSupportDemo1">
<apex:form>
<apex:pageBlock title="Call apex method on click of checkbox!">
Enable this checkBox to call apex Method:
<apex:inputCheckbox >
<apex:actionSupport action="{!callMethod}" event="onclick" reRender="res"/>
</apex:inputCheckbox>
</apex:pageBlock>
<apex:pageBlock id="res">
{!result}
</apex:pageBlock>
</apex:form>
</apex:page>
When user click on check box, the text from within callMethod is assigned to result and displayed.
Scenario:
There are two sections such as Personal Details and Experienced Details. When the page is loaded, display only the
Personal Details in the beginning. The section Experienced details should be displayed to get company details only
when the isExperienced checkbox is enabled.
<apex:page controller="EmployeeMainCls">
<apex:form >
<apex:pageBlock tabStyle="lead">
<apex:commandButton action="{!submit}" value="submit" reRender="res"/>
<apex:pageBlockSection title="Personal Details">
<apex:pageBlockSectionItem >
<apex:outputLabel >Name</apex:outputLabel>
<apex:inputText value="{!ew.Name}"/>
</apex:pageBlockSectionItem>
<apex:pageBlockSectionItem >
<apex:outputLabel >Phone</apex:outputLabel>
<apex:inputText value="{!ew.Phone}"/>
</apex:pageBlockSectionItem>
<apex:pageBlockSectionItem >
<apex:outputLabel >Email</apex:outputLabel>
<apex:inputText value="{!ew.Email}"/>
</apex:pageBlockSectionItem>
<apex:pageBlockSectionItem >
<apex:outputLabel >Is Experienced?</apex:outputLabel>
<apex:inputCheckbox value="{!ew.isExperienced}">
<apex:actionSupport event="onclick" action="{!enableExpSection}" reRender="exp"/>
</apex:inputCheckbox>
</apex:pageBlockSectionItem>
</apex:pageBlockSection>
<apex:outputPanel id="exp" > <!-- used to group the other components -->
<apex:pageBlockSection title="Experienced Details" rendered="{!flag}">
<apex:pageBlockSectionItem >
<apex:outputLabel >Company</apex:outputLabel>
<apex:inputText value="{!ew.Company}"/>
</apex:pageBlockSectionItem>
</apex:pageBlockSection>
</apex:outputPanel>
</apex:pageBlock>
<apex:outputPanel id="res">
<apex:pageBlock title="Details:" rendered="{!empWrapList.size > 0}">
<apex:dataTable value="{!empWrapList}" var="e" frame="border" rules="rows" cellpadding="2">
<apex:column headerValue="Name" value="{!e.Name}"/>
<apex:column headerValue="Phone" value="{!e.Phone}"/>
<apex:column headerValue="Email" value="{!e.Email}"/>
<apex:column headerValue="Company" value="{!e.Company}"/>
</apex:dataTable>
</apex:pageBlock>
</apex:outputPanel>
</apex:form>
</apex:page>
public EmployeeMainCls(){
flag = false;
ew = new EmployeeWrap();
empWrapList = new List<EmployeeWrap>();
}
<apex:page standardController="Opportunity">
<apex:form>
<apex:pageBlock id="res" >
<apex:pageBlockSection>
<apex:inputField value="{!Opportunity.Name}"/>
<apex:inputField value="{!Opportunity.Amount}"/>
<apex:inputField value="{!Opportunity.StageName}">
<apex:actionSupport event="onchange" reRender="res"/>
</apex:inputField>
<apex:inputField value="{!Opportunity.Type}"/>
<apex:inputField value="{!Opportunity.closeDate}"/>
</apex:pageBlockSection>
</apex:pageBlock>
</apex:form>
</apex:page>
The above page will display error for required field as below when the stage ‘Closed Lost’ is selected.
Reason behind this is the pageBlock is refreshed (reRendered) when the option in stage is selected. Hence the all the
components inside the pageBlock is submitted to the server. This initiates the standard validation and error occurs.
To avoid this, let’s include the section where the stage field is given inside the actionRegion tags. This way, we can
only the submit the stage field alone to the server.
<apex:pageBlockSection columns="1">
<apex:inputField value="{!Opportunity.Name}"/>
<apex:actionRegion>
<apex:inputField value="{!Opportunity.StageName}">
<apex:actionSupport event="onchange" reRender="res"/>
</apex:inputField>
</apex:actionRegion>
<apex:inputField value="{!Opportunity.closeDate}"/>
</apex:pageBlockSection>
In above page, the component actionRegion is used to submit the part of the VF page to the server.
This class is used to build options for Visualforce components such as selectCheckboxes, selectList, or selectRadio.
Syntax:
In a custom controller, you can instantiate a SelectOption in one of the following ways:
SelectOption option = new SelectOption(value, label, isDisabled);
where value is the String that is returned to the controller if the option is selected by a user, label is the String that is
displayed to the user as the option choice, and isDisabled is a Boolean that, if true, specifies that the user cannot
select the option, but can still view it.
Apex Class
public class SelectOptionClass {
public List<SelectOption> options {get; set;}
public SelectOptionClass(){
SelectOption op1 = new SelectOption('None','None');
SelectOption op2 = new SelectOption('Hyd','Hyd');
SelectOption op3 = new SelectOption('Chn','Chn');
SelectOption op4 = new SelectOption('Pune','Pune');
options = new List<SelectOption>{op1, op2, op3, op4};
}
}
VF Page
<apex:page controller="SelectOptionClass">
<apex:form >
<apex:pageBlock >
City:: <apex:selectList size="1">
<apex:selectOptions value="{!options}"></apex:selectOptions>
</apex:selectList>
</apex:pageBlock>
</apex:form>
</apex:page>
Exercise
Create a VF page to get employee details such as personal and experience details in two different sections.
i. Display only the personal details first like name, phone, email and isExperienced values
ii. Display the section ‘Experienced Details’ only when IsExperienced checkbox is enabled in previous
section.
iii. Include a button submit in the page so that when user clicks on it, the employee details entered must
be displayed in another block.
public EmployeeMainCls(){
flag = false;
ew = new EmployeeWrap();
empWrapList = new List<EmployeeWrap>();
}
//Checking if the IsExperienced is true, then make the flag to true so that pageblockSection //‘Experienced details
‘ will be enabled dynamically
public void enableExpSection(){
if(ew.isExperienced)
flag=true;
else
flag=false;
}
Visualforce Page
<apex:page controller="EmployeeMainCls">
<apex:form >
<apex:pageBlock tabStyle="lead">
<apex:commandButton action="{!submit}" value="submit" reRender="res"/>
<apex:pageBlockSection title="Personal Details">
<apex:pageBlockSectionItem >
<apex:outputLabel >Name</apex:outputLabel>
<apex:inputText value="{!ew.Name}"/>
</apex:pageBlockSectionItem>
<apex:pageBlockSectionItem >
<apex:outputLabel >Phone</apex:outputLabel>
<apex:inputText value="{!ew.Phone}"/>
</apex:pageBlockSectionItem>
<apex:pageBlockSectionItem >
<apex:outputLabel >Email</apex:outputLabel>
<apex:inputText value="{!ew.Email}"/>
</apex:pageBlockSectionItem>
<apex:pageBlockSectionItem >
<apex:outputLabel >Is Experienced?</apex:outputLabel>
<apex:inputCheckbox value="{!ew.isExperienced}">
<apex:actionSupport event="onclick" action="{!enableExpSection}"
reRender="exp"/>
</apex:inputCheckbox>
</apex:pageBlockSectionItem>
</apex:pageBlockSection>
<apex:outputPanel id="exp" > <!—outputPanel is used to group the other components -->
<apex:outputPanel id="res">
<apex:pageBlock title="Details:" rendered="{!empWrapList.size > 0}">
<apex:dataTable value="{!empWrapList}" var="e" frame="border" rules="rows" cellpadding="2">
<apex:column headerValue="Name" value="{!e.Name}"/>
<apex:column headerValue="Phone" value="{!e.Phone}"/>
<apex:column headerValue="Email" value="{!e.Email}"/>
<apex:column headerValue="Company" value="{!e.Company}"/>
</apex:dataTable>
</apex:pageBlock>
</apex:outputPanel>
</apex:form>
</apex:page>
Note: In above code, the actionSupport component is used to add AJAX functionality to component inputCheckBox
so that we user click on it, the apex method enableExpSection is called and turn the flag to true and reRender the
<apex:outputPanel id="exp" >
<apex:pageBlockSectionItem >
<apex:outputLabel >Is Experienced?</apex:outputLabel>
<apex:inputCheckbox value="{!ew.isExperienced}">
<apex:actionSupport event="onclick" action="{!enableExpSection}" reRender="exp"/>
</apex:inputCheckbox>
</apex:pageBlockSectionItem>
UI for reference
2. Create a wrapper class with details of employee such as name, phone, email, isExperienced, company.
3. Create a main class “EmployeeMainCls “
Variable declarations:
Name : Purpose
EmployeeWrap ew : To get input for the employee wrapper
List<EmployeeWrap>
empWrapList : To create list of employee records in apex so that we can
display in VF page after adding employee record
Boolean flag : To use in rendered attribute of section ‘employee details’
Example 1
Public class ActionFuncController {
public string MyString_From_Methode {get;set;}
Purpose is to onclick of inputcheckbox, call the javaScrpt() and then call the controller method ActionFunMethod
through actionFunction.
<apex:page controller="ActionFuncController" tabStyle="Account">
<script>
function javaScrpt(){
var flag = confirm('Do you want to continue?');
if(flag)
actionFunName();
}
</script>
<apex:form >
<apex:actionFunction name="actionFunName" action="{!ActionFunMethod}" reRender="outputtxtId"/>
<apex:pageBlock >
<apex:outputLabel for="inptCheckBox" value="Check this box to call Controller method from js using
ActionFunction" style="color:green;"></apex:outputLabel>
<apex:inputcheckbox onclick="javaScrpt()" id="inptCheckBox"/>
</apex:pageBlock>
<apex:outputText value="{!MyString_From_Methode}" id="outputtxtId"></apex:outputText>
</apex:form>
</apex:page>
/apex/search?parameterName1=value¶meterName2=value
public StudentClass(){
if(ApexPages.currentPage().getParameters().get('age') == null)
myAge = 0;
else
// to convert string to integer -> Integer.valueOf(string)
myAge = Integer.valueOf(ApexPages.currentPage().getParameters().get('age'));
if(ApexPages.currentPage().getParameters().get('age') == null)
name = ' ';
else
name = Apexpages.currentPage().getParameters().get('myName');
}
}
VF Page
<apex:page controller="StudentClass" >
<apex:sectionHeader title="using $CurrentPage.parameters"/>
<apex:pageBlock title="Student Details">
Name: {!$CurrentPage.Parameters.myName} <br/>
Age: {!$CurrentPage.Parameters.age}
</apex:pageBlock>
<apex:page >
<apex:pageBlock title="value = 0">
<apex:variable value="{!0}" var="a"/>
{!a}
</apex:pageBlock>
Output
Example:
public class getParamCont {
public String myCompany {get; set;}
public String anotherComp {get; set;}
<apex:page controller="getParamCont">
<apex:form >
<apex:sectionHeader title="apex:param name= , value= "/>
<apex:pageBlock >
<!-- declaring local variable 'a' in vf page and initialize with value - capital-->
<apex:variable value="{!'capital'}" var="a"/>
Name: {!a}
<apex:commandButton value="pass Param" action="{!passParam1}" reRender="pb1">
<apex:param name="company" value="{!a}" /> <!-- company=capital -->
</apex:commandButton>
</apex:pageBlock>
<apex:pageBlock id="pb1">
{!myCompany}
</apex:pageBlock>
<apex:pageBlock id="pb2">
{!anotherComp}
</apex:pageBlock>
</apex:form>
</apex:page>
Passing parameter
public with sharing class PassValueController {
public String myParam {get;set;}
<apex:form id="frm">
<apex:outputPanel id="resultPanel">
<apex:actionStatus startText="requesting..." stopText="" id="myStatus" />
<br/>
<b><apex:outputLabel value="{!myParam}" /></b>
</apex:outputPanel>
<br/>
Enter Value 1 :
<apex:inputText id="txt1" />
<br/>
Enter Value 2 :
<apex:inputText id="txt2" />
<br/>
<br/>
<br/>
<span class="pointer" onclick="callActionMethod()"> Click Me !!! </span>