force.com canvas - a quick introduction

Force.com Canvas

“With the Force.com Canvas SDK, you can now integrate your Web app with the trusted salesforce.com platform: Your language, your code.” – From Salesforce Marketing Material

Presented by Steven Herod to Sydney Salesforce Developers Group 17th April 2013

About Me

I work for Cloud Sherpas as a Technical Architect.

@sherod on Twitter

http://limitexception.herod.net

What can it do?

• Connect a compatible web application running anywhere to your Salesforce org.

• Allow your app to interact with your Salesforce org as the logged in user– Using backend code and the SOAP/REST APIs– Using Javascript + REST API

• Display your web app in– Chatter page– VisualForce Page

• Tab• Page Layout• Stand alone

Why would you use it

• You are an independent ISV or a Company with a complex web application already running outside of the Force.com Platform that you want to expose to Salesforce users easily and securely.

• You have data residency requirements and you want a way to combine Salesforce with information that cannot leave your premises

Supported Browsers

• Mozilla® Firefox® (preferred)• Google Chrome™• Microsoft® Internet Explorer® version 8• Apple® Safari® (be sure to set the Block

Cookies setting to Never)

Getting it

• In Pilot since Winter ‘12• Available in new Developer Edition orgs• Ask support to enable it in existing orgs.• Becomes Generally Available in Summer 13

(May-June 2013).

The components of Canvas

• To securely pass the users identity to your APPSSL(TLS)/HMAC/SHA

• The capabilities of your browser to do the Cross Domain Javascript / etcYour Browser

• How your app gets embedded into SalesforceJavaScript/IFRAME

• REST / SOAP for getting back to Salesforce dataSalesforce APIs

• Javascript API with helpful stuff• Kickstart Java Web ApplicationCanvas SDK

DEMO

SETUP OF THE CANVAS APP ON SALESFORCE

The Apps definition in Salesforce

The Apps definition in Salesforce

WHAT IT LOOKS LIKE ONCE EMBEDDED

NoteThis demo is a bit tongue in cheek.

To make this really obvious I’m using the Geocities theme for Bootstrap!

http://divshot.github.io/geo-bootstrap/

http://twitter.github.io/bootstrap/

Embedded within Chatter Page

Canvas full screen in a VF Page

Canvas in Complex VF Page

Message back to SF using Javascript

Embedded in a Page Layout

Canvas App kicked off from Button

NOW THE CANVAS APPThis uses Josh Birks PHP-Canvas Sample from Github

First, verify the request

Once verified, now deserialize

And put the information passed to your app to work

Finding the Code

• Javascript SDK– Connects apps at the UI level (via your Browser)– https://github.com/forcedotcom/SalesforceCanva

sJavascriptSDK• Sample Java App for Heroku – https://github.com/forcedotcom/SalesforceCanva

sFrameworkSDK• Sample PHP app (By Josh Birk)– https://github.com/joshbirk/Canvas-PHP