1. Coding the
Salesforce User
Interface with
Visualforce Pages

2. Welcome
Simon Goodyear
Advanced Developer
Force.com MVP
@simongoodyear

3. What is Visualforce?
• A Framework for building custom user interfaces for
your Salesforce data
• 100% native, hosted in your Salesforce org
• Component based, tag based syntax

4. Model View Controller (MVC) Pattern
Model Controller View
Your Data Your Logic Your Interface
Standard and
Custom Objects
Standard Controllers +
Apex Code

5. Anatomy of a Visualforce Tag
<apex:outputField value = “{!account.Name}”/>
Prefix – Library the Component belongs to (apex, chatter etc.)
Component Name – Type of Component to be generated
Attribute Value – String literal or merge field value passed to the Component
Attribute Name – The name of a value to be passed to the Component

6. Anatomy of a Visualforce Tag
<apex:outputField value = “{!account.Name}”/>

7. Use the Expansive Tag Library…
 140+ tags to choose from (more
included through releases)
 Apply SF standard styling easily
 Create fields, actions, charts,
– forms and chatter feeds
<apex:actionFunction>
<apex:actionPoller>
<apex:actionRegion>
<apex:actionStatus>
<apex:actionSupport>
<apex:areaSeries>
<apex:attribute>
<apex:axis>
<apex:barSeries>
<apex:canvasApp>
<apex:chart>
...

8. …Or Roll Your Own
 Visualforce integrates easily with other standard web
tech:
– HTML
– Javascript
– CSS
• Create your own custom reusable components

9. Demo
LET’S SEE SOME CODE!

10. What’s Next?
 Try It!
 Developer Resources
– developer.salesforce.com
 Visualforce Developer’s Guide
 Get help
– developer.salesforce.com/forums
– Stack Exchange

11. Assistez à notre atelier thématique pour les Développeurs
16h00 –16h40
Les applications web mobiles surSalesforce1
PrésentéparPeterChittum,EvangélistepourlesdéveloppeurschezSalesforce.com

12. La communauté dedéveloppeursSalesforce enFrance
 Paris: http://www.meetup.com/Paris-Salesforce-Developer-User-Group/
 St Quentin: http://www.meetup.com/Saint-Quentin-Salesforce-Developer-Group/

13. Thank You