Coding the Salesforce1 Platform User InterfaceJune 17, 2014

Keir BowdenCTO, BrightGen@bob_buzzard

What

Why

How

Agenda

What

What is Visualforce?

User interface framework

Component based

Rich set of standard components

HTML

CSS

JavaScript

MVC Framework

ViewModel Controller

Platform provided/ Apex coded

VisualforcePage

Database /Custom classes

What

Why

How

Agenda

Why

Use case 1 – Override Standard Pages

Use Case 1 Features

Standard Controller– Required to override standard page

– Manages a Salesforce record• Account in this example

– Declarative – no Apex code

Use case 2 – Standard Page Plus!

Use Case 2 Features

Standard Controller– As use case 1

– Managing Account

Extension Controller– Coded in Apex

– Extends Standard Controller

– Managing Contacts

– Delegate to Standard Controller

Use Case 3 – Custom Functionality

Use Case 3 Features

Custom Controller– No standard controller to extend

– Coded in Apex from scratch

– Method to execute search

– All data managed in properties

Use Case 4 – External Facing Web Page

Use Case 4 Features

Any type of controller (including none)

Exclude Salesforce Styling, Elements

Regular HTML

External CSS and JavaScript Libraries

Surfaced through Force.com Site

What

Why

How

Agenda

How

Example Page - MarkupPage tag - container

Standard controller – no code!

Standard component with attributesRegular HTML

Standard component – no attributes

Closing page tag

Example Page - Output

Components

Elements on a page– Standard library – 100+

– Custom components• Functional Decomposition

• DRY

• Custom controller only

• Attributes influence behaviour

Example Component

Data Binding

Merge syntax – {! <expression> } Display fields from managed record

– <apex:page StandardController=“Account”> You are viewing <apex:outputField value=“{!Account.Name}” />.

Data Binding

Update fields from managed record<apex:page StandardController=“Account”> <apex:form> <apex:inputField value=“{!Account.Industry}” />

Data Binding

Access properties from controller– Public with public getter:

public String myStr {get; set;}

– <apex:page controller=“MyController”> <apex:form> Enter text: <apex:inputText value=“{!myStr}” />

Action Binding

Access Methods from Controllerpublic PageReference edit() { ... }

<apex:page controller=“MyController”>

<apex:form>

<apex:CommandButton value=“Edit” action=“{!edit}” />

Where Next?

https://developer.salesforce.com– Developer Portal

– Documentation, Wiki, Blogs, Forums

Developer Edition - http://bobbuzz.me.uk/1n2NND2– All Salesforce features

– Restrictions on users and records

Where Next?

Workbook - http://bobbuzz.me.uk/1lGluO9

Developer’s Guide - http://bobbuzz.me.uk/1lrw4d5

Cookbook – http://bobbuzz.me.uk/16BF214

Developer Group - http://bit.ly/DUGLondon

Thank You