Integrate your applications with the salesforce.com user interface using the Force.com Canvas framework. Join us as we take an in-depth look at the components of the Force.com Canvas SDK. Learn how to expose your application inside of Salesforce, how to allow your app to interact with the salesforce.com Data Layer, how to publish and subscribe to events between applications, and how to design your app to fit into different areas of the salesforce.com UI.

1. Deep Dive into the Force.com
Canvas Framework
Jay Hurst, salesforce.com, Product Manager
@extraidea

2. Safe Harbor
Safe harbor statement under the Private Securities Litigation Reform Act of 1995:
This presentation may contain forward-looking statements that involve risks, uncertainties, and assumptions. If any such uncertainties
materialize or if any of the assumptions proves incorrect, the results of salesforce.com, inc. could differ materially from the results
expressed or implied by the forward-looking statements we make. All statements other than statements of historical fact could be
deemed forward-looking, including any projections of product or service availability, subscriber growth, earnings, revenues, or other
financial items and any statements regarding strategies or plans of management for future operations, statements of belief, any
statements concerning new, planned, or upgraded services or technology developments and customer contracts or use of our services.
The risks and uncertainties referred to above include – but are not limited to – risks associated with developing and delivering new
functionality for our service, new products and services, our new business model, our past operating losses, possible fluctuations in our
operating results and rate of growth, interruptions or delays in our Web hosting, breach of our security measures, the outcome of any
litigation, risks associated with completed and any possible mergers and acquisitions, the immature market in which we operate, our
relatively limited operating history, our ability to expand, retain, and motivate our employees and manage our growth, new releases of our
service and successful customer deployment, our limited history reselling non-salesforce.com products, and utilization and selling to
larger enterprise customers. Further information on potential factors that could affect the financial results of salesforce.com, inc. is
included in our annual report on Form 10-K for the most recent fiscal year and in our quarterly report on Form 10-Q for the most recent
fiscal quarter. These documents and others containing important disclosures are available on the SEC Filings section of the Investor
Information section of our Web site.
Any unreleased services or features referenced in this or other presentations, press releases or public statements are not currently
available and may not be delivered on time or at all. Customers who purchase our services should make the purchase decisions
based upon features that are currently available. Salesforce.com, inc. assumes no obligation and does not intend to update these
forward-looking statements.

3. Jay Hurst
Product Manager
@extraidea

4. Questions
▪ Who has played with the Force.com
Canvas SDK?
▪ Who has thought of at least one
potential app that could be used with
Force.com Canvas?
▪ Who has actually developed a Force.
com Canvas App?

5. What is Force.com Canvas

6. Introducing Force.com Canvas
Platform service to allow external applications to be easily and
securely integrated into Salesforce from their native environment
with little re-design.
▪ Services Include
• JavaScript SDK
• Simplified Authentication (Signed Request or OAuth)
• Context Services (Including Custom Parameters)
• Cross Domain API Calls
• Eventing model
• App Registration and Management

7. What does Force.com Canvas do?
Your Web Application is surfaced inside salesforce.com
• Displayed using standard web technology
• JavaScript SDK allows communication between apps
• Installation and management of the app is controlled by the admin
SDK

8. Force.com Canvas Usage Flow
1.
Canvas App is opened which sends a
Signed Request to the 3rd Party App
2.
The 3rd Party App responds with HTML
that is loaded into the salesforce UI
3.
The user interacts with the 3rd party app
4.
The 3rd party app uses the Canvas
JavaScript SDK to make a call to a
server side JavaScript library
5.
Salesforce acts on the behalf of the
user and posts to the request
6.
Alternatively, the 3rd party app can
communicate server-to-server with
salesforce via the standard APIs

9. When Would I Use Force.com Canvas
A few key times to consider Force.com Canvas
▪ You have data that lives outside of salesforce.com
• Canvas allows you to display the data directly inside the salesforce.com UI
• You do not need to bring the data inside of salesforce.com
▪ Your developer prefer their language of choice
• Rather than use Visualforce and Apex, use your language of choice
• You build the UI and use the Canvas API to provide the data
▪ You have an existing application
• If your users have to manage data in multiple places
• Potentially use the existing app rather than recreating from scratch
Salesforce.com Confidential

10. What is the Signed Request Access Method?
The signed request is the default (and recommended) access method.
▪
▪
▪
When you click the Canvas app, we POST a signed request to your endpoint
You can verify the request was sent by salesforce and then view context info
Context contains data like:
•
•
•
•
•
Scoped OAuth Token
User Info (Name, email, ID, etc..)
Company Info (Company name, ID, etc…)
Environment Info (page is the canvas on, size of the iFrame)
Useful Links

11. Force.com Canvas – You code it, we show it!
Regardless of your language of choice, JavaScript libraries allow
your app to connect with salesforce at a UI and API layer:
SD
K

12. Force.com Canvas – Setup

13. Steve Pepper
Senior Developer

14. Creating the Canvas App
Canvas Apps have a metadata representation in salesforce.com
▪ This determines how the app can connect into salesforce.com
• Built off of the Connected Apps Framework
▪ Set the Basic Data
• Name, icons, contact info
▪ Set the OAuth Data
• Callback URL, Level of Access
▪ Set the Force.com Canvas data
• Canvas URL, Access Method, Locations
Salesforce.com Confidential

