USER INTERFACE

Visualforce Cheat Sheet

Overview

AJAX and JavaScript

Salesforce1 platform provides Visualforce and Lightning frameworks to build custom

applications. Visualforce uses extensible, "custom markup that ties closely with server side
Salesforce Apex technology to allow developers to rapidly build MVC web applications.

The reRender attribute on action tags such as <apex:commandButton> lets you refresh a
part of a page. The following tags provide additional AJAX and JavaScript support:

Getting Started
Enable Developer Mode by clicking Your Name | Setup | My Personal Information |
Personal Information | Edit. Select the Development Mode checkbox to enable an inline
Visualforce editor. To create a page, navigate to a URL based on your current instance, like:

<apex:actionFunction>
<apex:actionPoller>
<apex:actionRegion>

https://<instance>.salesforce.com/apex/helloWorld

<apex:actionStatus>
<apex:actionSupport>

All Visualforce page markup lies within an <apex:page> tag. Heres a simple page:

Core Form

<apex:page showHeader="false">
<h1>Hello World</h1>
</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.
List all Visualforce pages and Apex classes by navigating to Your Name | Setup | Develop.

Example
Visualforce supports auto-generated standard controllers, as well as 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>
<apex:inputText value="{!theText}"/>
<apex:commandButton value="Go">
action="{!action}" reRender="dynamic"/>
</apex:form>
<apex:outputPanel id="dynamic">
{!theText}
</apex:outputPanel>
</apex:page>

Define JavaScript functions to be called from JavaScript code.

A timer that sends an AJAX update request at specified interval.
Defines an area in a page that demarcates which components
should be processed when AJAX requests generate.
A component that displays the status of an AJAX update request.
Adds asynchronous refresh support to a component.

Here are the core components used in forms. These should be embedded within a single
<apex:form> component on a page:
Container for input components.
A form button used to submit or reset a form.
An HTML link that performs an action.
An HTML input element of type checkbox.
Input element that corresponds to a field on a standard or
custom object.
<apex:inputFile>
An input field to upload a file.
<apex:inputHidden>
An HTML input element of type hidden.
<apex:inputSecret>
An HTML input element of type password.
<apex:inputText>
An HTML input element of type text.
<apex:inputTextArea>
An HTML input element of type text area.
<apex:selectList>
A list of options for radio buttons or checkboxes.
<apex:selectRadio>
A set of related radio button input elements, displayed in a table.
<apex:selectOption>
A possible value for the <apex:selectCheckboxes> or
<apex:selectList> components.
<apex:selectCheckboxes> A set of related checkbox input elements, displayed in a table.
<apex:form>
<apex:commandButton>
<apex:commandLink>
<apex:inputCheckbox>
<apex:inputField>

<apex:selectOptions>

A collection of values for the <apex:selectCheckboxes>,

<apex:selectRadio>, or <apex:selectList> components.

This Visualforce page displays an input field and a button labeled Go. 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 the result using an AJAX update. Heres the controller:

Core Output

public class Hello {

<apex:outputField>

A read-only display of a label and value for fields on custom objects.

<apex:outputLabel>

A label for an input or output field.

<apex:outputLink>

A link to a URL.

<apex:outputPanel >

A set of content that is grouped together, rendered with an

HTML <span> tag, <div> tag, or neither.
Displays styled or escaped text in a page.

public PageReference action() {

theText = theText + theText;
return null;
}
}

public String theText {get;set;}

<apex:outputText>

Tables and Lists Output

These components are used to generate tables or lists by iterating over a collection:

Core Tags
Here are core tags that often make up a Visualforce page:
<apex:page>

Mirroring many of the Core Form Components, these components are used for outputting text:

The obligatory outer tag.

<apex:includeScript>

A link to a JavaScript library, often in a static resource.

<apex:stylesheet>

A link to a CSS stylesheet, often in a static resource.

Template System
Template components let you create Visualforce pages that act as templates, having named
areasinsertsthat must be filled when the template is used.

<apex:dataTable>

An HTML table.

<apex:column>

A single column in a table.

<apex:dataList>

An ordered or unordered list of values.

<apex:facet>

A placeholder for content that is rendered in a specific part of

the parent component.

<apex:panelGrid>

An HTML table element that lays out its components in

consecutive cells.

<apex:panelGroup>

A container for multiple child components so that they can be

displayed in a single panelGrid cell.

Miscellaneous HTML

<apex:insert>

Declares a named area that must be defined.

These components generate HTML for embedding flash, iframes and images:

<apex:composition>

Adds the defined template.

<apex:flash>

A Flash movie, rendered with object and embed tags.

<apex:iframe>

Creates an iframe in a page.

<apex:image>

A graphical image, rendered with an img tag.

<apex:define>

Provides content for the inserts.

http://developer.salesforce.com

Miscellaneous Visualforce

Ideas

These components provide Visualforce messages, iteration, and include functionality:

Applications that integrate Ideas have additional components available:

