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
