This morning, as usual, I dropped into my local Starbucks and noticed the signs for the fall drinks – pumpkin spiced lattes, and hot chocalates are now on prominent display. It looks like the seasons are definitely changing. This also means the latest release of Salesforce, Winter ’13, is about to hit pre-release too. (You can check trust.salesforce.com for exact dates), and with it, a slew of new developer features, with my favorite being Force.com Canvas.

With Force.com Canvas, developers can retool their legacy web apps, or write new apps that instantly tap into Salesforce regardless of what language they are written in, or where they reside. For example, a developer could write a Ruby or Java app, deploy it to Heroku, and have it pre-integrated with Salesforce. And the best news is that Force.com Canvas will be enabled for all new pre-release accounts, and for new developer edition accounts when Winter ’13 goes live. (If you have an existing developer edition account, post Winter ’13 go live, you will need to contact support to have this new feature enabled)

Force.com Canvas includes a lightweight JavaScript SDK that lets developers access the salesforce context – single sign on, user details, and access to the Chatter social graph to name a few. Once you have a canvas app, administrators can then centrally manage who has access to these apps via the connected apps, and end users will see these new apps show up directly in their Chatter profile page.

A great example of a canvas app might be something along the lines of a purchasing app that retools an existing ERP to make the app available directly within Salesforce. Whenever a user selects an item for purchase, the Chatter feed, and even related records associated with a companies purchasing policies may be displayed right beside the app.

 

Speaking of any language,we have made it even easier to create and deploy a Heroku app in either Java or Ruby that is instantly connected with Force.com by taking advantage of Quickstart templates – You just select your quickstart template for either Ruby or Java, follow a few guided steps, and you are done! Developers can clone the app right from Git, and start customizing it.

The whole experience looks kind of like this:

 

 

In the video above, I used the simple hello world quickstart which creates a canvas.jsp page using the SDK. Digging into the code, you can see how quickly you can access the identity context, and set yourself up for interacting with salesforce no matter where your app is.

 <%@ page import="platform.connect.api.SignedRequest" %>
 <%@ page import="java.util.Map" %>
 <%     // Pull the signed request out of the request body and unsign it.
  Map<String, String[]> parameters = request.getParameterMap();
     String[] signedRequest = parameters.get("signed_request");
     if (signedRequest == null) {%>
         This App must be invoked via a signed request!<%
         return;
     }
    String yourConsumerSecret=System.getenv("CANVAS_CONSUMER_SECRET");
    String signedRequestJson = SignedRequest.unsignAsJson(signedRequest[0],
 yourConsumerSecret);
 %>

Then, from within my page, I can easily access my username, related records and more.

 

 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="en">
<head>
    <title>Hello World Canvas Example</title>
    <link rel="stylesheet" type="text/css" href="/sdk/css/connect.css" />
    <script type="text/javascript" src="/sdk/js/canvas.js"></script>
    <!-- Third part libraries, substitute with your own -->
    <script type="text/javascript" src="/scripts/json2.js"></script>
    <script>
        if (self === top) {
            // Not in Iframe
            alert("This canvas app must be included within an iframe");
        }
        Sfdc.canvas(function() {
            var sr = JSON.parse('<%=signedRequestJson%>');
            Sfdc.canvas.byId('username').innerHTML = sr.context.user.fullName;});
    </script>
 </head>
 <body> <br/>
    <h1>Hello <span id='username'></span></h1>
 </body>
</html>

