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
Top Related