Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.
Combining Customer  Portals, Force.comSites, Visualforce, Twitt    er Bootstrap and Responsive Design!
About Me• Steven Herod• Working with Salesforce since  2010• @sherod on Twitter• http://limitexception.herod.net
What was the problem?• Needed to accept online credit  applications for car loans• Leverage their Existing Salesforce  Org...
Components                      Force.com Site +                       Service PortalResponsive Design with• Twitter Boots...
What is Responsive Design?http://johnpolacek.github.com/scrolldeck.js/decks/responsive/
What is Twitter Bootstrap?
And the Salesforce bits• High Volume Customer Portal  – Salesforce license / Security model• Force.com Site  – Custom logi...
Deep Dive
Responding to different displays    Desktop                         iPad              iPhone
Setting up the page
Handling the Resize                       Twitter Bootstrap CSS classes +                       jQuery to react to changes...
Using Fieldsets• “A field set is a grouping of fields”• Allows us to package the fields into a  configurable group and the...
Fields sets on the page                      Visualforce Page                                Page Block                   ...
Field set per sectionOrder of fields and required driven fromFieldset definition in configuration
Displaying the Fieldsets
Help and Type changes UI
Setting up the help/input field
Javascript for Currency/Help          popover
Error handling                                                                     Twitter Bootstrap                      ...
Questions?
Twitter bootstrap   force.com site and responsive design
Upcoming SlideShare
Loading in …5
×

Twitter bootstrap force.com site and responsive design

5,067 views

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

  • Be the first to comment

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?

×