developer guide: turn your force.com canvas app into a salesforce1 app
DESCRIPTION
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: http://bit.ly/SF1devguide.TRANSCRIPT
Surface Your Existing Force.com Canvas App in Salesforce1
Patricia CifraSenior Software Eng.@pncifra
Gordon BockusSenior Software Eng.@gordonk66
Overview
• What is a Canvas App?
• What is a Salesforce1 App?
• Configuration Changes
• Application Changes
• Tools
• Challenges
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 ability
to identify the user/organization that is accessing the it and an authentication token that can be
used to acquire Salesforce data via the Force.com rest API. • Also provides mechanisms for the application to resize its containing iframe to fit into the view
where 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
Webpage with Tab
Embedded in Chatter Post
What is a Salesforce1 app?
What is a Salesforce1 app?
• New Mobile platform for Salesforce• Built around Salesforce’s 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
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 maintain
your CSS
• Node: Cross platform runtime environment for server-side and networking
applications. runs our server side application which is written in javascript
Tools and Frameworks for Mobile
• Twitter Bootstrap 3
• Multi-device support
• Mobile first and always responsive
• Preprocessors
• Cross browser
• Mobile detection in Angular
Configuration Changes
• Salesforce:
1. VisualForce Page
2. Canvas Application• Web Application:
3. CSS
4. JS
Add Visualforce Page to Mobile Navigation
Enable Visualforce Page for Mobile
Enable the SF1 Mobile Browser
Web Application Changes
• Detecting Mobile:• Width• http://detectmobilebrowsers.com
• After Mobile is Detected:• Add CSS class to main container• Direct application to load mobile view
Required JavaScript
Detect Mobile
Mobile-Enabled CSS
Scroll Vertically/Fill Horizontally
• min-height: 250px
• overflow: scroll;
• width: 100%;
• webkit-overflow-scrolling:touch;
• webkit-transform: translated(0%,0px,0px);
Navigation & Layout for Desktop Version
Navigation & Layout for Mobile Version
Reusable Components
• Controllers• Reused Controllers for:
• Batch Views• Details• Activities• Log histories
• Common Utilities•Http•Services•Filters•Constants
• Styles
Mobile Templates
Mobile Templates
Mobile Templates
Development - Chrome
Development - iOS
Development - Android
• Genymotion
• Hostname
• StaticIP
Development - Native
• Deploy to a public webserver • Install Canvas app in test domain• Test on devices• Test web version!
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
Visit us at booth #N2236Download the Developer Guide:
http://bit.ly/SF1devguidehttp://bit.ly/SF1devguide