Create Force.com Apps Anywhere With Force.com Canvas

Force.com Canvas is a new feature in Winter '13 which allows you to create Force.com context aware applications on Heroku, or anywhere. In addition, with the Heroku QuickStart templates, you can create an app on Heroku with just a few clicks. Check out the video here.

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.