Visualforce Part 1

CapitalInfo Program Basics – OOPS RANJITH KRISHNAN (sfdcmeet@gmail.
com)
Visualforce Notes By RANJITH KRISHNAN

Table of Contents
1. What is VF?................................................................................................................................................................ 2
2. What are the rules to create a vf page? .................................................................................................................... 3
3. How many ways to create a VF page? ...................................................................................................................... 4
4. ABOUT MVC ARCHITECTURE ..................................................................................................................................... 6
5. How to execute the visualforce page? ...................................................................................................................... 6
6. To connect vf page with controller (business logic) .................................................................................................. 7
7. STANDARD VF COMPONENTS ................................................................................................................................... 8
apex:page: ..................................................................................................................................................................... 8
apex:sectionHeader: ..................................................................................................................................................... 9
apex:pageBlock ........................................................................................................................................................... 10
apex:commandButton................................................................................................................................................. 12
apex:pageBlockButton ................................................................................................................................................ 13
apex:inputText ............................................................................................................................................................ 14
apex:inputTextArea ..................................................................................................................................................... 16
apex:inputFile .............................................................................................................................................................. 17
apex: pageBlockSection............................................................................................................................................... 18
apex: pageBlockSectionItem ....................................................................................................................................... 20
8. WHAT IS CONTROLLER? .......................................................................................................................................... 22
What is standard Controller? ...................................................................................................................................... 22
9. Child to Parent Reference ( Field Reference in Visualforce Page.) ......................................................................... 24
10. How to list the collection of records using standard Controller? ....................................................................... 25
11. About URLFOR ..................................................................................................................................................... 27
To execute a standard action for a Standard Page belongs to Account Object.......................................................... 27
Example: ...................................................................................................................................................................... 27
12. Types of Controller .............................................................................................................................................. 28
13. Components used to display the list of records.................................................................................................. 28
How to display the default label for the field in pagebLockTable?............................................................................. 28
How to add Custom Label? ......................................................................................................................................... 28
14. To enable inline edit for vf components ............................................................................................................. 28
15. <apex:pageMessages> ........................................................................................................................................ 29
16. Exercise................................................................................................................................................................ 29
17. <apex:tabPanel> .................................................................................................................................................. 30
is used to add tabs in te page using the child component apex:tab ............................................................................... 30
18. <apex:iframe> ..................................................................................................................................................... 30
19. <apex:detail> ....................................................................................................................................................... 30
20. <apex: relatedList> .............................................................................................................................................. 30
RANJITH KRISHNAN ([email protected]) Page 1

CapitalInfo Program Basics – OOPS RANJITH KRISHNAN ([email protected])
21. <apex:selectList> ................................................................................................................................................. 30

22. Property in Apex.................................................................................................................................................. 31
23. USE of reRender attribute ................................................................................................................................... 33
24. What is the use of apex:ActionSupport Component? ........................................................................................ 34
Scenario: ...................................................................................................................................................................... 35
25. What is action Region?........................................................................................................................................ 37
26. How to built options for apex:selectList component in Apex? ........................................................................... 39
Exercise........................................................................................................................................................................ 40
EXERCISE – LIST - ACTIONSUPPORT............................................................................................................................. 43
27. What is the use of apex:actionFunction component? ........................................................................................ 44
28. READING PARAMETER IN URL ............................................................................................................................. 45
How to read the parameter in the URL? ..................................................................................................................... 45
Read parameter from url within apex ......................................................................................................................... 45
29. Use of apex:variable component ........................................................................................................................ 46
USE of apex:Param Component .................................................................................................................................. 46
Format 1: To pass city=Chennai in url ......................................................................................................................... 47
Format 2: To assign this city=Chennai to apex variable directly ................................................................................. 47
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.
1. Visualforce page consists of

a. Visualforce markup
b. Visualforce controller.
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>
ii. Scripting elements

Html, javascript, ajax, jquery,node.js, angular.js react.js
All the scripting elements which are supported by the browser are also supported by
visualforce pages.

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.
4. Why do we need VF page?

a. To override functionalities such as view, edit etc., in standard page layout.
b. To execute VF page using custom buttons on standard page.
c. To include custom sidebar components
d. To execute page via VF tabs
e. To override standard tabs and page.
f. To create Custom user interface
5. How does a VF Tags look like?

a. Visualforce page is created using the tags (also called as components) similar to the coding style of HTML
and XML. It means every tag has open and closed format as below in HTML language.
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. Visualforce page can include CSS, HTML and Javascript, jQuery.

Example: a VF page with HTML tag.
<apex:page>
<h1> THis is my visualforce page </h1>
</apex:page>
2. What are the rules to create a vf page?

a. Every opening element should corresponding closing elements.

