Visualforce in Salesforce1: Optimizing your User Interface for Mobile

Visualforce in Salesforce1 Optimizing your User Interface for Mobile May 14, 2014

#forcewebinar

Speakers

Dave Carroll Director, Developer Evangelism @dcarroll

Pat Patterson Developer Evangelist Architect @metadaddy

#forcewebinar

Safe Harbor Safe harbor statement under the Private Securities Litigation Reform Act of 1995:

This presentation may contain forward-looking statements that involve risks, uncertainties, and assumptions. If any such uncertainties materialize or if any of the assumptions proves incorrect, the results of salesforce.com, inc. could differ materially from the results expressed or implied by the forward-looking statements we make. All statements other than statements of historical fact could be deemed forward-looking, including any projections of product or service availability, subscriber growth, earnings, revenues, or other financial items and any statements regarding strategies or plans of management for future operations, statements of belief, any statements concerning new, planned, or upgraded services or technology developments and customer contracts or use of our services.

The risks and uncertainties referred to above include but are not limited to risks associated with developing and delivering new functionality for our service, new products and services, our new business model, our past operating losses, possible fluctuations in our operating results and rate of growth, interruptions or delays in our Web hosting, breach of our security measures, the outcome of intellectual property and other litigation, risks associated with possible mergers and acquisitions, the immature market in which we operate, our relatively limited operating history, our ability to expand, retain, and motivate our employees and manage our growth, new releases of our service and successful customer deployment, our limited history reselling non-salesforce.com products, and utilization and selling to larger enterprise customers. Further information on potential factors that could affect the financial results of salesforce.com, inc. is included in our annual report on Form 10-Q for the most recent fiscal quarter ended July 31, 2012. This documents and others containing important disclosures are available on the SEC Filings section of the Investor Information section of our Web site.

Any unreleased services or features referenced in this or other presentations, press releases or public statements are not currently available and may not be delivered on time or at all. Customers who purchase our services should make the purchase decisions based upon features that are currently available. Salesforce.com, inc. assumes no obligation and does not intend to update these forward-looking statements.

#forcewebinar

Follow Salesforce Developers for the Latest News

Salesforce Developers

+Salesforce Developers

Salesforce Developers

Salesforce Developers

The video will be posted to YouTube & the webinar recap page (same URL as registration).

This webinar is being recorded!

@salesforcedevs / #forcewebinar

#forcewebinar

Have Questions?

Dont wait until the end to ask your question! Technical support will answer questions starting now.

Respect Q&A etiquette Dont repeat questions. The support team is working their way

down the queue.

Stick around for live Q&A at the end Speakers will tackle more questions at the end, time-allowing.

Head to Developer Forums More questions? Visit developer.salesforce.com/forums

#forcewebinar

Introducing Salesforce1

All your past investments...

Drag and drop UI customization

Noti!cations Platform

Publisher Actions

...now in the future

All Your Customizations

All Your Devices

All Your CRM

All Your Apps

https://yourinstance.salesforce.com/one/one.app

Download the Salesforce1 Mobile App today

#forcewebinar

Visualforce in Salesforce1

Where can I use it? How do I use it? How can I make the most of it?

#forcewebinar

Visualforce in Salesforce1

Where can I use it? How do I use it? How can I make the most of it?

#forcewebinar

Visualforce Left Nav

Visualforce Pages in Left Nav

JavaScript navigation library available sforce.one.navigateToSObject etc.

#forcewebinar

Visualforce Publisher Actions

Visualforce Pages as Publisher Actions (VF page needs to the extend Standard Controller for

use with Object Speci!c Publisher Actions)

JavaScript Pub-Sub library available to interact with the publisher

publisher.setValidForSubmit

publisher.post

publisher.close

#forcewebinar

Visualforce Page Layout

Visualforce Pages in Page Layouts (VF page needs to the extend Standard Controller)

#forcewebinar

Visualforce Mobile Cards

Mobile Cards - Visualforce Pages on Record Detail

(VF page needs to the extend Standard Controller)

