1. To build custom Web Pages on Salesforce
Visualforce

2. • Framework to build custom user interfaces on salesforce
• Hosted on force.com
• Build streamlined UX
• Create internal and public facing pages
• Customize for different devices – Responsive
• Leverage other web technologies
What is Visualforce?

3. Visualforce and MVC Pattern
Model
Controller
View
User Actions
Selects a new view if
required by user action
Controller updates
model as per user actions
View Queries
model for state
Model triggers
View update

4. Visualforce and MVC Pattern
Your Data
Your Logic
View
User Actions
Selects a new view if
required by user action
Controller updates
model as per user actions
View Queries
model for state
Model triggers
View update

5. Visualforce and MVC Pattern
Standard and
Custom Objects
Standard
Controllers
and
Apex
View/Pages
User Actions
Selects a new view if
required by user action
Controller updates
model as per user actions
View Queries
model for state
Model triggers
View update

6. MVC Example in Salesforce

7. MVC Pattern
Visualforce Pages
Visualforce Components
Standard Controllers
Apex Controllers
Custom UI
Custom Logic
Standard Objects
Custom Objects

8. • Visualforce tags
– 80+ standard components
– Custom components
• Works with all standard web technologies
including:
– CSS
– Javascript
– HTML
– Flash
– Any other Web-Enabled Code
Visualforce Markup

9. • Anything inside of {! } is evaluated as an expression
– Dynamic variables: {!Contact.Phone} or {!myApexVariable}
– Logic: {!IF(Opportunity.Stage == ‘Closed/Won’, val_if_true, val_if_false)}
– Functions: {!URLENCODE(Account.website__c)}
• $ provides access to global variables (User, Page, RemoteAction,
Resource, …)
– {!$User.FirstName} {!$User.LastName}
– {!$Resource.jquery}
– {!URLFOR($Resource.assets, ‘img/logo.png’)}
Expression Language

10. < apex:outputField value = “{!Restaurant__c.Address__c}” >
Standard apex components of visualforce
apex: or chatter:
prefix
Component
name (tables,
repeats, forms,
etc)
Attributes to
define
components
Data binding to
objects and class
variables
Reference field
using dot
notation
Merge field to define
attribute (can also be
a string literal in
some cases)

11. • Provides access to data
• Logic for handling UI interaction
• Standard Controllers
– Same functionality as standard pages
– Save, delete, field access etc.
• Custom controllers
– Written in Apex
– Override standard behavior
– Controller Extensions
Visualforce controllers

12. • Developer Console
• Development mode (browser plugin)
• Force.com IDE
Customizing Visualforce

13. Developer Console

14. • Embeds a Visualforce page editor in your browser
– see code and preview the page at the same time.
• Also adds Apex editor for editing controllers and extensions.
• To activate: Setup > My personal information > Personal information
Visualforce development mode

15. Visualforce development mode

16. Salesforce also made using Visualforce

17. Possibilities with Visualforce
Email Templates Embedded in Page Layouts Generate PDFs
Custom Tabs
Mobile Interfaces
Page Overrides

18. • Google charts
• AngularJS and Jquery
• Cookie sessions
• Document uploads
Visualforce integration

19. • http://developer.force.com/sitesgallery
– Cisco - certification and communities
– Ricoh Australia
– DeVry University
– VMWare – Partner Locator portal
– Force.com appexchange
Over 20,000 websites built on Force.com