(apex:page and div are two elements here in this example)

<apex:page>
<div> Capital Info Training</div>
</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>
</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”>
</apex:pageBlock>
</apex:page>
e. Every VF page will start and end with <apex:page> component
f. All the VF pages will have an extension of .Vfp.

Example: If there is a page called helloWorld, then the page would be saved in the database as hellWord.vfp
3. How many ways to create a VF page?

 Standard Navigation
 using URL
 Developer Console
 Eclipse
 Salesforce DX ( SFDX)
 Metadata Soap API web services
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
ii. How to create a new VF page named SecondPage” using url

a. Enter the url https://c.ap8.visual.force.com/apex/SecondPage
b. If the page exists with given name, then page will open.
c. If the page doesn’t exist, it throws an error message with link to create new page.
d. When we click on the link new page will be created as below.
<apex:page >

<h1>Congratulations</h1>
This is your new Page: secondpage

</apex:page>
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'.
From Developer Console:

a. To create new VF page
File
| - New
| - Visualforce page
Step 1: Enter PageName

Step 2: Enter Body
Step 3: Save
Step 4: Preview
b. To open existing VF page.

File
| - Open

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.
f. METADATA SOAP API WEBSERVICES

This is an inbuilt API of salesforce. We can use this to create file of XML type to create and deploy the custom
objects, custom fields, Visualforce Pages etc.,
4. ABOUT MVC ARCHITECTURE

 VF pages are view part of the MVC architecture. VF pages are used to create custom pages or to override
anyone of Standard functionalities.
 Everything we develop in salesforce is part of MVC architecture. MVC stands for Model, View and Controller
layers.
Model represents Database where data exists
View represents the presentation layer which is UI (visualforce)
Controller represents the business logic to process the data from/to model and controller
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
Model => Schema and data of the application. Object in Salesforce

View => UI of application that presents the data. Visualforce in Salesforce.
Controller => How the UI responds to actions. Controller/apex code in salesforce.
In MVC pattern, the designers and developers can work on Visualforce pages independently while developers work
on writing business logic.
5. How to execute the visualforce page?

Each page is accessible by a unique URL similar to that of a traditional web page. When someone accesses a
page, the server renders the page.
Each page is then accessible by a unique URL.

https://<instance name>.visual.force.com/apex/VFPageName
Example:

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.
6. To connect vf page with controller (business logic)

Types of controllers
1. Custom controller -> Apex Code - custom controller
eg., <apex:page controller ="StudentClass">
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.
eg., <apex:page standardController="Account" extensions="AnotherClass1, class2,...">

eg., <apex:page Controller="StudentClass" extensions="AnotherClass2">
fullPath -> absolute path

https://c.ap15.visual.force.com/apex/Day6_VF_Page
https://c.ap15.visual.force.com/apex/pageDemo
Relative path -> partial url

/apex/Day6_VF_Page
/apex/pageDemo
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 >

<h1>Congratulations</h1>
This is your new Page: TestPage

</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:sectionHeader title="Student" subtitle="New Student"/>

subTitle -> to add subTitle below the title
<apex:sectionHeader title="Student" subtitle="New Student" help="/apex/Day6_VF_Page"/>

help -> to add help link at the top right side similar to standard help page
<apex:sectionHeader title="Student" subtitle="New Student" help="/apex/Day6_VF_Page" description="This page

is to register the students"/>
<apex:sectionHeader title="Description Demo" description="This page is to register the students"

rendered="false"/>
<apex:sectionHeader title="Description Demo" description="This page is to register the students"

printUrl="/apex/Day6_VF_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:
1 Id String An identifier that allows the pageBlock component to be referenced by other

components in the page.
2 Title String To add title for the block.
3 dir String It specifies the text direction of the element's content. Acceptable values LTR
(left to right) or RTL (Right to Left).
Example: 1. The title of the block will be either right or left justified depending
upon this value.
2. If user enters text inside this block via text box, then the entered
text will be appearing from left to right while user entering.
4 helpU String To refer URL of web page as help page for this block. If specified, you must also
RL provide a value for helpTitle.
5 helpTit String To display label for the helpURL. If specified, you must also provide a value for
le helpURL.

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" >

<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 title="Block 2" rendered="false">

</apex:pageblock>
<apex:pageblock title="Block 3 - Rendered is true" rendered="true">

Rendered is true
</apex:pageblock>
</apex:page>
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:
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: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:
1 Id String An identifier that allows the pageBlockButtons component to be referenced

by other components in the page.
2 Location String It specifies where the button needs to be placed. Possible values are top,
bottom or both. By default it is set as both.
3 Onclick String The JavaScript invoked if the onclick event occurs--that is, if the user clicks
anywhere in pageBlockButtons component. Like this we have ondblclick,

