USER INTERFACE Visualforce Cheat Sheet

Overview AJAX and JavaScript

Salesforce1 platform provides Visualforce and Lightning frameworks to build custom The reRender attribute on action tags such as <apex:commandButton> lets you refresh a
applications. Visualforce uses extensible, "custom markup that ties closely with server side part of a page. The following tags provide additional AJAX and JavaScript support:
Salesforce Apex technology to allow developers to rapidly build MVC web applications.
<apex:actionFunction> Define JavaScript functions to be called from JavaScript code.
Getting Started <apex:actionPoller> A timer that sends an AJAX update request at specified interval.
Enable Developer Mode by clicking Your Name | Setup | My Personal Information | <apex:actionRegion> Defines an area in a page that demarcates which components
Personal Information | Edit. Select the Development Mode checkbox to enable an inline should be processed when AJAX requests generate.
Visualforce editor. To create a page, navigate to a URL based on your current instance, like: <apex:actionStatus> A component that displays the status of an AJAX update request.
https://<instance>.salesforce.com/apex/helloWorld <apex:actionSupport> Adds asynchronous refresh support to a component.
All Visualforce page markup lies within an <apex:page> tag. Here’s a simple page: Core Form
<apex:page showHeader="false">
Here are the core components used in forms. These should be embedded within a single
<h1>Hello World</h1> <apex:form> component on a page:
</apex:page> <apex:form> Container for input components.
All tags take an optional or required set of attributes, such as showHeader above. Use the <apex:commandButton> A form button used to submit or reset a form.
inline editor auto-completion, or the Component Reference, to determine the attributes for <apex:commandLink> An HTML link that performs an action.
components.
<apex:inputCheckbox> An HTML input element of type checkbox.
List all Visualforce pages and Apex classes by navigating to Your Name | Setup | Develop. <apex:inputField> Input element that corresponds to a field on a standard or
Example custom object.
<apex:inputFile> An input field to upload a file.
Visualforce supports auto-generated standard controllers, as well as extensions, to minimize the
amount of coding needed. Here’s an example of a Visualforce page that uses a custom controller: <apex:inputHidden> An HTML input element of type hidden.
<apex:inputSecret> An HTML input element of type password.
<apex:page showHeader="false" controller="Hello"> <apex:inputText> An HTML input element of type text.
<apex:form> <apex:inputTextArea> An HTML input element of type text area.
<apex:inputText value="{!theText}"/>
<apex:commandButton value="Go"> <apex:selectList> A list of options for radio buttons or checkboxes.
action="{!action}" reRender="dynamic"/> <apex:selectRadio> A set of related radio button input elements, displayed in a table.
</apex:form> <apex:selectOption> A possible value for the <apex:selectCheckboxes> or
<apex:outputPanel id="dynamic"> <apex:selectList> components.
{!theText} <apex:selectCheckboxes> A set of related checkbox input elements, displayed in a table.
</apex:outputPanel>
</apex:page> <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 Core Output
duplicates the input. The page renders the result using an AJAX update. Here’s the controller: Mirroring many of the Core Form Components, these components are used for outputting text:
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.
public PageReference action() {
theText = theText + theText; <apex:outputLink> A link to a URL.
return null; <apex:outputPanel > A set of content that is grouped together, rendered with an
} HTML <span> tag, <div> tag, or neither.
<apex:outputText> Displays styled or escaped text in a page.
public String theText {get;set;}
} Tables and Lists Output
These components are used to generate tables or lists by iterating over a collection:
Core Tags
<apex:dataTable> An HTML table.
Here are core tags that often make up a Visualforce page:
<apex:column> A single column in a table.
<apex:page> The obligatory outer tag. <apex:dataList> An ordered or unordered list of values.
<apex:facet> A placeholder for content that is rendered in a specific part of
<apex:includeScript> A link to a JavaScript library, often in a static resource.
the parent component.
<apex:stylesheet> A link to a CSS stylesheet, often in a static resource. <apex:panelGrid> An HTML table element that lays out its components in
consecutive cells.

Template System <apex:panelGroup> A container for multiple child components so that they can be
displayed in a single panelGrid cell.
Template components let you create Visualforce pages that act as templates, having named
areas—inserts—that must be filled when the template is used. 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:define> Provides content for the inserts.
<apex:image> A graphical image, rendered with an img tag.

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> <ideas:detailOutputLink> A link to the page displaying an idea.

