Developer Guide: Turn Your Canvas App Into a Salesforce1 App

  • View

  • Download

Embed Size (px)


Using Spanning Backup for Salesforce as a real-world example, we'll walk you through the steps to translate your Canvas app into a mobile app that can be used on Salesforce1. We'll explain the steps necessary in Salesforce, the technologies and tools we used, the challenges we encountered and how we overcame them. This is a terrific resource for anyone looking to get started with Salesforce1. If you'd like to download the full developer guide, you can get it here:

Text of Developer Guide: Turn Your Canvas App Into a Salesforce1 App

  • 1. Surface Your Existing Canvas App inSalesforce1Patricia CifraSenior Software Eng.@pncifraGordon BockusSenior Software Eng.@gordonk66

2. Overview What is a Canvas App? What is a Salesforce1 App? Configuration Changes Application Changes Tools Challenges 3. What is a Canvas app? Web application embedded in the Salesforce platform via an iframe. Has several advantages over a standalone third-party Salesforce offering When launched, app is provided with signed request. This signed request gives the app the abilityto identify the user/organization that is accessing the it and an authentication token that can beused to acquire Salesforce data via the rest API. Also provides mechanisms for the application to resize its containing iframe to fit into the viewwhere it is embedded. Can be inserted in various locations throughout the Salesforce CRM: Standalone page with its own tab Embedded in any of the standard objects like Accounts, Leads, Contacts, etc. Can also be linked to a Chatter post Allows you to have a single app that adapts to where it is being displayed 4. Webpage with Tab 5. Embedded in Chatter Post 6. What is a Salesforce1 app? 7. What is a Salesforce1 app? New Mobile platform for Salesforce Built around Salesforces API feeds Platform that is mobile-ready and more accessible to customers Accessible via web/browser or native web Mobile platform introduced at Dreamforce last year 8. Technology Stack AngularJS: Open-source web application framework maintained by google.Used for building SPAs (Single page apps) Twitter Bootstrap 3: Front-end framework built by Twitter that provides grids,components, javascript plugins, typography, form controls Sass: CSS preprocessor that provides tools to better organize and maintainyour CSS Node: Cross platform runtime environment for server-side and networkingapplications. runs our server side application which is written in javascript 9. Tools and Frameworks for Mobile Twitter Bootstrap 3 Multi-device support Mobile first and always responsive Preprocessors Cross browser Mobile detection in Angular 10. Configuration Changes Salesforce:1. VisualForce Page2. Canvas Application Web Application:3. CSS4. JS 11. Add Visualforce Page to Mobile Navigation 12. Enable Visualforce Page for Mobile 13. Enable the SF1 Mobile Browser 14. Web Application Changes Detecting Mobile: Width After Mobile is Detected: Add CSS class to main container Direct application to load mobile view 15. Required JavaScript 16. Detect Mobile 17. Mobile-Enabled CSS 18. Scroll Vertically/Fill Horizontally min-height: 250px overflow: scroll; width: 100%; webkit-overflow-scrolling:touch; webkit-transform: translated(0%,0px,0px); 19. Navigation & Layout for Desktop Version 20. Navigation & Layout for Mobile Version 21. Reusable Components Controllers Reused Controllers for: Batch Views Details Activities Log histories Common UtilitiesHttpServicesFiltersConstants Styles 22. Mobile Templates 23. Mobile Templates 24. Mobile Templates 25. Development - Chrome 26. Development - iOS 27. Development - Android Genymotion Hostname StaticIP 28. Development - Native Deploy to a public webserver Install Canvas app in test domain Test on devices Test web version! 29. Challenges Resolved IOS: Bootstrap responsive layout not adhering to width of device Android: SVG images do not scale Open Android: Scrolling broken at times SF1: Long Visualforce pages jump to top Fixed header 30. Visit us at booth #N2236Download the Developer Guide:httttp::////biitt..lly//SF1devguiide