Canvas Developer Guide

Clouds with binary code floating aboveCloud with binary code floating above

No Results

Search Tips:

  • Please consider misspellings
  • Try different search keywords
Getting Started
Introducing Canvas
Quick Start
Quick Start—Advanced
Prerequisites
Clone the Project from GitHub
Run the Web App Locally
Create the Canvas App
Configure Who Can Access the Canvas App
Deploy the Web App to Heroku
Update the Canvas App
Package the Canvas App
Upload the Canvas App Package
Install the Canvas App
Configure Who Can Access the Installed Canvas App
Using Canvas
Reference
PDF

Create the Canvas App

In this step, you create the canvas app in your Salesforce organization. To create a canvas app, you need the Customize Application and Modify All Data user permissions.

  1. In Salesforce, from Setup, enter Apps in the Quick Find box, then select App Manager.
  2. Click New Connected App.
  3. In the Connected App Name field, enter Hello World.
  4. Accept the default API Name of Hello_World. This is the internal name of the canvas app and can’t be changed after you save it.
  5. In the Contact Email field, enter your email address.
  6. In the Logo Image URL field, enter https://localhost:8443/images/salesforce.png. This is the default Salesforce “No Software” image. This image appears on the installation screen and on the detail screen for the app.
  7. In the Icon URL field, enter https://localhost:8443/examples/hello-world/logo.png. This is the default Salesforce “No Software” image.

    This is the image that appears next to the app name in the user interface. If you leave this field blank, a default cloud image appears next to the app name.

  8. In the API (Enable OAuth Settings) section, select the Enable OAuth Settings field.
  9. In the Callback URL field, enter https://localhost:8443/sdk/callback.html.
  10. In the Selected OAuth Scopes field, select Access the identity URL service (id, profile, email, address, phone).
  11. In the Canvas App Settings section, select Canvas.
  12. In the Canvas App URL field, enter https://localhost:8443/examples/hello-world/index.jsp.
  13. In the Access Method field, select Signed Request (Post).
  14. In the Locations field, select Chatter Tab.
  15. Save the app, then click Continue.
    After the canvas app is saved, the detail page appears.
  16. On the detail page for the canvas app, click Manage Consumer Details, and then verify your identity.
  17. Select the consumer secret value and enter CTRL+C to copy it. The consumer secret is used in the app to authenticate.
  18. Go to the command window and stop the Jetty Web server by entering CTRL+C. At the prompt, enter Y.
  19. Create an environment variable named CANVAS_CONSUMER_SECRET and set that value to the consumer secret you just copied. To do this in Windows, in the command window, enter set CANVAS_CONSUMER_SECRET=value_you_just_copied.

    If you’re using Unix/OS X, set the environment variable with the command export CANVAS_CONSUMER_SECRET=value_you_just_copied.

    The “hello world” page (c:\SalesforceCanvasFrameworkSDK\src\main\webapp\examples\hello-world\index.jsp) uses the consumer secret, as shown in the following code:
    <%@ page import="canvas.SignedRequest" %>
<%@ page import="java.util.Map" %>
<%
    // Pull the signed request out of the request body and verify and decode 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.verifyAndDecodeAsJson(signedRequest[0], yourConsumerSecret);
%>

<!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-all.js"></script>

    <!-- Third part libraries, substitute with your own -->
    <script type="text/javascript" src="/scripts/json2.js"></script>

    <script>
        if (self === top) {
            // Not in an 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>
  20. Restart the Web server by entering this command: target\bin\webapp.bat (Windows) or sh target/bin/webapp (Unix/OS X).