Using Visualforce in Salesforce1

Speakers
Sandeep Bhanot
Mobile Geek (both kinds) @cloudysan

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 nonsalesforce.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 W eb 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.

Introducing Salesforce1
All your past investments... All Your Apps All Your CRM All Your Customizations

...now in the future

Notifications Platform Drag and drop UI customization Publisher Actions

All Your Devices

Download Salesforce1 App today https://yourinstance.salesforce.com/one/one.app

Visualforce in Salesforce1
Where can I use it? How do I use it? How can I make it better?

Visualforce in Salesforce1
Where can I use it? How do I use it? How can I make it better?

Visualforce Left Nav

Visualforce Pages in Left Nav

JavaScript navigation library available
sforce.one.navigateToSObject etc.

Visualforce Publisher Actions

Visualforce Pages as Publisher Actions

(VF page needs to the extend Standard Controller for use with Object Specific Publisher Actions)

JavaScript Pub-Sub library available to interact with the publisher

publisher.setValidForSubmit publisher.post publisher.close

Visualforce Page Layout

Visualforce Pages in Page Layouts

(VF page needs to the extend Standard Controller)

Visualforce Mobile Cards

Mobile Cards - Visualforce Pages on Record Detail

(VF page needs to the extend Standard Controller)

Visualforce in Salesforce1
Things to remember
<apex:page docType="html-5.0" > Available for Salesforce Mobile apps flag enabled VF page needs to the extend Standard Controller in order to use in the Page Layout, Mobile Cards or Publisher Actions

Visualforce in Salesforce1
Where can I use it? How do I use it?
UI/UX Business Logic & Data Binding Navigation Supporting multiple form factors Device Access

How can I make it better?

Visualforce in Salesforce1
Where can I use it? How do I use it?
UI/UX Business Logic & Data Binding Navigation Supporting multiple form factors Device Access

How can I make it better?

Visualforce in Salesforce1 UI/UX considerations

Salesforce1 cannot automagically (yes, its a word) make Visualforce pages mobileoptimized

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.

<apex:page standardStylesheets="false"> Use Responsive Design principles (same as the Salesforce1 app)

Making Visualforce Pages Mobile Optimized

Mobile Design Templates

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

Making Visualforce Pages Mobile Optimized

Twitter Bootstrap

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

Custom Bootstrap fork that works with default Visualforce styling (Community developed) http://bit.ly/VisualStrap

Making Visualforce Pages Mobile Optimized

Ionic Framework

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

Making Visualforce Pages Mobile Optimized

Ratchet

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

Making Visualforce Pages Mobile Optimized

jQuery Mobile

http://www.developerforce.com/mobile/gettingstarted/html5/#jquery

Using Standard Visualforce Tags in Salesforce1

<apex:repeat> <apex:outputPanel>
Works and Supported

<apex:pageBlock> <apex:pageBlockButtons> <apex:pageBlockSection> <apex:pageBlockSectionItem> <apex:pageBlockTable> <apex:inlineEditSupport> <apex:detail> <apex:inputField>** <apex:enhancedList> <apex:listViews> <apex:relatedList> <chatter:*> <liveagent:*>
Note: Representative sample only. This is not a comprehensive list

Supported, but avoid if possible

Not Supported

Using Standard Visualforce Tags in Salesforce1

Try and avoid using standard Visualforce tags (which are optimized for desktop) if possible. Use standard HTML markup (<div>, <section>, <p>, <a>, <li> etc.) + custom mobile-optimized CSS (e.g. Bootstrap) instead If you have to use structure tags like <apex:pageBlockSection>, use 1 column layout.

Salesforce1 Style Guide

Keeping Visualforce pages consistent with the Salesforce1 look and feel

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

Visualforce in Salesforce1 - UI/UX summary

Dos
Responsive design Standard HTML markup and custom CSS
Less is more Use Mobile Context (e.g. camera, geolocation)

Donts
Desktop optimized design Standard VF structure tags and CSS
Support every bell and whistle Recreate desktop functionality

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

Optimized for click

Visualforce in Salesforce1
Where can I use it? How do I use it?
UI/UX Business Logic & Data Binding Navigation Supporting multiple form factors Device Access

How can I make it better?

Business Logic & Data Binding in Visualforce

Top 3 things to remember.

Avoid ViewState (no <apex:form>) 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

JavaScript Remoting

Invoke Apex Controller/Extension methods from JavaScript Avoids ViewState (better performance) Stateless business logic Front-end heavy (i.e. JavaScript) development

Business Logic & Data Binding in Visualforce

Visualforce Remote Objects (new Pilot in Spring 14)
Basic CRUD operations on SObjects directly from JavaScript Avoids ViewState (better performance)

Reduces server-side Apex code

Front-end heavy (i.e. JavaScript) development Replaces ForceTk/RemoteTk (in the VF context)

Business Logic & Data Binding in Visualforce

<apex:repeat> is your friend

Use <apex:repeat> to display lists

Business Logic & Data Binding in Visualforce

Mobile Packs
Use popular open-source JavaScript MV* Frameworks in Visualforce Great way to build single-page mobile web apps Mobile Packs handle data binding with Salesforce

http://www.developerforce.com/mobile/services/mobile-packs

Visualforce in Salesforce1 Data Binding summary

Dos
JavaScript Remoting Visualforce Remote Objects HTML5 Input Elements (tel, email, date etc.) <apex:input type=tel/email//> Single Page apps JavaScript MV* Frameworks like AngularJS, Backbone etc. Stateless & Asynchronous

