twitter bootstrap force.com site and responsive design
DESCRIPTION
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 markTRANSCRIPT
![Page 1: Twitter bootstrap force.com site and responsive design](https://reader036.vdocument.in/reader036/viewer/2022070315/554f830cb4c905435d8b4ab0/html5/thumbnails/1.jpg)
Combining Customer Portals, Force.com Sites, Visualforce, Twitter Bootstrap and Responsive
Design!
![Page 2: Twitter bootstrap force.com site and responsive design](https://reader036.vdocument.in/reader036/viewer/2022070315/554f830cb4c905435d8b4ab0/html5/thumbnails/2.jpg)
About Me
• Steven Herod• Working with Salesforce since
2010• @sherod on Twitter• http://limitexception.herod.net
![Page 3: Twitter bootstrap force.com site and responsive design](https://reader036.vdocument.in/reader036/viewer/2022070315/554f830cb4c905435d8b4ab0/html5/thumbnails/3.jpg)
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.
![Page 4: Twitter bootstrap force.com site and responsive design](https://reader036.vdocument.in/reader036/viewer/2022070315/554f830cb4c905435d8b4ab0/html5/thumbnails/4.jpg)
Components
Force.com Site + Service Portal
Responsive Design with• Twitter Bootstrap• jQuery
Visualforce + Fieldsets
![Page 5: Twitter bootstrap force.com site and responsive design](https://reader036.vdocument.in/reader036/viewer/2022070315/554f830cb4c905435d8b4ab0/html5/thumbnails/5.jpg)
What is Responsive Design?
http://johnpolacek.github.com/scrolldeck.js/decks/responsive/
![Page 6: Twitter bootstrap force.com site and responsive design](https://reader036.vdocument.in/reader036/viewer/2022070315/554f830cb4c905435d8b4ab0/html5/thumbnails/6.jpg)
What is Twitter Bootstrap?
![Page 7: Twitter bootstrap force.com site and responsive design](https://reader036.vdocument.in/reader036/viewer/2022070315/554f830cb4c905435d8b4ab0/html5/thumbnails/7.jpg)
And the Salesforce bits
• High Volume Customer Portal– Salesforce license / Security model
• Force.com Site– Custom login and user interface
• Visualforce– Fieldsets– Custom Controllers
![Page 8: Twitter bootstrap force.com site and responsive design](https://reader036.vdocument.in/reader036/viewer/2022070315/554f830cb4c905435d8b4ab0/html5/thumbnails/8.jpg)
Deep Dive
![Page 9: Twitter bootstrap force.com site and responsive design](https://reader036.vdocument.in/reader036/viewer/2022070315/554f830cb4c905435d8b4ab0/html5/thumbnails/9.jpg)
Responding to different displays
Desktop
iPad
iPhone
![Page 10: Twitter bootstrap force.com site and responsive design](https://reader036.vdocument.in/reader036/viewer/2022070315/554f830cb4c905435d8b4ab0/html5/thumbnails/10.jpg)
Setting up the page
![Page 11: Twitter bootstrap force.com site and responsive design](https://reader036.vdocument.in/reader036/viewer/2022070315/554f830cb4c905435d8b4ab0/html5/thumbnails/11.jpg)
Handling the Resize
<div class="callimg hidden-phone hidden-tablet"> <apex:image url="{!URLFOR($Resource.LCPStaticRsc, 'lcp/img/img_call.png')}" alt="" width="224" height="35" /> </div>
Twitter Bootstrap CSS classes +jQuery to react to changes
![Page 12: Twitter bootstrap force.com site and responsive design](https://reader036.vdocument.in/reader036/viewer/2022070315/554f830cb4c905435d8b4ab0/html5/thumbnails/12.jpg)
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..
![Page 13: Twitter bootstrap force.com site and responsive design](https://reader036.vdocument.in/reader036/viewer/2022070315/554f830cb4c905435d8b4ab0/html5/thumbnails/13.jpg)
Fields sets on the page
![Page 14: Twitter bootstrap force.com site and responsive design](https://reader036.vdocument.in/reader036/viewer/2022070315/554f830cb4c905435d8b4ab0/html5/thumbnails/14.jpg)
Field set per section
Order of fields and required driven from Fieldset definition in configuration
![Page 15: Twitter bootstrap force.com site and responsive design](https://reader036.vdocument.in/reader036/viewer/2022070315/554f830cb4c905435d8b4ab0/html5/thumbnails/15.jpg)
Displaying the Fieldsets
![Page 16: Twitter bootstrap force.com site and responsive design](https://reader036.vdocument.in/reader036/viewer/2022070315/554f830cb4c905435d8b4ab0/html5/thumbnails/16.jpg)
Help and Type changes UI
![Page 17: Twitter bootstrap force.com site and responsive design](https://reader036.vdocument.in/reader036/viewer/2022070315/554f830cb4c905435d8b4ab0/html5/thumbnails/17.jpg)
![Page 18: Twitter bootstrap force.com site and responsive design](https://reader036.vdocument.in/reader036/viewer/2022070315/554f830cb4c905435d8b4ab0/html5/thumbnails/18.jpg)
Setting up the help/input field
![Page 19: Twitter bootstrap force.com site and responsive design](https://reader036.vdocument.in/reader036/viewer/2022070315/554f830cb4c905435d8b4ab0/html5/thumbnails/19.jpg)
Javascript for Currency/Help popover
![Page 20: Twitter bootstrap force.com site and responsive design](https://reader036.vdocument.in/reader036/viewer/2022070315/554f830cb4c905435d8b4ab0/html5/thumbnails/20.jpg)
Error handling
j$('input.error,select.error').parents('.control-group').addClass('error');
<apex:messages styleClass="alert alert-error" />
Twitter BootstrapCSS classes
![Page 21: Twitter bootstrap force.com site and responsive design](https://reader036.vdocument.in/reader036/viewer/2022070315/554f830cb4c905435d8b4ab0/html5/thumbnails/21.jpg)
Questions?