Visual Force
Introduction to Visualforce Pages
2 types of UI
Page Builder
UI generated automatically
limited/no control of UI behavior
limited control over look and feel, but all UIs are consistent
Visualforce
UI generated by developer/technologist
full control of UI behavior
full ‘pixel level’ control over UI
Visualforce & Apex
closely tied
PE/GE edition limitations prevent from authoring own apex (app exchange apps is okay)
Visualforce inline editor
auto-completion
full syntax highlighting
online doc
can be edited through force.com id
Developers can include
VF tags, Force.com expressions, HTML, Javascript, Flash
VF pages are limited to 15 MB
view State
maintains state across multiple pages or server calls
view state inspector
shows components contributing to view state
must be enabled on user profile
is displayed only when using
view state limit is 135 kb
vf pages
understand Salesforce metadata
display the same performance as statndard sf pages
are automatically upgraded to the next sf release
vf conforms to mvc development patter
MVC
Model – standard or custom object
View – pages that are presented to the end user
Controller – that determines the logic what happens initates an action such as clicking on a tab, etc.
3 key elements
Visualforce pages
design definition of an app’s user interface
implemented using standard web technologies like HTML & javascript
can dynamically detect device and associate them with specific design definitions
Visualforce components
can be standard or custom UI components
over 65 standard sf ui elements available at G
referenced via a tag library model
Visualforce controllers
ability to reuse any standard Salesforce UI behavior like new, edit, save, etc (standard controller) and have access to Salesforce data
ability to define new UI behaviors and navigation using apex (custom controller)
Visualforce Components
pre-built UI constructs which reference standard elements in the Salesforce UI
referenced in a VF page using an XML tag
dynamic visualforce components
are designed in apex
allows to create pages that render based on variety of states, such as user’s:
permissions, behavior, org preferences, data attributes
are not intended to be the primary way to create new vf pages
Controllers
contain the logic and data references a page uses
can be used to maintain state across page interactions
are refernced or used by pages, through components that call data or actions
each page can reference or use standard controller, custom controller or custom controller extensions
each vf page references one main controller
types of visualforce components
standard controllers
are available for all API entities/objects as well as custom objects
provide access to standard sf data and behavior
are referenced by using
custom controllers
are coded to create custom behaviors or non standard data sets
can be used to create wizards or leverage callouts
are invoked by using
cusom extensions
add custom behavior or additional data to standard controllers
are invoked by using
Expressions and Data Binding
uses expression syntax to bind components to sf data and actions in the page’s controllers
expressions are linked back to controller data and actions not just to sf in general
all content in {!…} evaluated as an expression
User.FirstName} shows the current user’s first name in a page
data context is provided to controllers by the ID parameter, just as in standard pages.
Versioning
backward compatible
each vf page is saved with version settigns for specified version of api as well specified version of visualforce
Visualforce namespace
standard tags begin with the word apex
custom tags begin with the letter c
user can register custom namespaces to be displayed with custom tags instead of the letter c
Incorporating VF pages in Salesforce UI by
creating links to reference the unique page URL
overriding standard buttons to route to the new page
overriding tab overview pages to use the new page
creating custom tabs for the new page
embedding pages into page layouts
adding pages to a dashboard
using pages as custom help for a custom object
Visual Force Tags
Tags
consists of library of tags
can incldue text, html, javascript tags
can’t use javascript commenting
Tag Rules
are hierarchical
must be closed in the reversed order they were opened
like xml, vf must be well-formed
VF and JSP
similar to JSP
typically begins with
all pages must be enclosed by a set of tags
components may contain attributes with values to help further define them
vf components are resolved into other code at runtime
Tag Bindings
Bindings related visual force components with the page controller or other page components
3 types of bindings
data bindings – use expression systan to pull the data from dataset made available by the page controller
action bindings – uses expression syntax to call action methods for functions coded in page controller
component bindings – compnent attribute values to reference other components
Tag Data Binding
binding goes both ways – read and updated
Expression syntax
dynamic object data can be inserted using {!objectname.fieldname} syntax
global data can be inserted with the added $ syntax, such as
User.fieldName}, {!$Page.otherVisualforcePage}, {!$Component.otherVisualforceComponent}
local variables can be created to stand in for these expressions as they can become long and unwieldy using the tag.
Action Binding
set of actions available through the controller
can be called using expression syntax
they can be
standard actions
custom actions
Component Ids
all vf tags have an optional id attribute
this id is used as the DOM id when the page is rendered
the tag can be referenced by the id by other tags, javascript, or other web enabled languages
the ids should be unique within each page
the hierarchy of ids should be specified if the ids are not unique
when components (such as tables and lists) support iteration over record collections, the system appends _index to the id for each row, starting with zero.
Basic Page Components
Layout Components
provides a structure to the page
provide templates or frames to insert content
do not bind directly to sf data
are focused on areas where data-bound components can be placed
tags
apex:page /> – represents a single vf page
apex:variable /> – provides a local variable that can be used to replace an expression to reduce long and repetitive text
Static Resource Components
a type of sf storage
designed for use with vf
items required by the vf pages (such as javascript, css, images, etc…)
referenced using $Resource global variable
recommended method over uploading these files to document tab
are uploaded via Your Name|Setup|Develop|Static Resources
can be contained in an archive (zip)
limited to 5 MB per file and a 250 mb overall
use action attr to redirect
Components
– to add additional css file
are located in /sCSS/directory
dStandard.css – most styles for standard objects/tabs
allCustom.css – styles for custom objects/tabs
helps build out pages and uses sf stylesheet by default
creates an area of a page that is similar to detail page and doesn’t contain the default content
– set of buttons that are styled like standard sf buttons (buttons still need to be created manually)
– must be used within a pageBlock component. This tag creates a section with one or more columns
used within pageBlockSection component
allows to modify data presentation, display the data using a different widget, or present items not based directly on SF object fields
if we need to bundle more than one item in the cell, then use outputpanel
– creates the standard colored header bar displayed under the tabs in the SF UI
Coarse Metadata Components
provide a large amount of generated code to create familiary Salesforce structures
do not allow for much customization to the generated areas
Components
Chatter tags
enable to add chatter into vf paes
incorporate chatter into vf pages using
the showChatter attribute of tag
to include chatter feed on a record
to include chatter followers on a record
to include chatter feed, followers and show/hide chatter button
to add a button that enables you to follow records
Message components
– use the standard sf style
– unformatted but can apply custom style
and – specific to one component
messages always shows up in system log.
Form and Output Components
allow entering info into your pages, & uploading files
form components
enables a section of a vf page to allow users to enter data and subit it with commandButton or commandLink
corresponds to a SF object field that respects the attributes of that field and uses associated sf UI widget
set of widgets for data that doesnt correspond to a SF object field to be used with pageBlockSectionItem tags
, , , ,
limitations
no protection from malicious javascript
no escaping/unescaping the data correctly when displayed on a regular page layout
no built-in handling of the truncated display of long text fields
no special search indexing to ignore tags and focus on the plain text
no special handling of the field when used in filters, workflow rules, etc.
series of additional tags to support the display of UI widgets in organized tables
allows users to upload files and turn them into attachments on records, documents or apex blobs
&
used within a form tag.
output components
display info without allowing the user to change any data
have parallel form components
components
– creates a label for input or output widgets that do not automatically come with a label
– creates a read-only display of a label and value for a SF field, automatically formatted according to the field type
– creates a link to URL
– used as achaild tag that provides a name/value pair parameter for its parent compoentn. It can be used with
outputLink: defines http query string parameters
outputText: defines text insertion parameters
actionFunction: defines javascript function parameters
– tag defines a set of content that is grouped together (often for ajax)
layout attribute: block, inline, none
block: Generates an HTML div tag (adds a paragraph)
inline: Generates an HTML span tag (default:doesn’t do any formatting)
– displays text which can be formatted using a stylesheet
– creates a table by iterating over a set of data using the SF stylesheet. good if data comes from sf object. used within pageBlock or pageBlockSection
– creates a list (a one-column table) by iterating over a set of data
[Note: dataList and dataTable are very similar and generally used when you don’t want the standard sf table style. DataLists are just one-column tables.
– creates an HTML table which iterates over a set of data
– used within either pageBlockTable or dataTable set of tags. it creates the columns for a table
used to embed flash widgets into a vf page
used with a variety of other component tags to provide or override headers, footers, and captions to other items
Visual Force Components for Modularity
Custom components can stand alone or be accompanied by a custom controller (can be shared in appexchange)
– used to create our own custom reusable components
access then using
– use it within component tag to define the custom attributes, can define the name, data type, and other aspects of the custom attribute
– used within a component tag to pull the body of the component’s implementation into the component definition, often used for custom iteration component
Page Inclusions (mashups)
to include another page as URL
– to include another vf page
Template Tags
series of tags that are used to create vf template pages and define reusable components for baseline pages
tags
facilitate communication outside of the application
used to create vf email templates
must be wrapped inside a single emailTemplate component
have advantages over traditional email templates
can be edited using Email Templates (under admin)
Messaging tags
With email templates, you can
repeat tag to iterate through all of the related records
generate pages inside of the template
specify a custom email header
create attachment using plain text, HTML or VF
Visualforce Performance Troubleshooting
reduce view state size using only one tag on a page
cache frequently accessed resources
reduce page size < 15 mb
increase the time interval for calling apex from visualforce page
remove unnecessary fields to reduce the amount of data returned
Javascript in Visualforce
Action Binding and Javascript
currently only actions that are shared across al objects are exposed through standard controllers
but further standard sf actions are available by using javascript and the expression syntax with the !URLFOR and $Action keywords
Ajax tags
5 tags
actionStatus – used to display start and stop statuses of ajax requests
actionSupport – used to call 2nd component when an event happens to the 1st component
actionPoller – similar to actionSupport, but the event is based on timer instead of a user action
actionFunction – provides support of invoking a controller action from javascript code using an Ajax request by defining new javascript function
actionRegion – used to demarcate which parts of the page the server should reprocess
use rerender attribute to do partial updates
simple to implement partial page update is
isolation the portion of the page by surrounding it with tags. be sure to give id attribute
create the command button or link that will trigger the partial refresh. add the rerender attribute and assign it the value of the id of the outputPanel created earlier
if event happening to same component that should action, use the built-in javascript event attributes
if event happening to a different component that will take the action, use the actionSupport tag to handle the event
With ajax toolkit
create an apex class and expose it as a web service
call the web service from a visual force page
optionally can attach a page to a button, make it inline, etc.
Further Topics in Visualforce
force.com sites allow to build public unauthenticated sites that can access data from sf apps
4 main use cases
build and run new web applications
consumer reviews, hotel conceirge services, event registration sites
transform business apps into websites
recruiting portal
extend your salesforce crm apps
interactive web to lead forms
campaign landing pages
run your corporate web site on salesforce service
public websites, intranets
Salesforce Mobile
licensed client app that can be run on blackberry, iPhone, or windows mobile device
provides mobile access to data, email, tasks and calendar
includes features such as permissions, page layouts, related lists, dashboards, reports and list views
allows administrator to mobilize a limited set of standard objects and all custom objects
lite edition is free
guidelines to develop pages for mobile
evaluate if app interface needs to be redesigned for the use on mobile devices
keep the real estate open by not displaying the header or sidebar
avoid using lookup fields. For the best user experience, use apex to validate data entry
create reusable styles in a separate page and use the include component to add these styles
use a third party libary such as iUI that provides iPhone like interface
refrain from createing styles as a static resource
iPhone
set page width to 980 pixels
Blackberry
doesn’t support inline events
doesn’t have built-in navigation
viewstate for forms is too large for Blackberry
use standard html forms in mobile page instead of using form component
3 methods to develop for multiple platforms
Separation and redirection
build pages separately and point the mobile tab to the bb page
top of the page, include the js to redirect the page, if the target is not a bb device
Lowest Common Denomiator
create pages that include minimal or javascript
use these pages on any supported device
Conditional Code
create pages that evaluate which device being used
offer appropriate markup for each device
Mobile Javascript Librar
some functions of mobile devices not applicable to desktop clients
developers can use js functions in vf pages for javascript enabled devices
mobileforce.device.sync()
mobileforce.device.close()
mobileforce.device.syncclose()
mobileforce.device.getLocation()
html links can be used to sync/close
Mobilizing Visualforce Pages
Create new mobile ready visualforce tab
add the vf tab to mobile configuration
test the page using a mobile client simulator
Chatter Data Model
FeedItem is the fundamental entity for the chatter data model
Feed tracking can be enabled for upto 20 fields per object