Donts
<apex:form> <apex:form> <apex:inputField> <apex:inputField> Multi-page apps No JavaScript Framework Server-side state & synchronous

Visualforce in Salesforce1
Where can I use it? How do I use it?
UI/UX Business Logic & Data Binding Navigation Supporting multiple form factors Device Access

How can I make it better?

Visualforce in Salesforce1 - Navigation

Salesforce1 provides a JavaScript navigation library via the sforce.one object

sforce.one.navigateToSObject sforce.one.navigateToURL sforce.one.navigateToFeed sforce.one.navigateToFeedItemDetail sforce.one.navigateToRelatedList sforce.one.navigateToList sforce.one.editRecord sforce.one.createRecord

Visualforce in Salesforce1 - Navigation

Things to remember.

Avoid using window.open

Manipulating window.location.href directly will NOT work Dont use target="_blank in navigation links

External links (e.g. <a href=www.test.com>) will open in a new child browser
Internal links will open in current window

Visualforce in Salesforce1
Where can I use it? How do I use it?
UI/UX Business Logic & Data Binding Navigation Supporting multiple form factors Device Access

How can I make it better?

Supporting multiple form factors in Visualforce

But my Visualforce page has to work in Salesforce1 (phone & tablet) AND Desktop

Supporting multiple form factors in Visualforce

Option 1 (existing pages) : Refactor to make mobile-friendly
Minimize/eliminate use of VF tags like <apex:pageBlock>, <apex:detail> etc. that are not mobile-optimized and/or supported in Salesforce1
Replace <apex:form> with JavaScript Remoting or Remote Objects where possible

Supporting multiple form factors in Visualforce

Option 2 : Responsive Design

Recommended approach

Supporting multiple form factors in Visualforce

Option 3 : Serve different content based on form-factor

Libraries like Device.js or Modernizr can be used to detect form-factor

Redirect to different VF pages based on form factor, OR Conditionally show sections of the page based on form factor

http://blogs.developerforce.com/developer-relations/2012/05/cross-device-html5-apps-using-visualforce.html

Supporting multiple form factors in Visualforce

Remember to handle navigation differently in Salesforce1 vs Desktop

Visualforce in Salesforce1
Where can I use it? How do I use it?
UI/UX Business Logic & Data Binding Navigation Supporting multiple form factors Device Access

How can I make it better?

Device Access in Salesforce1

PhoneGap/Cordova type device access is not available in the Salesforce1 app.

HOWEVER.

Geolocation API (check the Saleforce1 Dev Guide for an example) <input type="file" accept="image/*"/> (for Camera access)

Visualforce in Salesforce1
Where can I use it? How do I use it?
UI/UX Business Logic & Data Binding Navigation Supporting multiple form factors Device Access

How can I make it better?

Performance Debugging

Visualforce in Salesforce1
Where can I use it? How do I use it?
UI/UX Business Logic & Data Binding Navigation Supporting multiple form factors Device Access

How can I make it better?

Performance Debugging

Visualforce Performance in Salesforce1

The 3 most important things about developing mobile web pages Performance, Performance, Performance.

Visualforce Performance in Salesforce1

Some Performance tips for designing mobile VF pages
General

Avoid viewstate (no <apex:form>)

<apex:page cache="true" expires="600"> Use libraries like FastClick to avoid the default 300ms tap delay in mobile web browsers Minimize all your CSS and JavaScript (using tools like YUI Compressor) and compress images Use optimization techniques like image lazy loading and infinite scroll

Insert/update the DOM in bulk to avoid browser reflows (e.g. insert an entire <ul> section instead of individual <li> elements) JavaScript Use lightweight JavaScript libraries like Zepto.js instead of JQuery Move your <script> statements to the end of the Visualforce page

Visualforce Performance in Salesforce1

Some Performance tips for designing mobile VF pages
CSS/Images
Use CSS Sprites to minimize HTTP connections Avoid CSS techniques like drop shadows, gradients etc. that affect page performance. Flat design is new black. Use Hardware Accelerated CSS properties where appropriate Use PNG/JPG images (no GIFs). Avoid images completely (use CSS3 instead) where possible. Build single page apps with CSS transitions between screens/sections Conditionally load static assets (CSS, images etc.) based on form factor

Visualforce Performance in Salesforce1

Some Tools to help you measure page performance
WebPageTest PageSpeed Insights Chrome Developer Tools - Timeline

Visualforce in Salesforce1
Where can I use it? How do I use it?
UI/UX Business Logic & Data Binding Navigation Supporting multiple form factors Device Access

How can I make it better?

Performance Debugging

Debugging Visualforce in Salesforce1

Salesforce1 comes in two flavors
Web version Hybrid version

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

Debugging Visualforce in Salesforce1

Debug your Visualforce page in the web version of Salesforce1

Use standard web debugging tools like Chrome Dev. Tools and Firebug

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

Salesforce1 Developer Resources

Webinar: Intro to Salesforce1 Mobile App Development

Dreamforce Sessions bit.ly/s1-df-sessions

Developer Guide bit.ly/s1-dev-guide Blogs:
6 things you need to know: bit.ly/s1-6-things Mobile cards: bit.ly/s1-mobile-cards

Follow Developer Force for the Latest News

@forcedotcom / #forcewebinar Developer Force Force.com Community +Developer Force Community Developer Force Developer Force Group Force.com