Visualforce

Cheatsheet

Overview
Visualforce is a user interface framework with automatic data bindings and API access to Salesforce. It allows developers to rapidly build sophisticated
Model-View-Controller web applications and custom user interfaces, hosted natively on the Force.com platform.

Getting Started Core Tags

Turn on Development Mode to enable an inline Visualforce editor. Here are core tags that often make up a Visualforce page:
From your personal settings, enter Advanced in the Quick Find box,
then select Advanced User Details. <apex:page> The obligatory outer tag.
Enable the Development Mode checkbox and save.
A link to a JavaScript library, often in a
All Visualforce page markup lies within an <apex:page> tag. <apex:includeScript>
static resource.
Heres a simple page:
<apex:page showHeader="false"> A link to a CSS stylesheet, often in a
<apex:stylesheet>
<h1>Hello World</h1> static resource.
</apex:page>
All tags take an optional or required set of attributes, such as
showHeader above. Use the inline editor auto-completion, or the
Component Reference, to determine the attributes for components. Template System
List all Visualforce pages and Apex classes by navigating to Template components let you create Visualforce pages that act as
Developor Custom Code in Setupwhichever one appears. templates, having named areas, inserts that must be filled when
the template is used.

Declares a named area that must be

<apex:insert>
defined.

Example <apex:composition> Adds the defined template.

Visualforce supports auto-generated standard controllers, as well as <apex:define> Provides content for the inserts.
extensions, to minimize the amount of coding needed. Heres an
example of a Visualforce page that uses a custom controller:
<apex:page showHeader="false" controller="Hello">
<apex:form> Ajax and JavaScript
<apex:inputText value="{!theText}"/>
<apex:commandButton value="Go"> The reRender attribute on action tags such as
<apex:commandButton> lets you refresh a part of a page.
action="{!action}" reRender="dynamic"/>
The following tags provide additional AJAX and JavaScript support:
</apex:form>
<apex:outputPanel id="dynamic">
Define JavaScript functions to be called
{!theText} <apex:actionFunction>
from JavaScript code.
</apex:outputPanel>
</apex:page>
A timer that sends an AJAX update
<apex:actionPoller>
This Visualforce page displays an input field and a button labeled Go. request at specified interval.
When clicked, it sends the value of the field to the controller, which
performs an action on it. Here, it duplicates the input. The page renders
Defines an area in a page that
the result using an AJAX update. Heres the controller:
demarcates which components
<apex:actionRegion>
public class Hello { should be processed when AJAX
public PageReference action() { requests generate.
theText = theText + theText;
return null; A component that displays the status
} <apex:actionStatus>
of an AJAX update request.
public String theText {get;set;}
}
Adds asynchronous refresh support
<apex:actionSupport>
to a component.
Visualforce Cheatsheet

Core Form Components Tables and List Output

Here are the core components used in forms. These should be These components are used to generate tables or lists by iterating
embedded within a single <apex:form> component on a page: over a collection:
<apex:form> Container for input components.
<apex:dataTable> An HTML table.
A form button used to submit or
<apex:commandButton>
reset a form.
<apex:column> A single column in a table.
An HTML link that performs an
<apex:commandLink>
action. <apex:dataList> An ordered or unordered list of values.

An HTML input element of type

<apex:inputCheckbox> A placeholder for content that is
checkbox.
<apex:facet> rendered in a specific part of
Input element that corresponds the parent component.
<apex:inputField> to a field on a standard or
custom object. An HTML table element that lays out
<apex:panelGrid>
its components in consecutive cells.
<apex:inputFile> An input field to upload a file.

An HTML input element of A container for multiple child

<apex:inputHidden> <apex:panelGroup>
type hidden. components so that they can be
displayed in a single panelGrid cell.
An HTML input element of
<apex:inputSecret>
type password.

An HTML input element of

<apex:inputText> Miscellaneous HTML
type text.

An HTML input element of These components generate HTML for embedding flash, iframes
<apex:inputTextArea>
type text area. and images:

A list of options for radio buttons or

<apex:selectList> A Flash movie, rendered with object
checkboxes. <apex:flash>
and embed tags.
A set of related radio button input
<apex:selectRadio>
elements, displayed in a table. <apex:iframe> Creates an iframe in a page.

A possible value for the

<apex:selectOption> <apex:selectCheckboxes> or A graphical image, rendered with an
<apex:image>
<apex:selectList> components. img tag.

A set of related checkbox input

<apex:selectCheckboxes>
elements, displayed in a table.

A collection of values for the

<apex:selectCheckboxes>,
<apex:selectOptions>
<apex:selectRadio>, or
<apex:selectList> components.
Miscellaneous Visualforce
These components provide Visualforce messages, iteration, and
include functionality:

<apex:repeat> An unformatted iteration component.

Core Output <apex:message>

A message for a specific component,
such as a warning or error.
Mirroring many of the Core Form Components, these components
are used for outputting text:
All messages that were generated for
A read-only display of a label and <apex:messages>
<apex:outputField> all components on the current page.
value for fields on custom objects.

<apex:outputLabel> A label for an input or output field. <apex:include>