An unformatted iteration component.
<ideas:listOutputLink> A link to the page displaying a list of ideas.
<apex:message> A message for a specific component, such as a warning or error.
<ideas:profileListOutputLink> A link to the page displaying a user's profile.
<apex:messages> All messages that were generated for all components on the
current page. Knowledge
<apex:include> Inserts a second Visualforce page into the current page.
You can embed Knowledge functionality on your pages:
<apex:param> Lets parameters be fed into other components.
<knowledge:articleCaseToolbar> UI component used when an article is opened
<apex:scontrol> An inline frame that displays an s-control. from the case detail page.
<apex:variable> A local variable representing an expression. <knowledge:articleList> A loop on a filtered list of articles.
<knowledge:articleRendererToolbar> Displays a header toolbar for an article.
Default Look and Feel <knowledge:articleTypeList> A loop on all available article types.
CRUD and other screens have a standard look and feel. The following components <knowledge:categoryList> A loop on a subset of the category hierarchy.
generate output that conforms to that look and feel:
<apex:detail> The standard detail page for a particular object.
Chatter
Add Chatter UI widgets:
<apex:enhancedList> The list view picklist for an object, including its associated
list of records. <chatter:feed> Displays the Chatter feed for a record.
<apex:listViews> The list view picklist for an object, including its associated <chatter:feedWithFollowers> An integrated UI component that displays the Chatter feed
list of records. for a record, as well as its list of followers.
<apex:relatedList> A list of records that are related to a parent record with a <chatter:follow> Renders a button for a user to follow or unfollow a
lookup or master-detail relationship. Chatter record.
<apex:pageBlock> Defines a visual block within a page. <chatter:followers> Displays the list of Chatter followers for a record.
<apex:pageBlockButtons> Defines buttons related to a block.
<apex:pageBlockSection> A section of data within a <apex:pageBlock> component.
Workflow
Components that present your process workflow:
<apex:pageBlockSectionItem> A single piece of data in a <apex:pageBlockSection> that
takes up one column in one row. <flow:interview> Embeds a Flow interview in the page.
<apex:pageBlockTable> A list of data displayed as a table within either a
<apex:pageBlock> or <apex:pageBlockSection> component. Global Variables
<apex:pageMessage> Displays custom messages. These reference general information about the current user and your organization on a
<apex:pageMessages> Displays all messages that were generated for all Visualforce page:
components on the page. $Action Reference standard actions on objects.
<apex:panelBar> A page area that includes one or more $API Refer to API URLs or sessions IDs.
<apex:panelBarItem> tags that can expand.
$Component Reference a component from within, for example, JavaScript.
<apex:panelBarItem> A section of a <apex:panelBar> that can expand or collapse.
$CurrentPage Reference name, parameters, URL of current page.
<apex:sectionHeader> A title bar for a page.
$Label References a custom label.
<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.
<apex:toolbar> A toolbar that can contain any number of child components. $Page The way to reference a Visualforce page.
<apex:toolbarGroup> $Resource Used for accessing static resources.
A group of components within a toolbar.
$SControl References an existing custom s-control by name.
Custom Components $Site Reference site information, such as domain name.
Create your own components that will reside in the c namespace, for example $System.OriginDateTime Represents the literal value of 1900-01-01 00:00:00.
<c:helloWorld/>: $User Information about the current user.
<apex:component> The outer tag that starts the definition of a component. $UserRole The current user's role information.
<apex:attribute> $Profile The current user's profile.
A definition of a typed attribute on a custom component.
<apex:componentBody>
A place holder for content injected into a component. Static Resources
Sites 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 you’ve uploaded
Sites is based on Visualforce pages, and the the following tags provide additional functionality: images/Blue.jpg into a zip called TestZip, reference it like this:
<apex:includeScript value="{!$Resource.jquery}"/>
<site:googleAnalyticsTracking> Used to integrate Google Analytics.
<site:previewAsAdmin> Shows detailed messages in administrator preview mode.
Apex Support
Messaging Here are Apex classes, available in the ApexPages namespace, which can be used to
reference Visualforce functionality:
Visualforce can also be used to create email templates:
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 Specifies one of the possible values for the selectCheckboxes,
selectList, or selectRadio components.
<messaging:htmlEmailBody> The HTML version of the email body.
StandardController Reference the standard Visualforce controllers.
<messaging:plainTextEmailBody> The plain text (non-HTML) version of the email body.
StandardSetController Reference standard set controllers for iteration.

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