25
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 17 th April 2013

Force.com Canvas - a Quick Introduction

  • View
    8.470

  • Download
    1

Embed Size (px)

DESCRIPTION

A quick walk through of the basics of using the new Canvas integration mechanism.

Citation preview

Page 1: 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

Page 2: Force.com Canvas - a Quick Introduction

About Me

I work for Cloud Sherpas as a Technical Architect.

@sherod on Twitter

http://limitexception.herod.net

Page 3: Force.com Canvas - a Quick Introduction

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

Page 4: Force.com Canvas - a Quick Introduction

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

Page 5: Force.com Canvas - a Quick Introduction

Supported Browsers

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

Cookies setting to Never)

Page 6: Force.com Canvas - a Quick Introduction

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).

Page 7: Force.com Canvas - a Quick Introduction

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

Page 8: Force.com Canvas - a Quick Introduction

DEMO

Page 9: Force.com Canvas - a Quick Introduction

SETUP OF THE CANVAS APP ON SALESFORCE

Page 10: Force.com Canvas - a Quick Introduction

The Apps definition in Salesforce

Page 11: Force.com Canvas - a Quick Introduction

The Apps definition in Salesforce

Page 12: Force.com Canvas - a Quick Introduction

WHAT IT LOOKS LIKE ONCE EMBEDDED

Page 13: Force.com Canvas - a Quick Introduction

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/

Page 14: Force.com Canvas - a Quick Introduction

Embedded within Chatter Page

Page 15: Force.com Canvas - a Quick Introduction

Canvas full screen in a VF Page

Page 16: Force.com Canvas - a Quick Introduction

Canvas in Complex VF Page

Page 17: Force.com Canvas - a Quick Introduction

Message back to SF using Javascript

Page 18: Force.com Canvas - a Quick Introduction

Embedded in a Page Layout

Page 19: Force.com Canvas - a Quick Introduction

Canvas App kicked off from Button

Page 20: Force.com Canvas - a Quick Introduction
Page 21: Force.com Canvas - a Quick Introduction

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

Page 22: Force.com Canvas - a Quick Introduction

First, verify the request

Page 23: Force.com Canvas - a Quick Introduction

Once verified, now deserialize

Page 24: Force.com Canvas - a Quick Introduction

And put the information passed to your app to work

Page 25: Force.com Canvas - a Quick Introduction

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