Create Engaging Apps with Visualforce and Bootstrap
•Download as PPT, PDF•
1 like•1,043 views
Join us as we take a deep dive into Bootstrap and Visualforce, and show how easy it is to create attractive mobile apps. This case study will focus on JDRF's Online Diabetes Support Team's approach to solving their mobile challenges. Along the way, we'll cover Bootstrap's powerful CSS and base JavaScript functionality, and show you how to harness the power of this open source framework.
Recommended
More Related Content
What's hot
What's hot (20)
Similar to Create Engaging Apps with Visualforce and Bootstrap
Similar to Create Engaging Apps with Visualforce and Bootstrap (20)
More from Salesforce Developers
More from Salesforce Developers (20)
Recently uploaded
Recently uploaded (20)
Create Engaging Apps with Visualforce and Bootstrap
- 1. Creating Engaging Apps with Visualforce and Bootstrap The first UI framework in your kit Kyle Bowerman, Appirio/Cloudspokes, Technical Architect @kylebowerman
- 2. Kyle Bowerman Appirio / Cloudspokes TA @kylebowerman
- 3. It is 2013! Pick a framework! In Spring 11 Salesforce released JS Remoting It by passes the VF rendering engine and returns a JSON object Now developers can use rich UI Javascript/CSS libraries [Frameworks] You don’t need to work hard anymore to create rich Uis Focus on the business process that is hard, pick a Responsive HTML5 Framework, I Bootstrap
- 4. Topics we will cover today Why use bootstrap Examples of some features Project background Landmarks of the demo Demo
- 5. Why Bootstrap 1. Looks great and saves time 2. Plugins / Customizable 3. Great documents and community support 4. Future Compatibility 5. Developers Love it!
- 6. Nav example <ul> <li><a href="#">Welcome</a></li> <li><a href="#">To</a></li> <li><a href="#">Dreamforce</a></li> <li><a href="#">2013</a></li> </ul> <ul class="nav nav-tabs"> <li class="active"><a href="#">Welcome</a></li> <li><a href="#">To</a></li> <li><a href="#">Dreamforce</a></li> <li><a href="#">2013</a></li> </ul>
- 7. More Nav example <ul class="nav nav-pills"> <li class="active"><a href="#">Welcome</a></li> <li><a href="#">To</a></li> <li><a href="#">Dreamforce</a></li> <li><a href="#">2013</a></li> </ul> <ul class="nav nav-list span2"> <li class="active"><a href="#"><i class="icon-fixed-width icon-home"/> Welcome</a></li> <li><a href="#"><i class="icon-fixed-width icon-book"/> To</a></li> <li><a href="#"><i class="icon-fixed-width icon-pencil"/> Dreamforce</a></li> <li><a href="#"><i class="icon-fixed-width icon-cogs"/> 2013</a></li> </ul> Icons are fonts so they scale to any size
- 8. But wait there’s more! “Sleek, intuitive and powerful mobile first front-end framework for faster and easier web development” - from getbootstrap.com From the folks at Twitter Core JS libraries CSS, built using {LESS} css pre-processor Framework for plugins Uses glyphicons and font-awesome for icons
- 9. The Project Migrate an existing on premise support app into SF to leverage existing CRM data. The app will manage a team of volunteers with no Salesforce experience It should be intuitive and look familiar. …. and it has to be done in 8 weeks time.
- 10. Support Flow
- 11. Landmarks •Navbars •12 column grid •Data tables •Expandable row details •Glyphicons
- 12. Landmarks •Animated modal “fly in” •Backdrop shading •Input types by class •Partial refresh on search
- 13. DEMO
- 14. All about Appirio and Cloudspokes Appirio is a global service company that uses traditional consulting, crowd sourcing and cloud, social and mobile technology to help enterprises dramatically improve the way they do business. Cloudspokes is Appirio’s crowd sourcing business unit. With it’s recent acquisition of TopCoder.com, it provides a resource of nearly 600k developers world wide to provide customer solutions
Editor's Notes
- 2 years ago SF introduce my favorite feature called JS remoting. And this feature open a new world of possibilities for you VF apps. This was ground breaking! Earth Shattering! Why? It bypasses the Visual force rendering engine and returns raw JSON objects from the controller. ( before we needed to create a dummy VF page and build JSON) This was important for two reasons. 1.) Our apps run faster if we can avoid VF engine to pass us full html, and let our browsers to do the heavy lifting 2.) Modern web frameworks are JS based and they like there data as Javascript objects called JSON All the common UI patterns have be catalogued and classified with painstaking detail. Fortunately for us they fit nicely into the Object Orientated Programming concept we learned about in college. Cascading Style sheets and Javascript are very conducive to store these Classes. Because this effort has been already done by others this gives us the opportunity to focus on what is important and what is hard. The business logic! I like Bootstrap (others are HTML5 boiler plate, Zurb Foundation, skeleton HTML Kickstart) are all HTML5 responsive frameworks
- Why we selected bootstrap, there are other good ones out there. The important lesson here is to pick a framework and stop using disparate JS libs Highlight just a few features that illustrate the power Give a little background for the project that I will demo
- If you just use the css, your app will look better. You should shop for features not build them. (grid system, modal, carousels come default) This is a framework library so plugins are widely available (search for bootstrap plugins), jquery is included but if you app is already using it you may omit it from the bundle. Just load as a static resource Due to its popularity you can’t throw a rock at the internet and not find a tutorial on using bootstrap. The providers (getboostrap.com) documentation is fantastic. Due to it market penetration and wide acceptance by developers it is here to stay Developers love it and love to show hat they can do with it = many blog articles and tutorials Using a framework like bootstrap will allow you to focus on the things that are important. It commoditizers the common web UI components so you can foucs on what matters, The logic.
- For most this is the ahh ha moment of why to use a framework like boostrap We start with a simple unorder list, which generates a bulleted list, basic html 101 stuff Next we add three class the first tells us or UL should now be a navigation the second tells us that we want to use tabs the third makes the first item active This is Huge! You don’t need to be a coder to do this, You don’t need to be able to write Javascript to do this.
- Change tabs to pills Stack them and apply 2 cols to the object You don’t need to be a code, you just need to follow directions More shopping less coding! Glyphs are icons stored as fonts, font-awesome, since they are SVG and not images they scale without distortion
- Definition from gettbootstrap From twitter Set of core JS libries and matching css Shop don’t code
- Background for the demo. Users are mostly retired volunteers with a background in diabetes They triage cases from standard web to case and ‘assign’ them to other volunteers who respond to the requestors via email and bcc a email handler that will log the response and close the case. It had to mimic the screens of the existing app so the service console was not an option. There are two types of volunteers, VM and CV. CVs don’t have SF accounts and they respond to the requests using email, and email handlers (bcc) are used to log the response and close the case The majority of the time was spent on the business logic and not the UI.
- This slide illustrates complexity behind the business logic. We only had 8 weeks to complete this project, and the logic was complex. We couldn’t dedicate too much time to the front end which is why we used bootstrap.
- Before we jump into the demo I just wanted to point out some ‘landmarks’ to watch for. In all my projects I take screenshots of the UI and label certain regions and call this mapping landmarks. ( nav bar, sub nav, list view) This way I can communicator with the beta testers better and we can be sure we are talking about the same thing.
- This modal drops in from the bottom, this is yet another feature of boostrap that can be achieved by simply adding a class. The backdrop shading is a default behavior of a modal and most people like it because it turns the focus on what the user needs to do next. Many input types achieved by classes. This uses js remoting to get the picklist values The search button does not close the modal, this was a modification to the default behavior and was achieved by simply adding a class.