using visualforce in salesforce1

55
Using Visualforce in Salesforce1

Upload: salesforce-developers

Post on 26-Jan-2015

135 views

Category:

Technology


4 download

DESCRIPTION

This deck covers some of the best practices for how and when to use Visualforce in Salesforce1.

TRANSCRIPT

Page 1: Using Visualforce in Salesforce1

Using Visualforce in Salesforce1

Page 2: Using Visualforce in Salesforce1

Speakers

Sandeep Bhanot Mobile Geek (both kinds) @cloudysan

Page 3: Using Visualforce in Salesforce1

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.

Page 4: Using Visualforce in Salesforce1

Introducing Salesforce1

All your past investments...

Drag and drop UI customization

Noti!cations Platform

Publisher Actions

...now in the future

Download Salesforce1 App today

All Your Customizations

All Your Devices

All Your CRM

All Your Apps

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

Page 5: Using Visualforce in Salesforce1

Visualforce in Salesforce1

§  Where can I use it?

§  How do I use it?

§  How can I make it better?

Page 6: Using Visualforce in Salesforce1

Visualforce in Salesforce1

§  Where can I use it?

§  How do I use it?

§  How can I make it better?

Page 7: Using Visualforce in Salesforce1

Visualforce – Left Nav

Visualforce Pages in Left Nav

JavaScript navigation library available sforce.one.navigateToSObject etc.

Page 8: Using Visualforce in Salesforce1

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

Page 9: Using Visualforce in Salesforce1

Visualforce – Page Layout

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

Page 10: Using Visualforce in Salesforce1

Visualforce – Mobile Cards

Mobile Cards - Visualforce Pages on Record Detail

(VF page needs to the extend Standard Controller)

Page 11: Using Visualforce in Salesforce1

Visualforce in Salesforce1

§  <apex:page docType="html-5.0" …>

§  ‘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 Publisher Actions

Things to remember…

Page 12: Using Visualforce in Salesforce1

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?

Page 13: Using Visualforce in Salesforce1

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?

Page 14: Using Visualforce in Salesforce1

Visualforce in Salesforce1 – UI/UX considerations

Salesforce1 cannot auto-magically (yes, it’s a word) make Visualforce

pages mobile-optimized

Page 15: Using Visualforce in Salesforce1

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)

Page 16: Using Visualforce in Salesforce1

Making Visualforce Pages Mobile Optimized Mobile Design Templates

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

Page 17: Using Visualforce in Salesforce1

Making Visualforce Pages Mobile Optimized Twitter Bootstrap

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

http://bit.ly/VisualStrap

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

Page 18: Using Visualforce in Salesforce1

Making Visualforce Pages Mobile Optimized Ionic Framework

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

Page 19: Using Visualforce in Salesforce1

Making Visualforce Pages Mobile Optimized Ratchet

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

Page 20: Using Visualforce in Salesforce1

Making Visualforce Pages Mobile Optimized jQuery Mobile

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

Page 21: Using Visualforce in Salesforce1

Using Standard Visualforce Tags in Salesforce1

<apex:repeat> <apex:outputPanel>

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

<apex:pageBlock> <apex:pageBlockButtons> <apex:pageBlockSection> <apex:pageBlockSectionItem>

<apex:pageBlockTable> <apex:inlineEditSupport>

<apex:detail> <apex:inputField>** <apex:enhancedList> <apex:listViews> <apex:relatedList>

<chatter:*> <liveagent:*>

Works and Supported

Supported, but avoid if

possible

Not Supported

Page 22: Using Visualforce in Salesforce1

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.

Page 23: Using Visualforce in Salesforce1

Salesforce1 Style Guide

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

Keeping Visualforce pages consistent with the Salesforce1 look and feel

Page 24: Using Visualforce in Salesforce1

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.

Page 25: Using Visualforce in Salesforce1

Visualforce in Salesforce1 - UI/UX summary

Dos Don’ts 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

Page 26: Using Visualforce in Salesforce1

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?

Page 27: Using Visualforce in Salesforce1

§  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

Top 3 things to remember….

Page 28: Using Visualforce in Salesforce1

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

Page 29: Using Visualforce in Salesforce1

Business Logic & Data Binding in Visualforce

§  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)

Visualforce Remote Objects (new Pilot in Spring ’14)

Page 30: Using Visualforce in Salesforce1