onkeydown, onkeypress etc.,
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:pageblock>
<apex:form >
</apex:page>
Example 3:
<apex:page >
<apex:form >
<apex:pageblock title="Location: Top">
<apex:pageBlockButtons location="Top">
</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:

1 Id String An identifier that allows the inputText component to be

referenced by other components in the page.
2 Value Object To refer the class variable in merge format. Example:
{!apexVariableName}
3 maxLength String The maximum number of characters that a user can enter for this
field, expressed as an integer.
4. Rendered Boolean A Boolean value that specifies whether the 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. Size Integer The width of the input field.
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 pageBlockButton component
is rendered on the page. By default it is true.
12. List Object A list of auto-complete values to be displayed. The list attribute is
specified as either a comma-delimited.
13. Onblur String The JavaScript invoked if the onblur event occurs--that is, if the
focus moves off of the field
14. 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: disabled attribute

<apex:page >
<apex:form >
<apex:pageblock title="InputText Demo">
Name: <apex:inputtext /> <br/>
<apex:inputtext disabled="true"></apex:inputtext>
<apex:inputText disabled="{!IF(3<2, true, false)}"></apex:inputText> <br/>
</apex:pageblock>
</apex:form>
</apex:page>
Example 2: maxLength attribute

<apex:page >
<apex:form >
Passport No: <apex:inputtext maxLength="9"></apex:inputtext>
</apex:pageblock>
</apex:form>
</apex:page>
Example 3: size attributes. This determines the width of the text box to be displayed.
<apex:page >
<apex:form >

Passport No: <apex:inputtext maxLength="9" size="10"></apex:inputtext>

</apex:pageblock>
</apex:form>
</apex:page>
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 >
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:
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.
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 2: cols attribute

<apex:page >
<apex:form >
<apex:pageblock>
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 3: readOnly
<apex:page >
<apex:form >
<apex:pageblock>
</apex:pageblock>
</apex:form>
</apex:page>
Example 4: rows
<apex:page >
<apex:form >
<apex:pageblock>
</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:
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.
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:
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>
<apex:pageblock title="PageBlock Section Demo">

<apex:pageBlockSection title="by Default - 1 columns" columns="3">
<apex:inputText />
<apex:outputLabel value="City :"/>
<apex:inputText />
<apex:outputLabel value="Age: "/>
<apex:inputText />
</apex:pageblock>
</apex:form>
</apex:page>
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:
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:inputText />
</apex:pageBlockSectionItem>
3 dataTitle String The text displayed when you hover over the right, "data" cell of the
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:inputText />
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
7. labelTitle String The text displayed when you hover over the left, "label" cell of the

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:inputText />
</apex:pageblock>
<apex:pageblock title="with PageBlockSection Item" tabStyle="Contact">
<apex:pageBlockSectionItem >
<apex:inputText />
</apex:pageblock>
</apex:form>
</apex:page>
Result:
Example 2: dataStyle and helpText

<apex:page >
<apex:form >
<apex:pageblock title="PageBlock Section Demo">
<apex:pageBlockSectionItem dataStyle="background-color:blue" dataTitle="test"
helpText="enter name!">
<apex:inputText />
</apex:pageblock>
</apex:form>
</apex:page>

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?
What is View in MVC?

It is part of presentation layer.
VF is in view part of MVC Architecture.
What are the types of controller?

1. Standard
2. Custom
What is standard Controller?

It is an inbuilt controller existing for all standard and custom objects.
It is in the name of object for standard objects and in API Name for custom objects.
Example:
Account
Contact
Department__c
Employee__c
How to associate a VF page with standard controller Account?

Using an attribute called 'StandardController' in page component
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.
For example, if you use the standard Accounts controller as below

<apex:page StandardController="Account"> and
clicking a Save button in a Visualforce page results in the same behavior as clicking Save on a standard Account edit
page.
Associate a VF page to refer single record.

Example 1:

Name : {!Account.Name} <br/>
Industry : {!Account.Industry} <br/>
Rating : {!Account.Rating}/>
</apex:page>
How to test the above page?

Execute the below page by referring query string (query string : ?parameter=value) in the url as below.
i.e To display the data for the record id - 0010o00002KL8Jk
the url would be as follows

https://c.ap8.visual.force.com/apex/StandardControllerDemo?id=0010o00002KL8Jk
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.
delete => it deletes the record under context
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.
Example 2: Page to get input data for the account object.