A huge part of the power of Force.com Canvas apps is to access the social graph. Canvas apps can do this with just a few lines of javascript. The snippet below, posts a new message to Chatter for the current user.

 var sr = JSON.parse('<%=signedRequestJson%>');
  var url = sr.context.links.chatterFeedsUrl+"/news/"+sr.context.user.userId+"/feed-items";
  var body = {body : {messageSegments : [{type: "Text", text: "Some Chatter Post"}]}};
  Sfdc.canvas.client.ajax(url,
    {token : sr.oauthToken,
        method: 'POST',
        contentType: "application/json",
        data: JSON.stringify(body),
        success : function(data) {
        if (201 === data.status) {
         alert("Success"} }

I’ve been playing with Canvas for a while now, and am amazed at how quickly you can  get up and running using the Quickstarts even if you have never built an app on Heroku before.  Dave and Samantha are hosting a Winter ’13 preview webinar on September 12th which will cover canvas apps along with a bunch of other features, and if you are coming to Dreamforce (don’t forget to register, and definitely sign up for the Developer keynote – it is almost at capacity!), we have just listed some new sessions, and workshops to get you hands on with Force.com Canvas. Log in, and add them to your agenda builder now. These sessions are likely to fill up fast, and you don’t want to miss out.

 

 

 

 

 

tagged , , , Bookmark the permalink. Trackbacks are closed, but you can post a comment.
  • Abhinav Gupta

    Thanks Quinton, for bringing up this post. I read the canvas dev guide, but I am still not sure about the possible canvas use case if its going to run only via the Chatter profile page. Does this means a user will see an extra link(to a heroku iframe app) on chatter profile page to show up some details based on the same login ?

    • http://twitter.com/quintonwall quintonwall

      Yes for the initial release, you will see the canvas app in the left hand nav of your Chatter profile, but it is definitely much more than an iframe. Def. sign up for the newly revealed Canvas sessions at #dreamforce for even more goodness!

      • Abhinav Gupta

        Thanks Quinton !

  • Jatin Jain

    Cant access the Canvas developer guide mentioned in Winter13 release notes. Please provide the URL here

  • ramanathan pachaiyappan

    is canvas app works only with heroku ? or any other hosting as well ? Is it limited to Chatter or can work with any Standard Pages/Custom VF Pages?

    Can you also post pre-release org info?

    Thanks

    • http://twitter.com/quintonwall quintonwall

      Yes, canvas apps will work anywhere – you just need the lightweight Java SDK.

    • http://twitter.com/quintonwall quintonwall

      Yes, canvas apps will work anywhere – you just need the lightweight Java SDK.

      • ramanathan pachaiyappan

        Thanks quinton,

    • http://twitter.com/quintonwall quintonwall

      Yes, canvas apps will work anywhere – you just need the lightweight Java SDK.

  • http://www.facebook.com/nsimha Nick Simha

    Great demo at Platform Keynote today Quinton – well done!

  • http://www.facebook.com/nsimha Nick Simha

    So does the app that needs to be exposed has to be a “connected app” and has to support OAuth? What if it is an app that is only accessed through username / password?

    • Jay Hurst

      When you create the Canvas App inside of salesforce, you have to create it as a Connected app with a Force.com Canvas module. The OAuth piece (either through the Signed Request or OAuth Web Flow) is used to allow the 3rd party app to authenticate into salesforce. The is the connection back into salesforce so that you do not have to pass a salesforce username and password to your 3rd party app.

      Authenticating into your 3rd party app must still be handled (whether that is username/password, another OAuth, or some other authentication type).

  • http://twitter.com/vzmind vzmind

    Hi Quinton,playing a bit with Canvas I have been wondering how to access more Salesforce data. Let’s say I am using Ruby, what is the workflow to retrieve eg. Contacts or Accounts? My reflex was to use the new JS SDK but it only provides the user context and some chatter elements. Shall I use databasedotcom ruby gem and leverage the Oauth token provided by the Canvas app ?

    • Hamayoun Khan

      This page here shows an example of using the JavaScript library to run a SOQL statement and get back the data:

      https://github.com/anandbn/tosho/wiki

      • Ashu Verma

        hi Humayoun, I tried this but not working/? have you tried it?

    • Jay Hurst

      Essentially, you can use the Sfdc.canvas.client.ajax method in the SDK to make calls to the Chatter REST API (as is in the example) or to the standard salesforce.com REST API (as long as your OAuth token has the authority). You can also use the token to make calls directly to the SOAP API if you wish.

  • Hamayoun Khan

    Hi Quinton

    This shows how to update a chatter feed. Will we be able to update any sObject in SFDC? And as far as you know, is there a plan down the road to allow Canvas apps to be invoked from custom buttons, as can currently be done today with Visualforce?

    Thx,
    Hamayoun

  • Hamayoun Khan

    Hi Quinton

    This shows how to update a chatter feed. Will we be able to update any sObject in SFDC? And as far as you know, is there a plan down the road to allow Canvas apps to be invoked from custom buttons, as can currently be done today with Visualforce?

    Thx,
    Hamayoun

    • Jay Hurst

      Hamayoun,

      With the Force.com Canvas SDK, you will have the ability to update any object. Essentially, when you create your App, you choose what access levels the app will have inside of salesforce.com. If you choose “Access and manage your Chatter feed”, the token you receive will be able to use the Chatter REST API (the rest calls can be sent through the Canvas SDK proxy). If you want to use the standard REST API, you set your app to “Access and manage your data”, which will give you a token that is viable for the SOAP and REST APIs. Any action you can do through those APIs will then be available (creating, updating, querying, etc…).

      We are also working to be able to expose a Canvas App inside of a Visualforce page, which would then allow you to inject a Canvas in any VF page you have.

      Thanks.
      Jay

    • Jay Hurst

      Hamayoun,

      With the Force.com Canvas SDK, you will have the ability to update any object. Essentially, when you create your App, you choose what access levels the app will have inside of salesforce.com. If you choose “Access and manage your Chatter feed”, the token you receive will be able to use the Chatter REST API (the rest calls can be sent through the Canvas SDK proxy). If you want to use the standard REST API, you set your app to “Access and manage your data”, which will give you a token that is viable for the SOAP and REST APIs. Any action you can do through those APIs will then be available (creating, updating, querying, etc…).

      We are also working to be able to expose a Canvas App inside of a Visualforce page, which would then allow you to inject a Canvas in any VF page you have.

      Thanks.
      Jay

      • Anonymous

        This is great, Jay — thanks for sharing. If you run a query, would you be able to push a total to a field in Salesforce? I.e. you have millions of stock trades in a database and would like to total the number of shares purchased in a year and push that number to a field.

        Really what I’m looking for is to run a report that displays info from salesforce and info from an external
        (Canvas) database.

  • Anonymous

    I have been trying to get canvas SDK work with node.js application without success. Specifically, Sfdc.canvas.client.ajax() function can’t seem to trigger success event. Looking at the source code of the auto-generated Hello World rails app, it seems to be calling jquery.js method at some point, but I can’t figure out how it is being called. Can you think of a reason why this ajax method isn’t triggering success event on node.js or how jquery is used in the SDK?

    • http://twitter.com/jolley Chris Jolley

      The canvas SDK does not use/nor require JQuery, so not sure what you are seeing there. Also, just to be clear, you are calling Sfdc.canvas.client.ajax() from the browser not node.js server side right?

      • Anonymous

        Yes, I am calling from template side (I am using jade), not from the node.js back-end side.

        • http://twitter.com/jolley Chris Jolley

          It’s hard to debug this in a thread. Are there any errors in the Firebug console?

          • Anonymous

            Unfortunately, not a thing. That is the most frustrating thing for me. I could paste my code here. By the way, thank you for your help, Chris.

  • Ashu Verma

    I have been trying to access sales force records (I m trying on a custom object-book__c) through a heroku app but failed.Can anyone suggest some resources to get it done .?

  • Varun Vatsa

    Thanks Quinton, but I am still wondering and confused with the use case, I am trying to integrate one of my existing app into Salesforce and that app is not on heroku nor it is written in java, Cant I simply integrate one of my webapp by providing the OAUTH2 token? Does the apps necessarily be written in Java or any other language supported by heroku dynos?