Twitter bootstrap force.com site and responsive design

4,484
-1

Published on

Video/Audio of this presentation is also available at http://www.youtube.com/watch?v=5-oVBgRVzBM from the beginning to about the 23 minutes mark

0 Comments
1 Like
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total Views
4,484
On Slideshare
0
From Embeds
0
Number of Embeds
2
Actions
Shares
0
Downloads
32
Comments
0
Likes
1
Embeds 0
No embeds

No notes for slide

Twitter bootstrap force.com site and responsive design

  1. 1. Combining Customer Portals, Force.comSites, Visualforce, Twitt er Bootstrap and Responsive Design!
  2. 2. About Me• Steven Herod• Working with Salesforce since 2010• @sherod on Twitter• http://limitexception.herod.net
  3. 3. What was the problem?• Needed to accept online credit applications for car loans• Leverage their Existing Salesforce Organization.• Required support of Mobile Phone/Tablet and Desktop browsers.
  4. 4. Components Force.com Site + Service PortalResponsive Design with• Twitter Bootstrap• jQuery Visualforce + Fieldsets
  5. 5. What is Responsive Design?http://johnpolacek.github.com/scrolldeck.js/decks/responsive/
  6. 6. What is Twitter Bootstrap?
  7. 7. And the Salesforce bits• High Volume Customer Portal – Salesforce license / Security model• Force.com Site – Custom login and user interface• Visualforce – Fieldsets – Custom Controllers
  8. 8. Deep Dive
  9. 9. Responding to different displays Desktop iPad iPhone
  10. 10. Setting up the page
  11. 11. Handling the Resize Twitter Bootstrap CSS classes + jQuery to react to changes<div class="callimg hidden-phone hidden-tablet"> <apex:imageurl="{!URLFOR($Resource.LCPStaticRsc, lcp/img/img_call.png)}"alt="" width="224" height="35" /> </div>
  12. 12. Using Fieldsets• “A field set is a grouping of fields”• Allows us to package the fields into a configurable group and then refer to that group within the VF page without referencing every field individually.• Also allows us to mark if its mandatory..
  13. 13. Fields sets on the page Visualforce Page Page Block Fieldset Fieldset Page Block Fieldset Fieldset Page Block Fieldset Fieldset Page Block Fieldset Fieldset
  14. 14. Field set per sectionOrder of fields and required driven fromFieldset definition in configuration
  15. 15. Displaying the Fieldsets
  16. 16. Help and Type changes UI
  17. 17. Setting up the help/input field
  18. 18. Javascript for Currency/Help popover
  19. 19. Error handling Twitter Bootstrap CSS classes <apex:messages styleClass="alert alert-error" />j$(input.error,select.error).parents(.control-group).addClass(error);
  20. 20. Questions?

×