VisualForce Chapter
VisualForce Chapter
Visualforce is a framework that allows developers to build sophisticated, custom user interfaces that can be hosted
natively on the Lightning platform. The Visualforce framework includes a tag-based markup language, similar to HTML.
Developers can use Visualforce pages to:
Override standard buttons, such as the New button for accounts, or the Edit button for contacts
Override tab overview pages, such as the Accounts tab home page
Define custom tabs
Embed components in detail page layouts
Create dashboard components or custom help pages
Customize, extend, or integrate the sidebars in the Salesforce console (custom console components)
Add navigation menu items and actions in the Salesforce mobile app
Benefits of Visualforce
User-friendly development : Developers can edit their Visualforce markup in the same window that displays the resulting
page
Integration with other Web-based user interface technologies : Visualforce tags alongside standard HTML, JavaScript,
Flash, or any other code that can execute within an HTML page on the platform, including Force.com platform merge
fields and expressions
Model-View-Controller (MVC) style development : Visualforce conforms to the Model-View-Controller (MVC)
development pattern by providing a clear division between the view of an application (the user interface, defined by
Visualforce markup), and the controller that determines how the application works (the business logic, defined by a
Visualforce controller written in Apex)
Concise syntax : Visualforce pages can implement the same functionality as s-controls but with approximately 90%
fewer lines of code.
Data-driven defaults : Visualforce components are rendered intelligently by the platform
Hosted platform : Visualforce pages are compiled and rendered entirely by the Force.com platform.
Automatically upgradeable : Visualforce pages do not need to be rewritten when other parts of the Force.com platform
are upgraded. Because the pages are stored as metadata, they are automatically upgraded with the rest of the system.
VIEW :The presentation of information to the user is nothing but the View. This is one user interface given to user for
interaction with system. View consists of visual salesforce pages and components. Pages may be linked with Visual force
components. These pages use HTML for preparing layout of application. To refer each page it is linked with unique URL
similar to web pages.
Components – The reusable code or block of code is named as component. These components can be styled with CSS
and are reused whenever necessary.
Visual force pages, tabs and Page layout classes come under the View.
CONTROLLER: The business logic is implemented in controller. These are the building blocks of the actual logic using
Apex language. The pages from the view interact with controller using components. Salesforce has pre-build controller for
some standard actions like save, Edit etc. Workflow, Triggers and Apex classes comes under this layer.
Parameter Description
LogDate This parameter provides the date that the page access was logged. This parameter is available for release 216 a
later.
Parameter Description
ProfileId The ID of the profile associated with the users who accessed the page. This parameter is available for release 216 a
later.
ApexPageId The ID of the tracked Visualforce page
DailyPageView Each VisualforceAccessMetrics object tracks the daily page view count in the DailyPageViewCount field.
VISUALFORCE CONTROLLERS
Standard Controllers :- Standard controllers are the default Controller’s provided by Force.com. These standard
controllers
will have same logic and functionality used standard visualforce pages. No Apex code is required in Standard Controllers
Syntax :- <apex:page standardcontroller =”contact”></apex:page>
Custom controller :- When a developer needs different logic and functionality he/she may write their own Apex controller
class. Custom controller’s will not provide default functions like standard controllers. Custom apex code must be written
for custom controllers.
Syntax :- <apex : page controller = “Mycontroller”></apex:page>
Extension controllers :- If we want to use both custom controller functionality and standard controller functionality we
use extension controllers. Extension Controllers begins with Standard controller and extended or overridden with custom
controller with custom apex code.
Syntax :- <apex:page standardcontroller = “contact” extensions = “Testclass1, Testclass2″></apex:page>
Components (System) : Components are the syntaxes used in Visual Force page to control various functionality and
visual appearance of data or objects . Salesforce provides a library of standard, pre-built components, such as
<apex:relatedList> and <apex:dataTable>, that can be used to develop Visualforce pages.
<apex:page> : A single Visualforce page. All pages must be wrapped inside a single page component tag.
Sample page
<apex:page >
<h1>Hey Hi, This is my first Page</h1>
</apex:page>
Output as PDF
<apex:page renderAs="pdf">
<style> body { font-family: 'Arial Unicode MS'; } </style>
<h1>Congratulations</h1>
<p>This is your new PDF</p>
</apex:page>
<apex:pageBlock> : To divide the VF page in block. An area of a page that uses styling similar to the appearance of a
Salesforce detail page, but without any default content.
Eg :
<apex:page standardController="Account">
<apex:pageBlock title="General Information" >
</apex:pageBlock>
</apex:page>
<apex:pageBlockSection> : To divide VF Page Block into sections. A section of data within an < apex:pageBlock >
component, similar to a section in a standard Salesforce page layout definition.
Eg :
<apex:page standardController="Account">
<apex:pageBlock title="General Information" >
<apex:pageBlockSection title="Contact Information" columns="2">
</apex:pageBlockSection>
</apex:pageBlock>
</apex:page>
<apex:pageBlockSectionItem> : To bind two components together. A single piece of data in an < apex:pageBlockSection >
that takes up one column in one row. An < apex:pageBlockSectionItem > component can include up to two child
components.
Eg :
<apex:page standardController="Account">
<apex:pageBlock title="General Information" >
<apex:pageBlockSection title="Contact Information" columns="2">
<apex:pageBlockSectionItem>
<apex:outputLabel value="Account Name" for="account name"/>
<apex:inputText value="{!account.name}" id="account name"/>
</apex:pageBlockSectionItem>
</apex:pageBlockSection>
</apex:pageBlock>
</apex:page>
< apex:column > : A single column in a table. An < apex:column > component must always be a child of an <
apex:dataTable > or < apex:pageBlockTable > component.
Eg:
<apex:page standardController="Account">
<apex:pageBlock title="My Content">
<apex:pageBlockTable value="{!account.Contacts}" var="item">
<apex:column value="{!item.name}"/>
<apex:column value="{!item.phone}"/>
</apex:pageBlockTable>
</apex:pageBlock>
</apex:page>
<apex:commandButton> : A button that is rendered as an HTML input element with the type attribute set to submit, reset,
or image, depending on the <apex:commandButton> tag's specified values. The button executes an action defined by a
controller, and then either refreshes the current page, or navigates to a different page based on the PageReference
variable that is returned by the action.
Eg:
<apex:commandButton action="{!save}" value="Save" id="theButton"/>
<apex:commandLink> : A link that executes an action defined by a controller, and then either refreshes the current page,
or navigates to a different page based on the PageReference variable that is returned by the action. An <
apex:commandLink > component must always be a child of an < apex:form > component.
Eg:
<apex:commandLink action="{!save}" value="Save" id="theCommandLink"/>
<apex:dataList> : An ordered or unordered list of values that is defined by iterating over a set of data. The body of the <
apex:dataList > component specifies how a single item should appear in the list. The data set can include up to 1,000
items.
Eg:
<apex:page standardController="Account">
<apex:dataList value="{!account.Contacts}" var="a">
<apex:outputText value="{!a.LastName}"/>
</apex:dataList>
</apex:page>
<apex:dataTable>: An HTML table that’s defined by iterating over a set of data, displaying information about one item of
data per row. The body of the <apex:dataTable> contains one or more column components that specify what information
should be displayed for each item of data. The data set can include up to 1,000 items, or 10,000 items when the page is
executed in read-only mode.
Eg:
<apex:dataTable value="{!account.contacts}" border="3" var="a" >
<apex:column>
<apex:facet name="header" >Cust First Name</apex:facet>
{!a.Firstname}
</apex:column>
<apex:column >
<apex:facet name="header">Cust Last Name</apex:facet>
{!a.LastName}
</apex:column>
<apex:column value=" {!a.email}" style="background-color: Grey;font-size: 40px;"/>
</apex:dataTable>
<apex:detail> : The standard detail page for a particular object, as defined by the associated page layout for the object in
Setup. This component includes attributes for including or excluding the associated related lists, related list hover links,
and title bar that appear in the standard Salesforce application interface.
Eg:
<apex:pageBlock title="Finance Informaiton">
<apex:pageBlockSection>
<apex:detail />
</apex:pageBlockSection>
</apex:pageBlock>
<apex:enhancedList> : The list view picklist for an object, including its associated list of records for the currently selected
view. In standard Salesforce applications this component is displayed on the main tab for a particular object. This
component has additional attributes that can be specified, such as the height and rows per page, as compared to <
apex:listView >.
Eg:
<apex:page>
<apex:enhancedList type="Account" height="300" rowsPerPage="10" id="AccountList" />
<apex:enhancedList type="Lead" height="300" rowsPerPage="25" id="LeadList" customizable="False" />
</apex:page>
<apex:facet> : A placeholder for content that's rendered in a specific part of the parent component, such as the header or
footer of an <apex:dataTable>.
Eg:
<apex:dataTable value="{!account.contacts}" border="3" var="a" >
<apex:column>
<apex:facet name="header" >Cust First Name</apex:facet>
{!a.Firstname}
</apex:column>
<apex:column >
<apex:facet name="header">Cust Last Name</apex:facet>
{!a.LastName}
</apex:column>
<apex:column value=" {!a.email}" style="background-color: Grey;font-size: 40px;"/>
</apex:dataTable>
<apex:flash> : A Flash movie, rendered with the HTML object and embed tags. Eg:
<apex:page sidebar="false" showheader="false">
<apex:flash src="http://www.adobe.com/devnet/flash/samples/drawing_1/1_coordinates.swf" height="300"
width="100%" />
</apex:page>
<apex:form> : A section of a Visualforce page that allows users to enter input and then submit it with an <
apex:commandButton > or < apex:commandLink >. The body of the form determines the data that is displayed and the
way it's processed. It's a best practice to use only one < apex:form > tag in a page or custom component.
Eg:
<apex:form >
<apex:pageBlock >
<apex:pageBlockSection columns="1" >
<apex:inputField value="{!Account.Name}"/>
<apex:inputField value="{!Account.Phone}"/>
<apex:inputField value="{!Account.Sic}"/>
<apex:inputField value="{!Account.fax}"/>
<apex:inputField value="{!Account.Industry}"/>
<apex:inputField value="{!Account.description}"/>
<apex:inputField value="{!Account.Rating}"/>
<apex:inputField value="{!Account.Billingcity}"/>
<apex:inputField value="{!Account.Billingcountry}"/>
<apex:inputHidden value="{!Account.BillingCity}"/>
<apex:inputSecret value="{!Account.Password c}"/>
<apex:selectRadio label="Course Available" layout="pageDirection" >
<apex:selectOption itemValue="SFDC" itemLabel="SFDC"/>
<apex:selectOption itemValue="AWS" itemLabel="AWS"/>
<apex:selectOption itemValue="DotNET" itemLabel="DotNET"/>
<apex:selectOption itemValue="Java" itemLabel="Java"/>
</apex:selectRadio>
</apex:selectCheckboxes>
<apex:iframe>: A component that creates an inline frame within a Visualforce page. A frame allows you to keep some
information visible while other information is scrolled or replaced.
Eg:
<apex:iframe src="http://www.salesforce.com" scrolling="true" id="theIframe"/>
<apex:image> : A graphic image, rendered with the HTML < img > tag.
Eg:
<apex:image id="theImage" value="{!$Resource.myResourceImage}" width="200" height="200" alt="Description of
image here"/>
<apex:include>:A component that inserts a second Visualforce page into the current page. Eg:
<apex:page>
<apex:include pageName="include"/>
</apex:page>
<apex:includeScript> : A link to a JavaScript library that can be used in the Visualforce page. When specified, this
component injects a script reference into the <head> element of the generated HTML page.
Eg:
<apex:includeScript value="{!$Resource.example_js}"/>
<apex:inlineEditSupport> : This component provides inline editing support to < apex:outputField > and various container
components. In order to support inline editing, this component must also be within an < apex:form > tag.
Eg:
<apex:page standardController="Contact">
<apex:form >
<apex:pageBlock mode="inlineEdit">
<apex:pageBlockButtons >
<apex:commandButton action="{!edit}" id="editButton" value="Edit"/>
<apex:commandButton action="{!save}" id="saveButton" value="Save"/>
<apex:commandButton onclick="resetInlineEdit()" id="cancelButton" value="Cancel"/>
</apex:pageBlockButtons>
<apex:pageBlockSection >
<apex:outputField value="{!contact.lastname}">
<apex:inlineEditSupport showOnEdit="saveButton, cancelButton" hideOnEdit="editButton" event="ondblclick"
changedStyleClass="myBoldClass" resetFunction="resetInlineEdit"/>
</apex:outputField>
<apex:outputField value="{!contact.accountId}"/>
<apex:outputField value="{!contact.phone}"/>
</apex:pageBlockSection>
</apex:pageBlock>
</apex:form>
</apex:page>
<apex:input> : This component is to get user input for a controller property or method that does not correspond to a field
on a Salesforce object.
Eg:
<apex:input value="{!inputValue}" id="theTextInput"/>
<apex:inputField> : An HTML input element for a value that corresponds to a field on a Salesforce object.
Eg:
<apex:page standardController="Account">
<apex:form>
<apex:pageBlock title="My Content" mode="edit">
<apex:pageBlockButtons>
<apex:commandButton action="{!save}" value="Save"/>
</apex:pageBlockButtons>
<apex:pageBlockSection title="My Content Section" columns="2">
<apex:inputField value="{!account.name}"/>
<apex:inputField value="{!account.site}"/>
</apex:pageBlockSection>
</apex:pageBlock>
</apex:form>
</apex:page>
<apex:inputHidden> : An HTML input element of type hidden, that is, an input element that is invisible to the user. Use this
component to pass variables from page to page.
Eg: <apex:inputHidden value="{!inputValue}" id="theHiddenInput"/>
<apex:listViews>: The list view picklist for an object, including its associated list of records for the currently selected
view. In standard Salesforce applications this component is displayed on the main tab for a particular object.
Eg: <apex:ListViews type="Case" />
<apex:message>: A message for a specific component, such as a warning or error. If an < apex:message > or <
apex:messages > component is not included in a page, most warning and error messages are only shown in the debug log.
<apex:panelGrid> : Renders an HTML table element in which each component found in the body of the < apex:panelGrid >
is placed into a corresponding cell in the first row until the number of columns is reached.
Eg:
<apex:page>
<apex:panelGrid columns="3" id="theGrid">
<apex:outputText value="First" id="theFirst"/>
<apex:outputText value="Second" id="theSecond"/>
<apex:outputText value="Third" id="theThird"/>
<apex:outputText value="Fourth" id="theFourth"/>
</apex:panelGrid>
</apex:page>
<apex:panelGroup>: A container for multiple child components so that they can be displayed in a single panelGrid cell. An
< apex:panelGroup > must be a child component of an < apex:panelGrid >.
Eg:
<apex:page>
<apex:panelGrid columns="3" id="theGrid">
<apex:outputText value="First" id="theFirst"/>
<apex:outputText value="Second" id="theSecond"/>
<apex:panelGroup id="theGroup">
<apex:outputText value="Third" id="theThird"/>
<apex:outputText value="Fourth" id="theFourth"/>
</apex:panelGroup>
</apex:panelGrid>
</apex:page>
<apex:param>: A parameter for the parent component. The < apex:param > component can only be a child of the
following components:< apex:actionFunction >, < apex:actionSupport >,< apex:commandLink >,< apex:outputLink
>,< apex:outputText >
Eg:
<apex:page standardController="Contact">
<apex:outputLink value="http://google.com/search"> Search Google
<apex:param name="q" value="{!contact.name}"/>
</apex:outputLink>
</apex:page>
<apex:relatedList> : A list of Salesforce records that are related to a parent record with a lookup or master-detail
relationship.
Eg: <apex:relatedList list="Opportunities" />
<apex:repeat> : An iteration component that allows you to output the contents of a collection according to a structure
that you specify. The collection can include up to 1,000 items.
Eg:
<apex:page standardController="Account" id="thePage">
<apex:repeat value="{!Account.contacts}" var="C" id="theRepeat">
<apex:outputText value="{!C}" id="theValue"/><br/>
</apex:repeat>
</apex:page>
<apex:sectionHeader>: A title bar for a page. In a standard Salesforce page, the title bar is a colored header displayed
directly under the tab bar.
Eg:
<apex:page standardController="Opportunity" tabStyle="Opportunity" sidebar="false">
<apex:sectionHeader title="One of Your Opportunities" subtitle="Exciting !"/>
<apex:detail subject="{!opportunity.ownerId}" relatedList="false" title="false"/>
</apex:page>
<apex:selectOption> : A possible value for an < apex:selectCheckboxes > or < apex:selectList > component. The <
apex:selectOption > component must be a child of one of those components.
Eg:
<apex:selectCheckboxes label="Course Name" layout="pageDirection">
<apex:selectOption itemValue="SFDC" ITEMLabel="SFDC"/>
<apex:selectOption itemValue="AWS" ITEMLabel="aws"/>
<apex:selectOption itemValue="Java" ITEMLabel="Java"/>
</apex:selectCheckboxes>
<apex:selectRadio> : A set of related radio button input elements, displayed in a table. Unlike checkboxes, only one radio
button can ever be selected at a time.
Eg:
<apex:selectRadio label="Course Available" layout="pageDirection" >
<apex:selectOption itemValue="SFDC" itemLabel="SFDC"/>
<apex:selectOption itemValue="AWS" itemLabel="AWS"/>
<apex:selectOption itemValue="DotNET" itemLabel="DotNET"/>
<apex:selectOption itemValue="Java" itemLabel="Java"/>
</apex:selectRadio>
<apex:stylesheet> : A link to a stylesheet that can be used to style components on the Visualforce page. When specified,
this component injects the stylesheet reference into the head element of the generated HTML page.
Eg: <apex:stylesheet value="/resources/htdocs/css/basic.css"/>
<apex:tab> : A single tab in an < apex:tabPanel >. The < apex:tab > component must be a child of a < apex:tabPanel
>.
Eg:
<apex:page id="thePage">
<apex:tabPanel switchType="client" selectedTab="name2" id="theTabPanel">
<apex:tab label="One" name="name1" id="tabOne">content for tab one</apex:tab>
<apex:tab label="Two" name="name2" id="tabTwo">content for tab two</apex:tab>
</apex:tabPanel>
</apex:page>
<apex:tabPanel> : A page area that displays as a set of tabs. When a user clicks a tab header, the tab's associated
content displays, hiding the content of other tabs.
Eg:
<apex:page id="thePage">
<apex:tabPanel switchType="client" selectedTab="name2" id="theTabPanel">
<apex:tab label="One" name="name1" id="tabOne">content for tab one</apex:tab>
<apex:tab label="Two" name="name2" id="tabTwo">content for tab two</apex:tab>
</apex:tabPanel>
</apex:page>
<apex:actionPoller> : A timer that sends an AJAX request to the server according to a time interval that you specify. Each
request can result in a full or partial page update. An < apex:actionPoller > must be within the region it acts upon. For
example, to use an < apex:actionPoller > with an < apex:actionRegion >, the < apex:actionPoller > must be within the <
apex:actionRegion >.
Eg:
<apex:page controller="exampleCon">
<apex:form>
<apex:outputText value="Watch this counter: {!count}" id="counter"/>
<apex:actionPoller action="{!incrementCounter}" reRender="counter" interval="15"/>
</apex:form>
</apex:page>
<apex:actionRegion> : An area of a Visualforce page that demarcates which components should be processed by the
Salesforce server when an AJAX request is generated. Only the components in the body of the < apex:actionRegion > are
processed by the server, thereby increasing the performance of the page.
<apex:component> : A custom Visualforce component. All custom component definitions must be wrapped inside a
single < apex:component > tag.
Eg: Given Below
<apex:attribute> : A definition of an attribute on a custom component. The attribute tag can only be a child of a
component tag.
Eg: Given Below
Components (Custom) : Developers can define custom components as per requirement and can be used in VF pages. Eg
:
Create a custom component
<apex:component >
<apex:attribute name="textValue" description="This is the value for the component" type="String" required="true"/>
<apex:attribute name="textColor" description="This is color for the border." type="String" required="true"/>
<apex:outputText value="{!textValue}" style="color:{!textColor};"/>
</apex:component>
Use in VF Pages
<apex:page >
<c:Rupom textValue="This Text is blue" textColor="blue" />
<c:Rupom textValue="But this is red" textColor="red" />
</apex:page>
Practical/Lab Task 1
Creating VF Page
Create VF Page
Practical/Lab Task 2
Practical/Lab Task 3
Creating VF Page
Practical/Lab Task 4
Creating VF Page
Create SFDC Login page with APEX Visualforce and CSS
Visualforce Limits
Limit Value
Maximum response size for a Visualforce page Less than 15 MB
Maximum view state size in a Visualforce page 170KB
Maximum size of a Visualforce email template 1 MB
Maximum file size for a file uploaded using a Visualforce page 10 MB
Maximum size of HTML response before rendering, when Visualforce page is rendered Less than 15 MB
as PDF
Maximum PDF file size for a Visualforce page rendered as a PDF 60 MB
Maximum total size of all images included in a Visualforce page rendered as a PDF 30 MB
Maximum request size of a JavaScript remoting call 4 MB
Maximum response size of a JavaScript remoting call 15 MB
Default timeout for a JavaScript remoting call 30,000 milliseconds (30 seconds)
Maximum timeout for a JavaScript remoting call 120,000 milliseconds (120 seconds)
Maximum rows retrieved by queries for a single Visualforce page request 50,000
Maximum rows retrieved by queries for a single Visualforce page request in read- only 1,000,000
mode
Maximum collection items that can be iterated in an iteration component such 1,000
as <apex:pageBlockTable> and <apex:repeat>
Maximum collection items that can be iterated in an iteration component such 10,000
as <apex:pageBlockTable> and <apex:repeat> in read-only mode
Maximum field sets that can be displayed on a single Visualforce page. 50
––