salesforce1 for visualforce developers
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.TRANSCRIPT
![Page 1: Salesforce1 for Visualforce Developers](https://reader030.vdocument.in/reader030/viewer/2022020115/54b6d8364a7959703e8b46ec/html5/thumbnails/1.jpg)
Salesforce1
For Visualforce Developers
Keir Bowden, CTO BrightGen@bob_buzzard
![Page 2: Salesforce1 for Visualforce Developers](https://reader030.vdocument.in/reader030/viewer/2022020115/54b6d8364a7959703e8b46ec/html5/thumbnails/2.jpg)
Accessing Visualforce• Mark page as mobile– Classic in Spring 14
• Create Tab
• Add to Mobile Navigation
![Page 3: Salesforce1 for Visualforce Developers](https://reader030.vdocument.in/reader030/viewer/2022020115/54b6d8364a7959703e8b46ec/html5/thumbnails/3.jpg)
Accessing Visualforce
• Appears in menu
• Available in app
![Page 4: Salesforce1 for Visualforce Developers](https://reader030.vdocument.in/reader030/viewer/2022020115/54b6d8364a7959703e8b46ec/html5/thumbnails/4.jpg)
Unsupported Elements• http://bobbuzz.me.uk/1gnxa2R
• Anything outside the Apex namespace– E.g. <chatter:feed />
• <apex:detail />
![Page 5: Salesforce1 for Visualforce Developers](https://reader030.vdocument.in/reader030/viewer/2022020115/54b6d8364a7959703e8b46ec/html5/thumbnails/5.jpg)
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!
![Page 6: Salesforce1 for Visualforce Developers](https://reader030.vdocument.in/reader030/viewer/2022020115/54b6d8364a7959703e8b46ec/html5/thumbnails/6.jpg)
Example Types
• type=“date”
• type=“number”
![Page 7: Salesforce1 for Visualforce Developers](https://reader030.vdocument.in/reader030/viewer/2022020115/54b6d8364a7959703e8b46ec/html5/thumbnails/7.jpg)
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
![Page 8: Salesforce1 for Visualforce Developers](https://reader030.vdocument.in/reader030/viewer/2022020115/54b6d8364a7959703e8b46ec/html5/thumbnails/8.jpg)
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
![Page 9: Salesforce1 for Visualforce Developers](https://reader030.vdocument.in/reader030/viewer/2022020115/54b6d8364a7959703e8b46ec/html5/thumbnails/9.jpg)
window.open() is your Friend
![Page 10: Salesforce1 for Visualforce Developers](https://reader030.vdocument.in/reader030/viewer/2022020115/54b6d8364a7959703e8b46ec/html5/thumbnails/10.jpg)
Child Browser
• External links – child browser
• Internal links – current page
• window.open – child browser – iOS only!
![Page 11: Salesforce1 for Visualforce Developers](https://reader030.vdocument.in/reader030/viewer/2022020115/54b6d8364a7959703e8b46ec/html5/thumbnails/11.jpg)
iPhone App Rotation
![Page 12: Salesforce1 for Visualforce Developers](https://reader030.vdocument.in/reader030/viewer/2022020115/54b6d8364a7959703e8b46ec/html5/thumbnails/12.jpg)
Using Child Browser
![Page 13: Salesforce1 for Visualforce Developers](https://reader030.vdocument.in/reader030/viewer/2022020115/54b6d8364a7959703e8b46ec/html5/thumbnails/13.jpg)
List Jumping
Worse with
bootstrap!
![Page 14: Salesforce1 for Visualforce Developers](https://reader030.vdocument.in/reader030/viewer/2022020115/54b6d8364a7959703e8b46ec/html5/thumbnails/14.jpg)
Using Child Browser
![Page 15: Salesforce1 for Visualforce Developers](https://reader030.vdocument.in/reader030/viewer/2022020115/54b6d8364a7959703e8b46ec/html5/thumbnails/15.jpg)
Bootstrap Responsive Tables
Text wraps
Responsive Table - scrolls
![Page 16: Salesforce1 for Visualforce Developers](https://reader030.vdocument.in/reader030/viewer/2022020115/54b6d8364a7959703e8b46ec/html5/thumbnails/16.jpg)
Default Behaviour
![Page 17: Salesforce1 for Visualforce Developers](https://reader030.vdocument.in/reader030/viewer/2022020115/54b6d8364a7959703e8b46ec/html5/thumbnails/17.jpg)
Using Child Browser
![Page 18: Salesforce1 for Visualforce Developers](https://reader030.vdocument.in/reader030/viewer/2022020115/54b6d8364a7959703e8b46ec/html5/thumbnails/18.jpg)
window.open() is your Enemy
![Page 19: Salesforce1 for Visualforce Developers](https://reader030.vdocument.in/reader030/viewer/2022020115/54b6d8364a7959703e8b46ec/html5/thumbnails/19.jpg)
Detecting sforce.one
![Page 20: Salesforce1 for Visualforce Developers](https://reader030.vdocument.in/reader030/viewer/2022020115/54b6d8364a7959703e8b46ec/html5/thumbnails/20.jpg)
Android
• window.open() does nothing!
• External links open in browser
• Responsive tables behave correctly
![Page 21: Salesforce1 for Visualforce Developers](https://reader030.vdocument.in/reader030/viewer/2022020115/54b6d8364a7959703e8b46ec/html5/thumbnails/21.jpg)
Truly mobile pages (non-WIFI)
![Page 22: Salesforce1 for Visualforce Developers](https://reader030.vdocument.in/reader030/viewer/2022020115/54b6d8364a7959703e8b46ec/html5/thumbnails/22.jpg)
Best Practice
• Avoid <apex:form/> - viewstate!
• Avoid round trips– Single page application– Business Logic in JavaScript– Remoting or REST API
![Page 23: Salesforce1 for Visualforce Developers](https://reader030.vdocument.in/reader030/viewer/2022020115/54b6d8364a7959703e8b46ec/html5/thumbnails/23.jpg)
Q&A