Salesforce1 for Visualforce Developers

2,971 views
2,609 views

Published on

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.

Published in: Technology
0 Comments
3 Likes
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total views
2,971
On SlideShare
0
From Embeds
0
Number of Embeds
80
Actions
Shares
0
Downloads
45
Comments
0
Likes
3
Embeds 0
No embeds

No notes for slide

Salesforce1 for Visualforce Developers

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

×