Inserts a second Visualforce page into
the current page.
<apex:outputLink> A link to a URL.
A set of content that is grouped Lets parameters be fed into other
<apex:param>
<apex:outputPanel> together, rendered with an HTML components.
<span> tag, <div> tag, or neither.
Displays styled or escaped text in A local variable representing an
<apex:outputText> <apex:variable>
a page. expression.
Default Look and Feel
CRUD and other screens have a standard look and feel. The following
components generate output that conforms to that look and feel:
<apex:detail>
<apex:enhancedList>
<apex:listViews>
<apex:relatedList>
<apex:pageBlock>
<apex:pageBlockButtons>
<apex:pageBlockSection>
<apex:page
BlockSectionItem>
<apex:pageBlockTable>
<apex:pageMessage>
<apex:pageMessages>
<apex:panelBar>
<apex:panelBarItem>
<apex:sectionHeader>
<apex:tab>
<apex:tabPanel>
<apex:toolbar>
<apex:toolbarGroup>
Custom Components
Create your own components that will reside in the c namespace,
for example <c:helloWorld/>:
<apex:component>
<apex:attribute>
<apex:componentBody>
The standard detail page for a
particular object.
The list view picklist for an object,
including its associated list of
records.
The list view picklist for an object,
including its associated list of records.
A list of records that are related to
a parent record with a lookup or
master-detail relationship.
Defines a visual block within a page.
Defines buttons related to a block.
A section of data within a
<apex:pageBlock> component.
A single piece of data in a
<apex:pageBlockSection> that
takes up one column in one row.
A list of data displayed
as a table within either a
<apex:pageBlock> or
<apex:pageBlockSection>
component.
Displays custom messages.
Displays all messages that were
generated for all components on
the page.
A page area that includes one or
more <apex:panelBarItem>
tags that can expand.
A section of a <apex:panelBar>
that can expand or collapse.
A title bar for a page.
A single tab in a <apex:tabPanel>.
A page area that displays as a set
of tabs.
A toolbar that can contain any
number of child components.
A group of components within
a toolbar.
The outer tag that starts the
definition of a component.
A definition of a typed attribute
on a custom component.
A place holder for content
injected into a component.
Sites
Sites is based on Visualforce pages, and the following tags provide
additional functionality:
<site:googleAnalyticsTracking>
<site:previewAsAdmin>
Messaging
Visualforce can also be used to create email templates:
<messaging:attachment>
<messaging:emailHeader>
<messaging:emailTemplate>
<messaging:htmlEmailBody>
<messaging:plainTextEmailBody>
Ideas
Applications that integrate Ideas have additional components
available:
<ideas:detailOutputLink>
<ideas:listOutputLink>
<ideas:profileListOutputLink>
Maps
Add interactive maps to your pages with these components:
<apex:map>
<apex:mapMarker>
<apex:mapInfoWindow>
Knowledge
You can embed Knowledge functionality on your pages:
<knowledge:articleCaseToolbar>
<knowledge:articleList>
<knowledge:article
RendererToolbar>
<knowledge:articleTypeList>
<knowledge:categoryList>
Used to integrate Google
Analytics.
Shows detailed messages
in administrator
preview mode.
Appends an attachment
to the email.
Adds a custom header to
the email.
Defines a Visualforce email
template.
The HTML version of the
email body.
The plain text (non-HTML)
version of the email body.
A link to the page
displaying an idea.
A link to the page
displaying a list of ideas.
A link to the page
displaying a user's profile.
Adds an interactive, JavaScript-based
map to the page.
Adds a marker to a location on the map.
Adds a pop-up info window to a
marker on a map.
UI component used
when an article is opened
from the case detail page.
A loop on a filtered list
of articles.
Displays a header toolbar
for an article.
A loop on all available
article types.
A loop on a subset of
the category hierarchy.
Visualforce Cheatsheet
Chatter
Add Chatter UI widgets:
Displays the Chatter feed for
<chatter:feed>
a record.
An integrated UI component
that displays the Chatter feed
<chatter:feedWithFollowers>
for a record, as well as its list
of followers.
Renders a button for a user to
<chatter:follow> follow or unfollow a Chatter
record.
Displays the list of Chatter
<chatter:followers>
followers for a record.
Visual Workflow
Components that present your process visual workflow:
<flow:interview> Embeds a Flow interview in
the page.
Apex Support
Here are Apex classes, available in the ApexPages namespace,
which can be used to reference Visualforce functionality:
Create and invoke actions
Action
on an object.
Create messages to be
Message
displayed, usually for errors.
A reference to a
PageReference
Visualforce page.
Specifies one of the
possible values for the
SelectOption
selectCheckboxes, selectList,
or selectRadio components.
Reference the standard
StandardController
Visualforce controllers.
Reference standard set
StandardSetController
controllers for iteration.
For other cheatsheets:
http://developer.salesforce.com/cheatsheets
Global Variables
These reference general information about the current user and
your organization on a Visualforce page:
Reference standard actions
$Action
on objects.
Refer to API URLs or sessions
$API
IDs.
Reference a component from
$Component
within, for example, JavaScript.
Reference name, parameters,
$CurrentPage
URL of current page.
$Label References a custom label.
$ObjectType Access metadata of objects.
Access information about the
$Organization
company profile.
The way to reference a
$Page
Visualforce page.
Used for accessing static
$Resource
resources.
Reference site information,
$Site
such as domain name.
Represents the literal value of
$System.OriginDateTime
1900-01-01 00:00:00.
Information about the current
$User
user.
The current user's role
$UserRole
information.
$Profile The current user's profile.
Static Resources
Upload static resources, such as stylesheets and images, into a
zip, and then reference them using the URLFOR function and
the $Resource global variable. For example, if youve uploaded
images/Blue.jpg in an archive static resource called TestZip,
reference it like this:
<apex:image
url="{!URLFOR($Resource.TestZip,'images/Blue.jpg')}"/>
10042016