Business Logic & Data Binding in Visualforce

§  Use <apex:repeat> to display lists

<apex:repeat> is your friend

Page 31: Using Visualforce in Salesforce1

Business Logic & Data Binding in Visualforce

Mobile Packs

http://www.developerforce.com/mobile/services/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

Page 32: Using Visualforce in Salesforce1

Visualforce in Salesforce1 – Data Binding summary

Dos Don’ts JavaScript Remoting <apex:form>

Visualforce Remote Objects <apex:form>

HTML5 Input Elements (tel, email, date etc.)

<apex:inputField>

<apex:input type=“tel/email/…”/> <apex:inputField>

Single Page apps Multi-page apps

JavaScript MV* Frameworks like AngularJS, Backbone etc.

No JavaScript Framework

Stateless & Asynchronous Server-side state & synchronous

Page 33: Using Visualforce in Salesforce1

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?

Page 34: Using Visualforce in Salesforce1

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

Page 35: Using Visualforce in Salesforce1

Visualforce in Salesforce1 - Navigation

§  Avoid using window.open

§  Manipulating window.location.href directly will NOT work

§  Don’t 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

Things to remember….

Page 36: Using Visualforce in Salesforce1

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?

Page 37: Using Visualforce in Salesforce1

Supporting multiple form factors in Visualforce

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

Page 38: Using Visualforce in Salesforce1

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

Page 39: Using Visualforce in Salesforce1

Supporting multiple form factors in Visualforce

Option 2 : Responsive Design

Recommended approach

Page 40: Using Visualforce in Salesforce1

Supporting multiple form factors in Visualforce

Option 3 : Serve different content based on form-factor

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

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

Page 41: Using Visualforce in Salesforce1

Supporting multiple form factors in Visualforce

Remember to handle navigation differently in Salesforce1 vs Desktop

Page 42: Using Visualforce in Salesforce1

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?

Page 43: Using Visualforce in Salesforce1

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="!le" accept="image/*"/> (for Camera access)

Page 44: Using Visualforce in Salesforce1

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

Page 45: Using Visualforce in Salesforce1

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

Page 46: Using Visualforce in Salesforce1

Visualforce Performance in Salesforce1

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

Page 47: Using Visualforce in Salesforce1

Visualforce Performance in Salesforce1 Some Performance tips for designing mobile VF pages

§  Avoid viewstate (no <apex:form>)

§  <apex:page cache="true" expires="600">

§  Minimize all your CSS and JavaScript (using tools like YUI Compressor) and compress images

§  Use optimization techniques like image lazy loading and in!nite scroll

§  Insert/update the DOM in bulk to avoid browser re#ows (e.g. insert an entire <ul> section instead of individual <li> elements)

General

§  Use libraries like FastClick to avoid the default 300ms tap delay in mobile web browsers

§  Use lightweight JavaScript libraries like Zepto.js instead of Jquery

§  Move your <script> statements to the end of the Visualforce page

JavaScript

Page 48: Using Visualforce in Salesforce1

Visualforce Performance in Salesforce1

Some Performance tips for designing mobile VF pages

§  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

CSS/Images

Page 49: Using Visualforce in Salesforce1

Visualforce Performance in Salesforce1

Some Tools to help you measure page performance

§  WebPageTest

§  PageSpeed Insights

§  Chrome Developer Tools - Timeline

Page 50: Using Visualforce in Salesforce1

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

Page 51: Using Visualforce in Salesforce1

Salesforce1 comes in two #avors

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

Web version Hybrid version

Debugging Visualforce in Salesforce1

Page 52: Using Visualforce in Salesforce1

Debug your Visualforce page in the web version of Salesforce1 !rst

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

Debugging Visualforce in Salesforce1

Use standard web debugging tools like Chrome Dev. Tools and

Firebug

Page 53: Using Visualforce in Salesforce1

Debugging Visualforce pages running on a device (i.e. inside the Hybrid Salesforce1 app)

http://people.apache.org/~pmuellr/weinre/docs/latest/

Debugging Visualforce in Salesforce1

Weinre – open source tool to debug web pages running on a device

Page 54: Using Visualforce in Salesforce1

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

Page 55: Using Visualforce in Salesforce1

Follow Developer Force for the Latest News

@forcedotcom / #forcewebinar

Developer Force – Force.com Community

+Developer Force – Force.com Community

Developer Force

Developer Force Group