Deep Dive into the Force.com Canvas FrameworkJay Hurst, salesforce.com, Product Manager@extraidea
Safe HarborSafe 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.
Jay HurstProduct Manager@extraidea
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?
What is Force.com Canvas
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
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
Force.com Canvas Usage Flow1. 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 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
When Would I Use Force.com CanvasA 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
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
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:
SDK
Force.com Canvas – Setup
Steve PepperSenior Developer
Creating the Canvas AppCanvas 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
Canvas LocationsDetermines 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
Demo
Force.com Canvas – Eventing and Streaming API
Babu NaiduSenior Developer@pbnnbp
Canvas EventingLightweight 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
Canvas and the Streaming APIThe 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
Demo
Force.com Canvas – Publisher and Chatter Feed
Chris JolleyLead Developer@jolley
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
Force.com Canvas – Publisher EventsPublisher 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
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
Interacting with a Canvas Feed ItemThe 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
Demo
Force.com Canvas – Debugging
Kari HotchkissSenior Quality Engineer@
Mandy BlumreichSenior Quality Engineer@
Canvas DebuggingCanvas 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
JavaScript DebuggingUse 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
Demo
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
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
Jay Hurst
Product Manager,@extraidea
Steve Pepper
Senior Developer,
Babu Naidu
Senior Developer,@pbnnbp
Chris Jolley
Lead Developer,@jolley
Kari Hotchkiss
Senior Quality Engineer,@
Mandy Blumreich
Senior Quality Engineer,@
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
Recommended