<apex:repeat>

An unformatted iteration component.

<apex:message>

A message for a specific component, such as a warning or error.

<apex:messages>

All messages that were generated for all components on the

current page.

<apex:include>

Inserts a second Visualforce page into the current page.

<apex:param>

Lets parameters be fed into other components.

<apex:scontrol>

An inline frame that displays an s-control.

<apex:variable>

A local variable representing an expression.

<ideas:detailOutputLink>

A link to the page displaying an idea.

<ideas:listOutputLink>

A link to the page displaying a list of ideas.

<ideas:profileListOutputLink>

A link to the page displaying a user's profile.

Knowledge
You can embed Knowledge functionality on your pages:
<knowledge:articleCaseToolbar>

UI component used when an article is opened

from the case detail page.

<knowledge:articleList>

A loop on a filtered list of articles.

Default Look and Feel

<knowledge:articleRendererToolbar>

Displays a header toolbar for an article.

<knowledge:articleTypeList>

A loop on all available article types.

CRUD and other screens have a standard look and feel. The following components
generate output that conforms to that look and feel:

<knowledge:categoryList>

A loop on a subset of the category hierarchy.

<apex:detail>

The standard detail page for a particular object.

<apex:enhancedList>

<apex:pageBlock>

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.

<apex:pageBlockButtons>

Defines buttons related to a block.

<apex:pageBlockSection>

A section of data within a <apex:pageBlock> component.

<apex:pageBlockSectionItem>

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.

<apex:listViews>
<apex:relatedList>

<apex:pageBlockTable>
<apex:pageMessage>

Chatter
Add Chatter UI widgets:
<chatter:feed>

Displays the Chatter feed for a record.

<chatter:feedWithFollowers>

An integrated UI component that displays the Chatter feed

for a record, as well as its list of followers.

<chatter:follow>

Renders a button for a user to follow or unfollow a

Chatter record.

<chatter:followers>

Displays the list of Chatter followers for a record.

Workflow
Components that present your process workflow:
Embeds a Flow interview in the page.

<flow:interview>

Global Variables
These reference general information about the current user and your organization on a
Visualforce page:

<apex:panelBarItem>

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.

<apex:sectionHeader>

A title bar for a page.

<apex:tab>

A single tab in a <apex:tabPanel>.

$ObjectType

Access metadata of objects.

<apex:tabPanel>

A page area that displays as a set of tabs.

$Organization

Access information about the company profile.

A toolbar that can contain any number of child components.

$Page

The way to reference a Visualforce page.

A group of components within a toolbar.

$Resource

Used for accessing static resources.

$SControl

References an existing custom s-control by name.

$Site

Reference site information, such as domain name.

$System.OriginDateTime

Represents the literal value of 1900-01-01 00:00:00.

$User

Information about the current user.

<apex:pageMessages>
<apex:panelBar>

<apex:toolbar>
<apex:toolbarGroup>

Custom Components
Create your own components that will reside in the c namespace, for example
<c:helloWorld/>:

$Action

Reference standard actions on objects.

$API

Refer to API URLs or sessions IDs.

$Component

Reference a component from within, for example, JavaScript.

$CurrentPage

Reference name, parameters, URL of current page.

$Label

References a custom label.

<apex:component>
<apex:attribute>

The outer tag that starts the definition of a component.

$UserRole

The current user's role information.

A definition of a typed attribute on a custom component.

$Profile

The current user's profile.

<apex:componentBody>

A place holder for content injected into a component.

Static Resources

Sites
Sites is based on Visualforce pages, and the the following tags provide additional functionality:

Upload static resources, such as stylesheets and images, into a zip, and then reference them
using the URLFOR formula and $Resource merge field. For example, if youve uploaded
images/Blue.jpg into a zip called TestZip, reference it like this:

<site:googleAnalyticsTracking>

Used to integrate Google Analytics.

<apex:includeScript value="{!$Resource.jquery}"/>

<site:previewAsAdmin>

Shows detailed messages in administrator preview mode.

Apex Support

Messaging
Visualforce can also be used to create email templates:

Here are Apex classes, available in the ApexPages namespace, which can be used to
reference Visualforce functionality:
Action

Create and invoke actions on an object.

<messaging:attachment>

Appends an attachment to the email.

Message

Create messages to be displayed, usually for errors.

<messaging:emailHeader>

Adds a custom header to the email.

PageReference

A reference to a Visualforce page.

<messaging:emailTemplate>

Defines a Visualforce email template.

SelectOption

<messaging:htmlEmailBody>

The HTML version of the email body.

Specifies one of the possible values for the selectCheckboxes,

selectList, or selectRadio components.

<messaging:plainTextEmailBody>

The plain text (non-HTML) version of the email body.

StandardController

Reference the standard Visualforce controllers.

StandardSetController

Reference standard set controllers for iteration.

For other cheatsheets: http://developer.salesforce.com/cheatsheets

10132014