15. Canvas Locations
Determines where your Canvas App can show inside salesforce
▪ Chatter Tab
▪ Visualforce Page
▪ Open CTI
▪ Console
▪ Publisher (Pilot)
• Allows you to develop a Canvas App for the Publisher
▪ Chatter Feed (Pilot)
• Allows you to develop a Canvas App that can appear in a user’s Chatter Feed
Salesforce.com Confidential

16. Demo

17. Force.com Canvas – Eventing and
Streaming API

18. Babu Naidu
Senior Developer
@pbnnbp

19. Canvas Eventing
Lightweight JSON eventing framework
▪ Allows your app to publish and subscribe to events
• The events are sent through the Canvas API
• Event happen in browser
- Data is not sent to salesforce unless you choose
▪ Salesforce publishes and listens to specific events
• This allows your app to richly interact with salesforce
▪ You can also publish and subscribe to event in Visualforce
• This allows your app to communicate with Visualforce pages and vice versa
▪ Events happen within the page (not across tabs)
Salesforce.com Confidential

20. Canvas and the Streaming API
The Canvas API provides events that allow you access to the
Streaming API
▪ You can create, delete, and subscribe to Streaming Topics
• Done through the Canvas Eventing model
▪ The Canvas API manages the CometD connection
• Your app does not need to manage its own
▪ The Canvas API multiplexes streaming requests
• This allows multiple apps to use the streaming API, but only a single streaming
connection is required
Salesforce.com Confidential

21. Demo

22. Force.com Canvas – Publisher and
Chatter Feed

23. Chris Jolley
Lead Developer
@jolley

24. Force.com Canvas – Publisher Quick Action (Pilot)
We have expanded the Quick Actions to now support Force.com
Canvas Applications
▪ Your application can now be exposed directly in the publisher
• Common actions from your app are now available to your end users
▪ Your application can plug into the Chatter lifecycle
• You can tell the publisher that the app is ready to “Share”
• You can detect when events are fired from the publisher

25. Force.com Canvas – Publisher Events
Publisher Events allow interaction with the native publisher
▪ Your application can subscribe to events from the publisher
• publisher.setupPanel – Fired when the Publisher is loaded
• publisher.showPanel – Fired when the Canvas action is opened
• publisher.clearPanelState – Fired when the Canvas action is closed
• publisher.failure – Fired if there was a failure on the share
• publisher.success – Fired if the share was successful
• publisher.getPayload – Fired when Share is clicked (gets content from the app)
▪ Your application can publish events to the publisher
• publisher.setPayload – Sends payload to the publisher (response to getPayload)
• publisher.setValidForSubmit – Enabled the Share button

26. Force.com Canvas in the Chatter Feed (Pilot)
Expand the Chatter Feed to show your app information
▪ You canvas app can open inline directly in the feed
▪ Provides the ability to deliver app specific content directly to your users
• Your info in our feed
▪ The feed item contains canvas specific information
• Thumbnail image
• Canvas Parameters
• Title
• Description
• Height information

27. Interacting with a Canvas Feed Item
The user interacts with the feed and launches your Canvas App
▪ By clicking the Feed Link, the signed request is fired and the canvas
app opens up
• Signed request contains information specific to your app
▪ Once opened, the user interacts with your app
• The browser displays your content
• User can interact directly with your content
▪ Your app can access the salesforce data layer
• The Canvas API can be used to perform interactive connections to salesforce
data

28. Demo

29. Force.com Canvas – Debugging

30. Kari Hotchkiss
Senior Quality Engineer
@
Mandy Blumreich
Senior Quality Engineer
@

31. Canvas Debugging
Canvas actions all happen in the browser
▪ Your app is surfaced within an iFrame
▪ User’s browser and machine determine connectivity access
▪ Canvas API is all JavaScript Ajax requests
▪ Events are sent using JSON and JavaScript
JavaScript Debuggers are you best friends
▪ Firebug
▪ Chrome Developer Tools
▪ IE 9+ Debug Console
Salesforce.com Confidential

32. JavaScript Debugging
Use standard JavaScript debugging practices
▪ Use console.out calls to dump info to the tools
▪ Use breakpoints and step through the code when needed
▪ Make sure you are capturing and relaying errors that come from
salesforce calls
• It is easy to swallow these errors, but the end user does not know what is going on
Salesforce.com Confidential

33. Demo

34. What Have We Learned
▪ Explored the Current Canvas Features
▪ Canvas Locations (Chatter Tab, VF, Publisher, Chatter Feed)
▪ Canvas Events and resizing
▪ Canvas MD API
▪ Canvas Streaming API
▪ Seen code level demo of a canvas app
▪ Seen troubleshooting techniques

35. We want to hear
from YOU!
Please take a moment to complete our
session survey
Surveys can be found in the “My Agenda”
portion of the Dreamforce app

36. Jay Hurst
Steve Pepper
Babu Naidu
Chris Jolley
Product Manager,
@extraidea
Senior Developer,
Senior Developer,
@pbnnbp
Lead Developer,
@jolley
Kari Hotchkiss
Mandy Blumreich
Senior Quality Engineer, Senior Quality Engineer,
@
@

37. Where To Next?
▪ Other Force.com Canvas Sessions
▪ Force.com Canvas Workbook in the DevZone
▪ Force.com Canvas Developer Page
▪ Force.com Canvas Topic Page – http://bit.ly/forcecanvas
▪ Email or tweet Jay – jhurst@salesforce.com/@extraidea
▪ SalesWays Contact
▪ Spanning Contact