Date post: | 21-Oct-2014 |
Category: |
Technology |
View: | 269 times |
Download: | 4 times |
Coding the Salesforce User Interface with Visualforce PagesMay 22nd, 2014
Christopher Alun Lewis
Advanced Developer
Force.com MVP
Welcome!
Simon Goodyear
Advanced Developer
Force.com MVP
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
Model View Controller (MVC) Pattern
Model Controller View
Your Data Your Logic Your Interface
Standard andCustom Objects
Standard Controllers +Apex Code
Visualforce
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
Anatomy of a Visualforce Tag
<apex:outputField value = “{!account.Name}”/>
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>...
…Or Roll Your Own!
• Visualforce integrates easily
with other standard web tech:
• HTML
• Javascript
• CSS
• Create your own custom
reusable components
<c:myComponent/>
DEMO
LET’S SEE SOME CODE!
Other Visualforce Use Cases
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
Thank You!
Christopher Alun
Lewis
@ChrisAlunLewis
Simon Goodyear
@simongoodyear