Canvas Developer Guide

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

Newer Version Available

This content describes an older version of this product. View Latest

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:
  20. Restart the Web server by entering this command: target\bin\webapp.bat (Windows) or sh target/bin/webapp (Unix/OS X).