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