<apex:form >
<apex:pageBlock title="Account Entry! with object label">
<apex:pageBlockSection >
<apex:inputField value="{!Account.Name}"/>
<apex:inputField value="{!Account.Phone}"/>
<apex:inputField value="{!Account.Industry}"/>
<apex:inputField value="{!Account.AnnualRevenue}"/>
<apex:inputField value="{!Account.Active__c}"/>
</apex:pageBlock>
</apex:form>
</apex:page>
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:form >
<apex:pageBlock >
<apex:commandButton value="save" action="{!save}"/>
<apex:inputText value="{!Account.name}"/>
<apex:inputField value="{!Account.name}"/>
<apex:inputText value="{!Account.Industry}"/>
<apex:inputText value="{!Account.SLAExpirationDate__c}"/>
<apex:inputField value="{!Account.SLAExpirationDate__c}"/>
</apex:pageBlock>
</apex:form>
</apex:page>
Example
<apex:form >
<apex:sectionHeader title="Account" subTitle="Account Edit Page" help="/apex/CustomLabelDemo"/>
<apex:pageblock >
<apex:pageBlockSection columns="3">
<apex:inputField value="{!Account.AnnualRevenue}"/>
<apex:inputField value="{!Account.Rating}"/>
<apex:inputField value="{!Account.Active__c}"/>
<apex:pageBlockButtons location="top">
</apex:pageblock>
</apex:form>
</apex:page>
9. Child to Parent Reference ( Field Reference in Visualforce Page.)

1. To refer current object field
<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>
2. To refer parent field

{!ChildObjectName.RelationshipFieldName.ParentFieldName}
For custom object

The RelationshipFieldName__c will be referred as RelationshipFieldName__r when it is used to refer the fields
from parent object
eg., {!ChildObjectName.CustomRelationshipFieldName__r.ParentFieldName}
<apex:page StandardController="Contact">
{!Contact.Account.Name} 
</apex:page>
CObjectName PObjName RelationshipFName PObjField FieldReference in VF Page

1. Contact Account Account Industry {!Contact.Account.Industry}
2. Opportunity Account Account Industry {!Opportunity.Account.Industry}
3. Case Account Account Name {!Case.Account.Name}
4. Case Account Account active__C {!Case.Account.active__C}
5. Employee__c Department__c Department_Name__c Status__c
{!Employee__c.Department_Name__r.Status__c}
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/>
DeptName : {!Employee__c.Department__r.Department__c} <br/><br/>

Dept Status : {!Employee__c.Department__r.Status__c} <br/><br/>
Owner : {!Employee__c.Department__r.Owner.Name}
</apex:page>
Example
<apex:pageBlock >
<apex:outputField value="{!Employee__c.Name}"/>
<apex:outputField value="{!Employee__c.Department_Name__r.Department_Grade__c}"/>

</apex:pageBlock>
</apex:page>
10. How to list the collection of records using standard Controller?

 Page Component with StandardController attribute along with recordSetVar is referred as Standard List
Controller.
 It displays the collection of records from the current list view.
 It displays 20 records by default.
This controller has methods to navigate.

Next, Previous, First and Last
<apex:page standardController="Account" recordSetVar="accs"> 

<apex:form >
<apex:pageBlock >
<apex:pageBlockTable value="{!accs}" var="a">
<apex:column value="{!a.Name}" headerValue="Company"/>
<apex:column value="{!a.Name}"/>
</apex:pageBlockTable>
<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:pageBlock>
</apex:form>
</apex:page>
Example 2:
<apex:page standardController="Account" recordSetVar="accs">
<apex:pageBlock title="Using pageBlockTable - standard look and feel">
<apex:column headerValue="Company" value="{!a.Name}"/>
<apex:column value="{!a.Industry}"/>
<apex:column value="{!a.Phone}"/>
<apex:column value="{!a.AnnualRevenue}"/>
</apex:pageBlock>
<apex:pageBlock title="Using dataTable - to add some custom look">

<apex:dataTable value="{!accs}" var="a" cellpadding="1" border="1">
<apex:column headerValue="Industry" value="{!a.Industry}"/>
<apex:column headerValue="Phone" value="{!a.Phone}"/>
<apex:column headerValue="Annual Revenue" value="{!a.AnnualRevenue}"/>
</apex:dataTable>
</apex:pageBlock>
<apex:pageBlock title="Using dataList">

<apex:dataList value="{!accs}" var="a" type="circle">
<apex:outputText >{!a.Name}</apex:outputText>
</apex:dataList>
</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>
11. About URLFOR

It returns a relative URL for an action, Visualforce page, or a file in a static resource archive in a Visualforce page.
Syntax:
{!URLFOR(target, [id], [inputs], [no override])}
Target: Action, or any static resource for image or Javascript.

