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 <apex:form>
  • 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 <apex:page standardController=”Contact”>
  • 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 <apex:page controller=”MyController”>
  • cusom extensions
    • add custom behavior or additional data to standard controllers
    • are invoked by using <apex:page standardController=”Contact” extensions=”MyClass, MyOtherClass”>
• 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 <apex>
  • all pages must be enclosed by a set of <apex:page> 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 <apex:variable> 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
    • <apex:stylesheet> – 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
    • <apex:pageBlock>
      • 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
    • <pageBlockButtons> – set of buttons that are styled like standard sf buttons (buttons still need to be created manually)
    • <pageBlockSection> – must be used within a pageBlock component. This tag creates a section with one or more columns
    • <pageBlockSectionItem>
      • 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
    • <apex:sectionHeader> – creates the standard colored header bar displayed under the tabs in the SF UI
    • <apex:toolbar>
    • <apex:toolbarGroup>
    • <apex:tabPanel>
    • <apex:tab>
    • <apex:panelBar>
    • <apex:panelBarItem>
    • <apex:panelGrid>
    • <apex:panelGroup>
• 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
    • <apex:detail />
    • <apex:relatedList />
    • <apex:listViews />
    • <apex:enhancedList />
    • <apex:repeat />
  • Chatter tags
    • enable to add chatter into vf paes
    • incorporate chatter into vf pages using
      • the showChatter attribute of <apex:detail> tag
      • <chatter:feed> to include chatter feed on a record
      • <chatter:followers> to include chatter followers on a record
      • <chatter:feedWithFollowers> to include chatter feed, followers and show/hide chatter button
      • <chatter:follow> to add a button that enables you to follow records
  • Message components
    • <apex:pageMessages> – use the standard sf style
    • <apex:messages> – unformatted but can apply custom style
    • <message> and <pagemessage> – 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
  • <apex:form>
    • enables a section of a vf page to allow users to enter data and subit it with commandButton or commandLink
  • <apex:inputField>
    • corresponds to a SF object field that respects the attributes of that field and uses associated sf UI widget
  • <apex:inputWidget>
    • set of widgets for data that doesnt correspond to a SF object field to be used with pageBlockSectionItem tags
      • <apex:inputCheckBox>, <apex:inputHidden>, <apex:inputSecret>, <apex:inputText>, <apex:inputTextarea>
    • 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.
  • <apex:selectWidget>
    • series of additional tags to support the display of UI widgets in organized tables
      • <apex:selectCheckboxes>
      • <apex:selectList>
      • <apex:selectRadio>
  • <apex:inputFile>
    • allows users to upload files and turn them into attachments on records, documents  or apex blobs
  • <apex:commandButton> & <apex:commandLink>
    • used within a form tag.
• output components
  • display info without allowing the user to change any data
  • have parallel form components
  • components
    • <apex:outputLabel> – creates a label for input or output widgets that do not automatically come with a label
    • <apex:outputField> – creates a read-only display of a label and value for a SF field, automatically formatted according to the field type
    • <apex:outputLink> – creates a link to URL
    • <apex:param> – 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
    • <apex:outputPanel> – 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)
    • <apex:outputText> – displays text which can be formatted using a stylesheet
    • <apex:pageBlockTable> – 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
    • <apex:dataList> – 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.
    • <apex:dataTable> – creates an HTML table which iterates over a set of data
    • <apex:column> – used within either pageBlockTable or dataTable set of tags. it creates the columns for a table
    • <apex:flash> used to embed flash widgets into a vf page
    • <apex:facet> 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)
• <apex:component> – used to create our own custom reusable components
  • access then using <c:componentname>
• <apex:attribute> – use it within component tag to define the custom attributes, can define the name, data type, and other aspects of the custom attribute
• <apex:componentBody> – 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)
  • <iframe> to include another page as URL
  • <incldue> – 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
    • <apex:define>
    • <apex:insert>
    • <apex:compositions>
• <messaging:emailTemplate>
  • 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
  • <messaging:emailHeader>
  • <messaging:htmlEmailBody>
  • <messaging:plainTextEmailBody>
  • <messaging:attachment>
• 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 <apex:form> 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 <apex:outputpanel> 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