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’ll create the canvas app in your Salesforce organization. You’ll need user permissions “Customize Application” and “Modify All Data” to create a canvas app.

  1. In Salesforce, from Setup, enter Apps in the Quick Find box, then select Apps.
  2. In the Connected Apps related list, click New.
  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 your basic information.
  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. Click Save. After the canvas app is saved, the detail page appears.
  16. On the detail page for the canvas app, next to the Consumer Secret field, click the link Click to reveal. The consumer secret is used in the app to authenticate.
  17. Select the consumer secret value and enter CTRL+C to copy it.
  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).