Creating Engaging Apps with Visualforce and BootstrapCreating Engaging Apps with Visualforce and BootstrapThe first UI framework in your kit

Kyle Bowerman, Appirio/Cloudspokes, Technical Architect

@kylebowerman

Kyle BowermanKyle Bowerman

Appirio / Cloudspokes TA

@kylebowerman

Appirio / Cloudspokes TA

@kylebowerman

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

Topics we will cover today

Why use bootstrap

Examples of some features

Project background

Landmarks of the demo

Demo

Why Bootstrap

1. Looks great and saves time

2. Plugins / Customizable

3. Great documents and community support

4. Future Compatibility

5. Developers Love it!

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>

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

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

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.

Support Flow

Landmarks

•Navbars

•12 column grid

•Data tables

•Expandable row details

•Glyphicons

Landmarks

•Animated modal “fly in”

•Backdrop shading

•Input types by class

•Partial refresh on search

DEMO

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

Kyle BowermanKyle Bowerman

Technical Architect@kylebowerman