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

Miscellaneous Visualforce
<apex:selectCheckboxes>,
<apex:selectOptions> These components provide Visualforce messages, iteration, and
<apex:selectRadio>, or
<apex:selectList> components. 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 Sites
CRUD and other screens have a standard look and feel. The following Sites is based on Visualforce pages, and the following tags provide
components generate output that conforms to that look and feel: additional functionality:
Used to integrate Google
The standard detail page for a <site:googleAnalyticsTracking>
<apex:detail> Analytics.
particular object.
Shows detailed messages
The list view picklist for an object, <site:previewAsAdmin> in administrator
<apex:enhancedList> including its associated list of preview mode.
records.
The list view picklist for an object,
<apex:listViews>
including its associated list of records.
Messaging
A list of records that are related to
<apex:relatedList> a parent record with a lookup or Visualforce can also be used to create email templates:
master-detail relationship. Appends an attachment
<messaging:attachment>
to the email.
<apex:pageBlock> Defines a visual block within a page.
Adds a custom header to
<apex:pageBlockButtons> Defines buttons related to a block. <messaging:emailHeader>
the email.
A section of data within a Defines a Visualforce email
<apex:pageBlockSection> <messaging:emailTemplate>
<apex:pageBlock> component. template.
A single piece of data in a The HTML version of the
<apex:page <messaging:htmlEmailBody>
<apex:pageBlockSection> that email body.
BlockSectionItem>
takes up one column in one row. The plain text (non-HTML)
<messaging:plainTextEmailBody>
A list of data displayed version of the email body.
as a table within either a
<apex:pageBlockTable> <apex:pageBlock> or
<apex:pageBlockSection>
component. Ideas
<apex:pageMessage> Displays custom messages. Applications that integrate Ideas have additional components
available:
Displays all messages that were
A link to the page
<apex:pageMessages> generated for all components on <ideas:detailOutputLink>
displaying an idea.
the page.
A link to the page
A page area that includes one or <ideas:listOutputLink>
displaying a list of ideas.
<apex:panelBar> more <apex:panelBarItem>
tags that can expand. A link to the page
<ideas:profileListOutputLink>
displaying a user's profile.
A section of a <apex:panelBar>
<apex:panelBarItem>
that can expand or collapse.
<apex:sectionHeader> A title bar for a page.
Maps
<apex:tab> A single tab in a <apex:tabPanel>. Add interactive maps to your pages with these components:
A page area that displays as a set Adds an interactive, JavaScript-based
<apex:tabPanel> <apex:map>
of tabs. map to the page.
A toolbar that can contain any <apex:mapMarker> Adds a marker to a location on the map.
<apex:toolbar>
number of child components. Adds a pop-up info window to a
<apex:mapInfoWindow>
marker on a map.
A group of components within
<apex:toolbarGroup>
a toolbar.

Knowledge
Custom Components You can embed Knowledge functionality on your pages:
UI component used
Create your own components that will reside in the c namespace, <knowledge:articleCaseToolbar> when an article is opened
for example <c:helloWorld/>: from the case detail page.
<knowledge:articleList> A loop on a filtered list
<apex:component> The outer tag that starts the of articles.
definition of a component.
<knowledge:article Displays a header toolbar
<apex:attribute> A definition of a typed attribute RendererToolbar> for an article.
on a custom component. <knowledge:articleTypeList> A loop on all available
article types.
<apex:componentBody> A place holder for content
<knowledge:categoryList> A loop on a subset of
injected into a component. the category hierarchy.
Visualforce Cheatsheet

Chatter Global Variables

Add Chatter UI widgets: These reference general information about the current user and
your organization on a Visualforce page:
Displays the Chatter feed for
<chatter:feed> Reference standard actions
a record. $Action
on objects.
An integrated UI component
Refer to API URLs or sessions
that displays the Chatter feed $API
<chatter:feedWithFollowers> IDs.
for a record, as well as its list
of followers.
Reference a component from
$Component
within, for example, JavaScript.
Renders a button for a user to
<chatter:follow> follow or unfollow a Chatter
Reference name, parameters,
record. $CurrentPage
URL of current page.

Displays the list of Chatter $Label References a custom label.

<chatter:followers>
followers for a record.
$ObjectType Access metadata of objects.

Access information about the

$Organization
Visual Workflow company profile.

Components that present your process visual workflow: The way to reference a
$Page
Visualforce page.
<flow:interview> Embeds a Flow interview in
the page. Used for accessing static
$Resource
resources.

Reference site information,

$Site
such as domain name.
Apex Support
Represents the literal value of
Here are Apex classes, available in the ApexPages namespace, $System.OriginDateTime
1900-01-01 00:00:00.
which can be used to reference Visualforce functionality:
Information about the current
Create and invoke actions $User
Action user.
on an object.
The current user's role
Create messages to be $UserRole
Message information.
displayed, usually for errors.
$Profile The current user's profile.
A reference to a
PageReference
Visualforce page.

Specifies one of the

possible values for the Static Resources
SelectOption
selectCheckboxes, selectList,
Upload static resources, such as stylesheets and images, into a
or selectRadio components.
zip, and then reference them using the URLFOR function and
the $Resource global variable. For example, if youve uploaded
Reference the standard images/Blue.jpg in an archive static resource called TestZip,
StandardController
Visualforce controllers. reference it like this:

Reference standard set <apex:image

StandardSetController
controllers for iteration. url="{!URLFOR($Resource.TestZip,'images/Blue.jpg')}"/>

For other cheatsheets:

http://developer.salesforce.com/cheatsheets 10042016