developer guide: turn your force.com canvas app into a salesforce1 app

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