Using Visualforce in Salesforce1

  • Published on
    26-Jan-2015

  • View
    112

  • Download
    4

Embed Size (px)

DESCRIPTION

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

Transcript

<ul><li> 1. Using Visualforce in Salesforce1 </li></ul> <p> 2. Speakers Sandeep Bhanot Mobile Geek (both kinds) @cloudysan 3. 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. 4. Introducing Salesforce1 All your past investments... Drag and drop UI customization Notifications 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 5. Visualforce in Salesforce1 Where can I use it? How do I use it? How can I make it better? 6. Visualforce in Salesforce1 Where can I use it? How do I use it? How can I make it better? 7. Visualforce Left Nav Visualforce Pages in Left Nav JavaScript navigation library available sforce.one.navigateToSObject etc. 8. 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 9. Visualforce Page Layout Visualforce Pages in Page Layouts (VF page needs to the extend Standard Controller) 10. Visualforce Mobile Cards Mobile Cards - Visualforce Pages on Record Detail (VF page needs to the extend Standard Controller) 11. Visualforce in Salesforce1 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 Things to remember 12. Visualforce in Salesforce1 Where can I use it? How do I use it? UI/UX Business Logic &amp; Data Binding Navigation Supporting multiple form factors Device Access How can I make it better? 13. Visualforce in Salesforce1 Where can I use it? How do I use it? UI/UX Business Logic &amp; Data Binding Navigation Supporting multiple form factors Device Access How can I make it better? 14. Visualforce in Salesforce1 UI/UX considerations Salesforce1 cannot auto-magically (yes, its a word) make Visualforce pages mobile-optimized 15. 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) 16. Making Visualforce Pages Mobile Optimized Mobile Design Templates www.developerforce.com/mobile/services/mobile-templates 17. 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) 18. Making Visualforce Pages Mobile Optimized Ionic Framework http://coenraets.org/blog/2014/02/sample-force-com-mobile- application-with-ionic-and-angularjs/ 19. Making Visualforce Pages Mobile Optimized Ratchet http://coenraets.org/blog/2014/03/building-mobile-apps-for- salesforce-com-with-ratchet-2-0/ 20. Making Visualforce Pages Mobile Optimized jQuery Mobile http://www.developerforce.com/mobile/getting-started/ html5/#jquery 21. 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 22. Using Standard Visualforce Tags in Salesforce1 Try and avoid using standard Visualforce tags (which are optimized for desktop) if possible. Use standard HTML markup (</p> <div>, , <p>, , etc.) + custom mobile-optimized CSS (e.g. Bootstrap) instead If you have to use structure tags like , use 1 column layout. 23. Salesforce1 Style Guide http://sfdc-styleguide.herokuapp.com/ Keeping Visualforce pages consistent with the Salesforce1 look and feel 24. 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. 25. 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 26. Visualforce in Salesforce1 Where can I use it? How do I use it? UI/UX Business Logic &amp; Data Binding Navigation Supporting multiple form factors Device Access How can I make it better? 27. 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 &amp; Data Binding in Visualforce Top 3 things to remember. 28. Business Logic &amp; 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 29. Business Logic &amp; 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) 30. Business Logic &amp; Data Binding in Visualforce Use to display lists is your friend 31. Business Logic &amp; 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 32. Visualforce in Salesforce1 Data Binding summary Dos Donts JavaScript Remoting Visualforce Remote Objects HTML5 Input Elements (tel, email, date etc.) Single Page apps Multi-page apps JavaScript MV* Frameworks like AngularJS, Backbone etc. No JavaScript Framework Stateless &amp; Asynchronous Server-side state &amp; synchronous 33. Visualforce in Salesforce1 Where can I use it? How do I use it? UI/UX Business Logic &amp; Data Binding Navigation Supporting multiple form factors Device Access How can I make it better? 34. 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 35. Visualforce in Salesforce1 - Navigation Avoid using window.open Manipulating window.location.href directly will NOT work Dont use target="_blank in navigation links External links (e.g. ) will open in a new child browser Internal links will open in current window Things to remember. 36. Visualforce in Salesforce1 Where can I use it? How do I use it? UI/UX Business Logic &amp; Data Binding Navigation Supporting multiple form factors Device Access How can I make it better? 37. Supporting multiple form factors in Visualforce But my Visualforce page has to work in Salesforce1 (phone &amp; tablet) AND Desktop 38. Supporting multiple form factors in Visualforce Option 1 (existing pages) : Refactor to make mobile-friendly Minimize/eliminate use of VF tags like , etc. that are not mobile-optimized and/or supported in Salesforce1 Replace with JavaScript Remoting or Remote Objects where possible 39. Supporting multiple form factors in Visualforce Option 2 : Responsive Design Recommended approach 40. 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 41. Supporting multiple form factors in Visualforce Remember to handle navigation differently in Salesforce1 vs Desktop 42. Visualforce in Salesforce1 Where can I use it? How do I use it? UI/UX Business Logic &amp; Data Binding Navigation Supporting multiple form factors Device Access How can I make it better? 43. 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) (for Camera access) 44. Visualforce in Salesforce1 Where can I use it? How do I use it? UI/UX Business Logic &amp; Data Binding Navigation Supporting multiple form factors Device Access How can I make it better? Performance Debugging 45. Visualforce in Salesforce1 Where can I use it? How do I use it? UI/UX Business Logic &amp; Data Binding Navigation Supporting multiple form factors Device Access How can I make it better? Performance Debugging 46. Visualforce Performance in Salesforce1 The 3 most important things about developing mobile web pages Performance, Performance, Performance. 47. Visualforce Performance in Salesforce1 Some Performance tips for designing mobile VF pages Avoid viewstate (no ) 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 </p><ul><li> section instead of individual </li><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 </li></ul></div>