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

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

2. About Me
I work for Cloud Sherpas as a Technical
Architect.
@sherod on Twitter
http://limitexception.herod.net

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

4. Supported Browsers
• Mozilla® Firefox® (preferred)
• Google Chrome™
• Microsoft® Internet Explorer® version 8
• Apple® Safari® (be sure to set the Block
Cookies setting to Never)

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

6. The components of Canvas
• To securely pass the users identity to your APP
SSL(TLS)/HMAC/SHA
• The capabilities of your browser to do the Cross
Domain Javascript / etc
Your Browser
• How your app gets embedded into Salesforce
JavaScript/IFRAME
• REST / SOAP for getting back to Salesforce data
Salesforce APIs
• Javascript API with helpful stuff
• Kickstart Java Web Application
Canvas SDK

7. DEMO

8. SETUP OF THE CANVAS APP ON
SALESFORCE

9. The Apps definition in Salesforce

10. The Apps definition in Salesforce

11. WHAT IT LOOKS LIKE ONCE
EMBEDDED

12. Note
This 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/

13. Embedded within Chatter Page

14. Canvas full screen in a VF Page

15. Canvas in Complex VF Page

16. Message back to SF using Javascript

17. Embedded in a Page Layout

18. Canvas App kicked off from Button

20. NOW THE CANVAS APP
This uses Josh Birks PHP-Canvas Sample from Github

21. First, verify the request

22. Once verified, now deserialize

23. And put the information passed to
your app to work

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