Twitter bootstrap force.com site and responsive design

Twitter bootstrap force.com site and responsive design

• 1.
  Combining Customer Portals, Force.com Sites, Visualforce, Twitt er Bootstrap and Responsive Design!
• 2.
  About Me • StevenHerod • Working with Salesforce since 2010 • @sherod on Twitter • http://limitexception.herod.net
• 3.
  What was theproblem? • Needed to accept online credit applications for car loans • Leverage their Existing Salesforce Organization. • Required support of Mobile Phone/Tablet and Desktop browsers.
• 4.
  Components Force.com Site + Service Portal Responsive Design with • Twitter Bootstrap • jQuery Visualforce + Fieldsets
• 5.
  What is ResponsiveDesign? http://johnpolacek.github.com/scrolldeck.js/decks/responsive/
• 6.
  What is TwitterBootstrap?
• 7.
  And the Salesforcebits • High Volume Customer Portal – Salesforce license / Security model • Force.com Site – Custom login and user interface • Visualforce – Fieldsets – Custom Controllers
• 8.
  Deep Dive
• 9.
  Responding to differentdisplays Desktop iPad iPhone
• 10.
  Setting up thepage
• 11.
  Handling the Resize Twitter Bootstrap CSS classes + jQuery to react to changes <div class="callimg hidden-phone hidden-tablet"> <apex:image url="{!URLFOR($Resource.LCPStaticRsc, 'lcp/img/img_call.png')}" alt="" width="224" height="35" /> </div>
• 12.
  Using Fieldsets • “Afield 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.
  Fields sets onthe page Visualforce Page Page Block Fieldset Fieldset Page Block Fieldset Fieldset Page Block Fieldset Fieldset Page Block Fieldset Fieldset
• 14.
  Field set persection Order of fields and required driven from Fieldset definition in configuration
• 15.
  Displaying the Fieldsets
• 16.
  Help and Typechanges UI
• 18.
  Setting up thehelp/input field
• 19.
  Javascript for Currency/Help popover
• 20.
  Error handling Twitter Bootstrap CSS classes <apex:messages styleClass="alert alert-error" /> j$('input.error,select.error').parents('.control-group').addClass('error');
• 21.
  Questions?