Twitter bootstrap force.com site and responsive design

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?