Id : Name that is Of String or record ID (depends on the “target”).
Inputs: Additional parameters passed. Format: [parameters1=value1?, parameters2=value2, parameters3 = value3]
nooverride= 0/1 or false/true; -> to execute the standard page without considering the override. By default the
nooverride is false.
Example:
To execute a VF page
VFPageName?id=...
<apex:commandLink action="{!URLFOR($Page.VFPageName, null,[Id=parameter])}"
To execute a standard action for a Standard Page belongs to Account Object

<apex:commandLink action="{!URLFOR($Action.Account.View, Account.Id) }"
Edit: <apex:commandLink action="{!URLFOR($Action.Account.Edit, Account.Id) }"
Delete: <apex:commandLink action="{!URLFOR($Action.Account.Delete, Account.Id) }"
New: <apex:commandLink action="{!URLFOR($Action.Account.New) }"
Download: <apex:commandLink action="{!URLFOR($Action.Attachment.Download, Attachment.Id }"

$Action -> Global variable to refer the standard actions such as new, edit, delete etc.,
$Page -> To refer the visualforce

Example: $Page.VFPageName
With URLFOR
URLFOR( $Page.VFPageName,null,[Parameter=value])
Example:

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


</apex:page>
12. Types of Controller

1. Standard
2. Standard List Controller
The recordSetVar attribute along with standardController attribute is called Std List Controller.
To display the list of records
3. Custom
13. Components used to display the list of records

1. pageBlockTable - standard look and feel
2. dataTable - to add custom look and feel using styling attribute
3. dataList - to display item as ordered or unordered
4. Repeat - to display in free format
How to display the default label for the field in pagebLockTable?

apex:column
How to add Custom Label?

1. headerValue attribute in column
2. apex:facet -> name = header, footer, caption for its parent component
eg.,
<apex:pageBlockTable>
<apex:facet name='caption'/>
<apex:page standardController="Account" recordSetVar="accs">

<apex:pageBlock title="Using pageBlockTable - standard look and feel">
<apex:column value="{!a.Name}">
<apex:facet name="header">Company Name</apex:facet>
</apex:column>
<apex:column value="{!a.Name}"/>
</apex:pageBlock>
</apex:page>
14. To enable inline edit for vf components

using apex:inlineEditSupport
This should be descendant (child) to below components

1. apex:form
2. apex:outputField
3. 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:sectionHeader title="Employee" subtitle="Employee Status Update"/>
<apex:form >
<apex:pageblock >
<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:commandButton value="Update" action="{!save}" id="UpdateButton"/>
<apex:commandButton value="Delete" action="{!delete}" id="DelButton"/>
</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:form >
<apex:pageMessages ></apex:pageMessages>

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

b. title the page as Department Status Update

c. Display the Department name as custom link so when click on it, should be redirected to the detaile page
of that department.
d. add a column called Employees and display all the employee names.
2. Create a Department management page with below details

a. Show the existing department details
b. First column should have custom link for Edit / Delete the department record
c. 2nd column - show the department name
d. 3rd column - show the department Grade
e. 4th column - is_Active field to be editable
f. 5th column - show the employee details - Name - Status - Salary
3. Create a Account Management page with below details

----------------------------------------------------------------------------------------------------------------------------------------------
Action | Account Name | Contact Details | Issues | Deals | Latest News
------------------------------------------------------------------------------- -----------------------------------------------------------------
Edit/Del | Capital Info | Ranjith - Email - PhoneNo | 000102 - Open | Name - Amount | BBC , NDTV
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}">
20. <apex: relatedList>

Boolean Value. Used to display the related list of the record under context. It is true by default.
21. <apex:selectList>
used to add a field to include more than one options for user to select.

Child to this can be

apex:selectOption -> will add options in the form of values
apex:selectRadio -> to add radio button field

apex:selectCheckBoxes -> to add check box field
<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>
<apex:sectionHeader title="SelectList" subTitle="multiSelect"/>

<apex:pageBlock >
<apex:selectList multiselect="true" size="3">
</apex:selectList>
</apex:pageBlock>
<apex:sectionHeader title="SelectList" subTitle="CheckBox"/>
<apex:pageBlock >
<apex:selectCheckboxes >
</apex:selectCheckboxes>
</apex:pageBlock>
<apex:sectionHeader title="SelectList" subTitle="RadioButton"/>

<apex:pageBlock >
<apex:selectRadio >
</apex:selectRadio>
</apex:pageBlock>
</apex:form>
</apex:page>
22. Property in Apex

VF <-------> Apex
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;}

The above variable can now be referred in VF page as {!name}
Purpose of keyword:
get and set keyword defines whether the variable is readable or writeable one.
Keyword to set the accessibility for the variable.