#forcewebinar

Demo: Basic Visualforce in Salesforce1

#forcewebinar

Visualforce in Salesforce1

Available for Salesforce Mobile apps #ag enabled VF page needs to the extend Standard Controller in order to use in the

Page Layout, Mobile Cards or Contextual Publisher Actions

Things to remember

#forcewebinar

Visualforce in Salesforce1

Where can I use it? How do I use it?

UI/UX Business Logic & Data Binding Navigation

How can I make the most of it?

#forcewebinar

Visualforce in Salesforce1

Where can I use it? How do I use it?

UI/UX Business Logic & Data Binding Navigation

How can I make the most of it?

#forcewebinar

Visualforce in Salesforce1 UI/UX considerations

Salesforce1 cannot auto-magically (yes, its a word) make Visualforce

pages mobile-optimized

#forcewebinar

Visualforce UI/UX considerations

Design VF pages taking the limited real-estate in mobile into account Decide which form-factors your page has to support - phone, tablet, both Develop for the mobile context

Use device features like geolocation, camera etc. where appropriate Mobile version of the page/app does not have to support all the bells and whistles

less is more

Optimize for your most common mobile use case discovery, data entry, search etc.

Use Responsive Design principles (same as the Salesforce1 app)

#forcewebinar

Making Visualforce Pages Mobile Optimized Mobile Design Templates

www.developerforce.com/mobile/services/mobile-templates

#forcewebinar

Making Visualforce Pages Mobile Optimized Twitter Bootstrap

http://www.youtube.com/watch?v=sIWchyCqDa4 Using Visualforce and Bootstrap -

http://bit.ly/VisualStrap

Custom Bootstrap fork that works with default Visualforce styling (Community developed)

#forcewebinar

Making Visualforce Pages Mobile Optimized Ionic Framework

http://coenraets.org/blog/2014/02/sample-force-com-mobile-application-with-ionic-and-angularjs/

#forcewebinar

Making Visualforce Pages Mobile Optimized Ratchet

http://coenraets.org/blog/2014/03/building-mobile-apps-for-salesforce-com-with-ratchet-2-0/

#forcewebinar

Making Visualforce Pages Mobile Optimized jQuery Mobile

http://www.developerforce.com/mobile/getting-started/html5/#jquery

#forcewebinar

Using Standard Visualforce Tags in Salesforce1

Note: Representative sample only. This is not a comprehensive list

**

Works and Supported

Supported, but avoid if

possible

Not Supported

#forcewebinar

Salesforce1 Style Guide

http://sfdc-styleguide.herokuapp.com/

Keeping Visualforce pages consistent with the Salesforce1 look and feel

#forcewebinar

Salesforce1 Style Guide

https://github.com/joshbirk/onestarter

OneStarter - An open-source jQuery plugin for easily making Visualforce pages appear in the style of Salesforce1.

#forcewebinar

Visualforce in Salesforce1 - UI/UX summary

Dos Donts Responsive design Desktop optimized design

Standard HTML markup and custom CSS

Standard VF structure tags and CSS

Less is more Support every bell and whistle

Use Mobile Context (e.g. camera, geolocation)

Recreate desktop functionality

Optimized for touch (e.g. larger tap areas, HTML5 form inputs)

Optimized for click

#forcewebinar

Visualforce in Salesforce1

Where can I use it? How do I use it?

UI/UX Business Logic & Data Binding Navigation

How can I make the most of it?

#forcewebinar

Avoid ViewState (no ) Favor Single Page apps (full page rendering is expensive on mobile) Consider JavaScript MV* Frameworks like AngularJS, Backbone etc. to

provide structure

Business Logic & Data Binding in Visualforce

Top 3 things to remember.

#forcewebinar

Business Logic & Data Binding in Visualforce

Invoke Apex Controller/Extension methods from JavaScript

Avoids ViewState (better performance) Stateless business logic Front-end heavy (i.e. JavaScript)

development

JavaScript Remoting

#forcewebinar

Business Logic & Data Binding in Visualforce

Basic CRUD op