Upload
bob-buzzard
View
1.516
Download
3
Tags:
Embed Size (px)
DESCRIPTION
Deck covering a few of the gotchas that I've found building Visualforce pages to run inside Salesforce1 and some of the workarounds I've found.
Citation preview
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