• Share
  • Email
  • Embed
  • Like
  • Save
  • Private Content
Twitter bootstrap   force.com site and responsive design
 

Twitter bootstrap force.com site and responsive design

on

  • 4,141 views

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

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

Statistics

Views

Total Views
4,141
Views on SlideShare
4,132
Embed Views
9

Actions

Likes
1
Downloads
21
Comments
0

3 Embeds 9

http://www.slashdocs.com 6
http://www.linkedin.com 2
http://translate.googleusercontent.com 1

Accessibility

Categories

Upload Details

Uploaded via as Microsoft PowerPoint

Usage Rights

© All Rights Reserved

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Processing…
Post Comment
Edit your comment

    Twitter bootstrap   force.com site and responsive design Twitter bootstrap force.com site and responsive design Presentation Transcript

    • 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 Organization.• Required support of Mobile Phone/Tablet and Desktop browsers.
    • Components Force.com Site + Service PortalResponsive 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 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>
    • 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 Visualforce Page Page Block Fieldset Fieldset Page Block Fieldset Fieldset Page Block Fieldset Fieldset Page Block Fieldset Fieldset
    • 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 CSS classes <apex:messages styleClass="alert alert-error" />j$(input.error,select.error).parents(.control-group).addClass(error);
    • Questions?