get; => it is readable; to read from apex to vf
set; => it is writeable ; to assign value from vf to apex
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 class PropertyDemo {

public String city {get; set;}
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
PropertyDemo pe = new PropertyDemo();
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 getName(){ //getter method will have return type

return 'Krishnan';

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 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>
public with class Demo2 {
public string getName(){

return 'Balaji';
}
public integer getAge(){

return 10;
}
}
23. USE of reRender attribute

It helps to refresh only part of the page.
i. Onclickof the button ‘call show’ here, the controller method ‘show()’ will be called
ii. Then the block ‘pb2’ referred by attribute reRender will be refreshed with value ‘'inside the show
method’
<apex:page controller="ActionDemoController" id="page">


<apex:form id="fm" title="main block">

<apex:pageBlock id="pb1">
<apex:commandButton value="call show" action="{!show}" reRender="pb2"/>
</apex:pageBlock>
<apex:pageblock title="result" id="pb2">

{!name}
</apex:pageblock>
</apex:form>
</apex:page>
Apex Class
public with sharing class ActionDemoController {
public void show(){

name = 'inside the show method';
}
}
24. What is the use of apex:ActionSupport Component?

This is used to add AJAX support to another visualforce component allowing the component to be refreshed
asynchronously by the server when a particular event occurs such as a button clicks or mouseover.
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>
By using actionSupport component, this can be done as follows,
Class:
public class ActionSupportDemo1 {
public String result {get; set;}
public ActionSupportDemo1(){
result = 'Before the controller method is called!';
}
public void callMethod(){

result = 'After the controller method is called!';

}
}
<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: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:outputLabel >Name</apex:outputLabel>
<apex:inputText value="{!ew.Name}"/>
<apex:outputLabel >Phone</apex:outputLabel>
<apex:inputText value="{!ew.Phone}"/>
<apex:outputLabel >Email</apex:outputLabel>
<apex:inputText value="{!ew.Email}"/>
<apex:outputLabel >Is Experienced?</apex:outputLabel>
<apex:inputCheckbox value="{!ew.isExperienced}">
<apex:actionSupport event="onclick" action="{!enableExpSection}" reRender="exp"/>
<apex:outputPanel id="exp" > 
<apex:pageBlockSection title="Experienced Details" rendered="{!flag}">
<apex:outputLabel >Company</apex:outputLabel>
<apex:inputText value="{!ew.Company}"/>
</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 class EmployeeMainCls {

public EmployeeWrap ew {get; set;}
public Boolean flag {get; set;}
public List<EmployeeWrap> empWrapList {get; set;}
public EmployeeMainCls(){
flag = false;
ew = new EmployeeWrap();
empWrapList = new List<EmployeeWrap>();
}
public void enableExpSection(){

if(ew.isExperienced)
flag=true;
else
flag=false;
}
public void submit(){

empWrapList.add(ew) ;
}
}
25. What is action Region?

1. It is used to submit only the part of the page to the server when the action is taken.
2. An area of a Visualforce page that demarcates which components should be processed by the Force.com server
when an AJAX request is generated.
3. Only the components in the body of the <apex:actionRegion> are processed by the server, thereby increasing the
performance of the page.
Example to understand the action Region

Requirement: Get the value for the field reason for opportunity record whenever the stage is closed lost.
Without ActionRegion: Execute this page - NewOpportunity.vfp

<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 rendered="{!IF(Opportunity.StageName == 'Closed Lost',True,False)}">

<apex:pageBlockSectionItem>
<apex:outputLabel>Reason for closed Lost:</apex:outputLabel>
<apex:inputField value="{!Opportunity.Reason__c}" />
</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}"/>
Now, the page would work as expected

With field label using global variable,
In above page, the component actionRegion is used to submit the part of the VF page to the server.
26. How to built options for apex:selectList component in Apex?

By using standard apex class SelectOption
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.
SelectOption option = new SelectOption(value, label);

where value is the String that is returned to the controller if the option is selected by a user, and label is the String
that is displayed to the user as the option choice. Because a value for isDisabled is not specified, the user can both
view and select the option.
VF Page Output

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.

Output for test data:
Apex Class Code:

1. Create a wrapper class with details of employee such as name, phone, email, isExperienced, company.
public class EmployeeWrap {
public String email {get; set;}
public String phone {get; set;}
public String company {get; set;}
public Boolean isExperienced {get; set;}
}
Note: we use wrapper class here for a reusability of code as well as we are going to display the list of above
data as table in VF page.
2. 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’

public class EmployeeMainCls {

public EmployeeWrap ew {get; set;}
public List<EmployeeWrap> empWrapList {get; set;}
public Boolean flag {get; set;}
public EmployeeMainCls(){
flag = false;
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;
}
//Adding the employee record into list of wrapper

public void submit(){
empWrapList.add(ew) ;
}
}
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:outputLabel >Name</apex:outputLabel>
<apex:inputText value="{!ew.Name}"/>
<apex:outputLabel >Phone</apex:outputLabel>
<apex:inputText value="{!ew.Phone}"/>
<apex:outputLabel >Email</apex:outputLabel>
<apex:inputText value="{!ew.Email}"/>
<apex:actionSupport event="onclick" action="{!enableExpSection}"
reRender="exp"/>
<apex:outputPanel id="exp" > <!—outputPanel is used to group the other components -->

<apex:pageBlockSection title="Experienced Details" rendered="{!flag}">

<apex:outputLabel >Company</apex:outputLabel>
<apex:inputText value="{!ew.Company}"/>
</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>
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:actionSupport event="onclick" action="{!enableExpSection}" reRender="exp"/>
EXERCISE – LIST - ACTIONSUPPORT

1. 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.
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’
27. What is the use of apex:actionFunction component?

A component that provides support for invoking controller action methods directly from JavaScript code using an
AJAX request. An <apex:actionFunction> component must be a child of an <apex:form> component.
Example 1
Public class ActionFuncController {
public string MyString_From_Methode {get;set;}
public string ActionFunMethod(Integer num){

MyString_From_Methode = 'Method called from js using Action function';
return null;
}
}
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>

28. READING PARAMETER IN URL

Referring / Passing the parameters using URL
/apex/search?parameterName1=value&parameterName2=value
How to read the parameter in the URL?

{!$CurrentPage.Parameter.parameterName}
VF page Name: studentPage.vfp

Execute the above with parameters /apex/ studentPage?name=ranjith&city=Chennai
Parameters
<apex:page >
<apex:pageBlock title="get parameter from url => name = value pair">
{!$CurrentPage.Parameters.city}<br/>
{!$CurrentPage.Parameters.name} <br/>
{!$User.LastName}
</apex:pageBlock>
</apex:page>
Read parameter from url within apex

Using the standard class ApexPages
Apexpages.currentPage().getParameters().get(‘parameter name’);
The above method format will always return string.
public class StudentClass {

public Integer myAge {get; set;}
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:sectionHeader title="from apex - ApexPages.currentPage().getParameters().get('age')"/>

<apex:pageBlock title="Student Details">

Name: {!name} <br/>
Age : {!myAge}
</apex:pageBlock>
</apex:page>
29. Use of apex:variable component

It is used to declare a variable in VF page.
Variable declared by apex:variable can be referred as {!variableName} similar to apex variable
Attributes:
Var => name of the variable
Vaue => value of the variable
<apex:page >
<apex:pageBlock title="value = 0">
<apex:variable value="{!0}" var="a"/>
{!a}
</apex:pageBlock>

{!a}
</apex:pageBlock>

{!a}
</apex:pageBlock>
</apex:page>
Output
USE of apex:Param Component

It is used to pass parameter from VF to apex
Attributes
Name : name of the parameter to be passed
Value : value of the parameter to be passed
assignTo : apex variable to be set with value of the parameter

Format 1: To pass city=Chennai in url
<apex:param name="city" value="chennai" />
How to read the above value in apex

String myCity = Apexpages.currentPage().getParameters().get(‘city’);
Format 2: To assign this city=Chennai to apex variable directly

<apex:param name=”city” value=”chennai” assignTo="{!apexVariable}"></apex:param>
How to read the above value in apex

Public String apexVariable {get; set;}
Example:
public class getParamCont {
public String myCompany {get; set;}
public String anotherComp {get; set;}
public void passParam1(){

myCompany = ApexPages.currentPage().getParameters().get('company');
}
}
<apex:page controller="getParamCont">
<apex:form >
<apex:sectionHeader title="apex:param name= , value= "/>
<apex:pageBlock >

<apex:variable value="{!'capital'}" var="a"/>
Name: {!a}
<apex:commandButton value="pass Param" action="{!passParam1}" reRender="pb1">
<apex:param name="company" value="{!a}" /> 
</apex:commandButton>
</apex:pageBlock>
{!myCompany}
</apex:pageBlock>
<apex:sectionHeader title="apex:param name= , value=, assignTo "/>

<apex:pageBlock >
<apex:variable value="{!'capital'}" var="a"/>
Name: {!a}
<apex:commandButton value="pass Param" reRender="pb2">
<apex:param value="{!a}" name="a" assignTo="{!anotherComp}"></apex:param>
</apex:commandButton>
</apex:pageBlock>
{!anotherComp}
</apex:pageBlock>
</apex:form>
</apex:page>

Passing parameter
public with sharing class PassValueController {
public String myParam {get;set;}
public void displayParams(){

myParam = 'You have entered : 1 - '+Apexpages.currentPage().getParameters().get('firstParam')+'; 2 -
'+Apexpages.currentPage().getParameters().get('secondParam');
}
}
<apex:page controller=" PassValueController ">

<style type="text/css">
.pointer {
cursor:pointer;
border:1px solid #ccc;
padding:5px;
}
</style>
<script type="text/javascript">
function callActionMethod(){
var txtVal1 = document.getElementById("{!$Component.frm.txt1}").value;
var txtVal2 = document.getElementById("{!$Component.frm.txt2}").value;
/*Below Method is generated by "apex:actionFunction" which will call Apex Method "echoVal" */
JSActionFunc(txtVal1,txtVal2);
}
</script>
<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>
<apex:actionFunction name="JSActionFunc" action="{!displayParams}" reRender="resultPanel"

status="myStatus">
<apex:param name="firstParam" value="" />

<apex:param name="secondParam" value="" />

</apex:actionFunction>
</apex:form>
</apex:page>

Visualforce Part 1

Uploaded by

Document Information

Copyright

Available Formats

Share this document

Share or Embed Document

Sharing Options

Did you find this document useful?

Is this content inappropriate?

Copyright:

Available Formats

Visualforce Part 1

Uploaded by

Copyright:

Available Formats

CapitalInfo Program Basics – OOPS RANJITH KRISHNAN (sfdcmeet@gmail.

Visualforce Notes By RANJITH KRISHNAN

RANJITH KRISHNAN ([email protected]) Page 1

21. <apex:selectList> ................................................................................................................................................. 30

1. Visualforce page consists of

ii. Scripting elements

RANJITH KRISHNAN ([email protected]) Page 2

4. Why do we need VF page?

5. How does a VF Tags look like?

b. Visualforce page can include CSS, HTML and Javascript, jQuery.

2. What are the rules to create a vf page?

RANJITH KRISHNAN ([email protected]) Page 3

(apex:page and div are two elements here in this example)

e. Every VF page will start and end with <apex:page> component

f. All the VF pages will have an extension of .Vfp.

3. How many ways to create a VF page?

RANJITH KRISHNAN ([email protected]) Page 4

ii. How to create a new VF page named SecondPage” using url

From Developer Console:

Step 1: Enter PageName

b. To open existing VF page.

RANJITH KRISHNAN ([email protected]) Page 5

f. METADATA SOAP API WEBSERVICES

4. ABOUT MVC ARCHITECTURE

Model => Schema and data of the application. Object in Salesforce

5. How to execute the visualforce page?

Each page is then accessible by a unique URL.

RANJITH KRISHNAN ([email protected]) Page 6

6. To connect vf page with controller (business logic)

RANJITH KRISHNAN ([email protected]) Page 7

eg., <apex:page standardController="Account" extensions="AnotherClass1, class2,...">

fullPath -> absolute path

Relative path -> partial url

RANJITH KRISHNAN ([email protected]) Page 8

RANJITH KRISHNAN ([email protected]) Page 9

<apex:sectionHeader title="Student" subtitle="New Student"/>

<apex:sectionHeader title="Student" subtitle="New Student" help="/apex/Day6_VF_Page"/>

<apex:sectionHeader title="Student" subtitle="New Student" help="/apex/Day6_VF_Page" description="This page

<apex:sectionHeader title="Description Demo" description="This page is to register the students"

<apex:sectionHeader title="Description Demo" description="This page is to register the students"

1 Id String An identifier that allows the pageBlock component to be referenced by other

RANJITH KRISHNAN ([email protected]) Page 10

<apex:pageblock title="Block 2" rendered="false">

RANJITH KRISHNAN ([email protected]) Page 11

<apex:pageblock title="Block 3 - Rendered is true" rendered="true">

RANJITH KRISHNAN ([email protected]) Page 12

1 Id String An identifier that allows the pageBlockButtons component to be referenced

RANJITH KRISHNAN ([email protected]) Page 13

onkeydown, onkeypress etc.,

RANJITH KRISHNAN ([email protected]) Page 14

1 Id String An identifier that allows the inputText component to be

Example 1: disabled attribute

Example 2: maxLength attribute

RANJITH KRISHNAN ([email protected]) Page 15

Passport No: <apex:inputtext maxLength="9" size="10"></apex:inputtext>

RANJITH KRISHNAN ([email protected]) Page 16

Example 2: cols attribute

RANJITH KRISHNAN ([email protected]) Page 17

RANJITH KRISHNAN ([email protected]) Page 18

<apex:pageblock title="PageBlock Section Demo">

RANJITH KRISHNAN ([email protected]) Page 19

RANJITH KRISHNAN ([email protected]) Page 20

Example 2: dataStyle and helpText

RANJITH KRISHNAN ([email protected]) Page 21

DeptName : {!Employeec.Departmentr.Department__c} <br/><br/>