Combining Customer Portals, Force.com Sites, Visualforce, Twitter 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 Organization.
• Required support of Mobile Phone/Tablet and Desktop browsers.
Components
Force.com Site + Service Portal
Responsive Design with• Twitter Bootstrap• jQuery
Visualforce + Fieldsets
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 login and user interface
• Visualforce– Fieldsets– Custom Controllers
Deep Dive
Responding to different displays
Desktop
iPad
iPhone
Setting up the page
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
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..
Fields sets on the page
Field set per section
Order of fields and required driven from Fieldset definition in configuration
Displaying the Fieldsets
Help and Type changes UI
Setting up the help/input field
Javascript for Currency/Help popover
Error handling
j$('input.error,select.error').parents('.control-group').addClass('error');
<apex:messages styleClass="alert alert-error" />
Twitter BootstrapCSS classes
Questions?