An Introduction to creating custom user interfaces for your Salesforce data using Visualforce.

1. Coding the Salesforce User
Interface with Visualforce Pages
May 22nd, 2014

2. Christopher Alun Lewis
Advanced Developer
Force.com MVP
Welcome!
Simon Goodyear
Advanced Developer
Force.com MVP

3. What is Visualforce?
• A Framework for building custom user interfaces for your
Salesforce data
• 100% native, hosted in your Salesforce org
• Componentised, 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
Visualforce

5. Anatomy of a Visualforce Component
<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
<c:myComponent/>

9. DEMO
LET’S SEE SOME CODE!

10. Other Visualforce Use Cases

11. Further Reading
• Visualforce Workbook
http://www.salesforce.com/us/developer/docs/workbook_vf/index.htm
• Visualforce Developer’s Guide
http://www.salesforce.com/us/developer/docs/pages/index_Left.htm
• Developer Resources
https://developer.salesforce.com

12. Thank You!
Christopher Alun Lewis
@ChrisAlunLewis
Simon Goodyear
@simongoodyear