Salesforce1 for Visualforce Developers

Salesforce1

For Visualforce Developers

Keir Bowden, CTO BrightGen@bob_buzzard

Accessing Visualforce• Mark page as mobile– Classic in Spring 14

• Create Tab

• Add to Mobile Navigation

Accessing Visualforce

• Appears in menu

• Available in app

Unsupported Elements• http://bobbuzz.me.uk/1gnxa2R

• Anything outside the Apex namespace– E.g. <chatter:feed />

• <apex:detail />

Unsupported Elements• <apex:inputField />– If it creates a widget

• Use HTML5 type attribute– Let the browser provide the widget– Suitable touch keyboard– No type for lookups!

Example Types

• type=“date”

• type=“number”

Sforce.one JavaScript Object

• In app navigation

• Visualforce knows it is in Salesforce1

• Installed or HTML5? – Inspect user-agent on iOS– Risky – see Dolphin browser

Click event is Slow

• Webkit waits 300ms for double click

• Use touch events instead

• Support is patchy: caniuse.com/touch

• JavaScript libraries – e.g. Event, Zepto

window.open() is your Friend

Child Browser

• External links – child browser

• Internal links – current page

• window.open – child browser – iOS only!

iPhone App Rotation

Using Child Browser

List Jumping

Worse with

bootstrap!

Using Child Browser

Bootstrap Responsive Tables

Text wraps

Responsive Table - scrolls

Default Behaviour

Using Child Browser

window.open() is your Enemy

Detecting sforce.one

Android

• window.open() does nothing!

• External links open in browser

• Responsive tables behave correctly

Truly mobile pages (non-WIFI)

Best Practice

• Avoid <apex:form/> - viewstate!

• Avoid round trips– Single page application– Business Logic in JavaScript– Remoting or REST API

Q&A