Dive Deep Into the Force.com Canvas Framework
2 likes2,446 views
The document discusses the force.com canvas framework, which enables the integration of external applications into Salesforce with minimal redesign. Key features include a JavaScript SDK, simplified authentication, and context services, allowing third-party apps to interact within the Salesforce UI seamlessly. Additionally, the presentation covers usage scenarios, canvas app setup, event handling, and debugging techniques for developers working with force.com canvas.
Dive Deep Into the Force.com Canvas Framework
- 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.
- 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
- 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
- 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
- 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 – [email protected]/@extraidea ▪ SalesWays Contact ▪ Spanning Contact