Dive Deep Into the Force.com Canvas Framework

  • Published on

  • View

  • Download

Embed Size (px)


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 adminSDK 8. Force.com Canvas Usage Flow 1.Canvas App is opened which sends a Signed Request to the 3rd Party App2.The 3rd Party App responds with HTML that is loaded into the salesforce UI3.The user interacts with the 3rd party app4.The 3rd party app uses the Canvas JavaScript SDK to make a call to a server side JavaScript library5.Salesforce acts on the behalf of the user and posts to the request6.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 scratchSalesforce.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, LocationsSalesforce.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 users Chatter FeedSalesforce.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 requiredSalesforce.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 Users browser and machine determine connectivity access Canvas API is all JavaScript Ajax requests Events are sent using JSON and JavaScriptJavaScript Debuggers are you best friends Firebug Chrome Developer Tools IE 9+ Debug ConsoleSalesforce.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 onSalesforce.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 HurstSteve PepperBabu NaiduChris JolleyProduct Manager, @extraideaSenior Developer,Senior Developer, @pbnnbpLead Developer, @jolleyKari HotchkissMandy BlumreichSenior 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