Displaying External Web app using Salesforce Canvas

Displaying External Web app using Salesforce Canvas

Displaying External Web app using Salesforce Canvas Canvas enables you to easily integrate a third-party application in Salesforce. Canvas is a set of tools and JavaScript APIs that you can use to expose an application as a canvas app. This means you can take your new or existing applications and make them available to your users as part of their Salesforce experience.

Let us start creating our first connected App using Salesforce Canvas and Heroku.

If you face any challenge following the steps, see the detailed video in the end of the post.

1) Create a free account on Heroku ( Ignore this step if you already have an account with Heroku.  
2) Download and install Heroku toolbelt. (
3) Clone/download  the Salesforce Canvas SDK  to c:\ location from the Repository  ( If you are cloning using command prompt use the below commands to clone.
       cd c:\
       git clone
4) Creating App on heroku. Use the below commands in cmd to do so. 
     cd c:\SalesforceCanvas  -- Navigating to SalesforceCanvas SDK.
     git init          -- Initializing local git repo.
     heroku login   -- This will ask you to enter username and password of heroku.
     heroku create
     git add -A
     git commit -m "Initial commit"
     git push heroku master  -- This will give you a app url

Once we are done with the initial setup perform the below steps to configure connected App.
  • In Salesforce, from Setup, click Create | Apps.
  • In the Connected Apps related list, click New.
  • In the Connected App Name field, enter Canvas App.
  • Accept the default API Name of Canvas_App. This is the internal name of the canvas app and can’t be changed after you save it.
  • In the Contact Email field, enter your email address.
  • In the API (Enable OAuth Settings) section, select the Enable OAuth Settings field.
  • In the Callback URL field, enter YourHerokuAPPurl/sdk/callback.html.
  • In the Selected OAuth Scopes field, select Access your basic information.
  • In the Canvas App Settings section, select Canvas.
  • In the Canvas App URL field, enter YourHerokuAPPurl/examples/hello-world/index.jsp.
  • In the Access Method field, select Signed Request (Post).
  • In the Locations field, select Chatter Tab.
  • Click Save. After the canvas app is saved, the detail page appears.
  • 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.
  • Copy the customer secret value into the index.jsp on line String yourConsumerSecret="XXXXXXXXXXXXXXXXXX";
  • Checkin and Redeploy the updated index.jsp on heroku dyno. 

   Step 3 : Grant access rights to Canvas App in Salesforce
  • In Salesforce, from Setup, click Manage Apps | Connected Apps.
  • Click the Hello World app, and then Edit.
  • In the Permitted Users field, select Admin approved users are pre-authorized. Click OK on the pop-up message that appears.
  • Click Save. This is where you define who can see your canvas app. This can be done using profiles and permission sets. In this example, we assume that your profile is System Administrator.
  • In the Profiles related list, click Manage Profiles.
  • Select the System Administrator profile and click Save.
  • In Salesforce, from Setup, click Canvas App Previewer. You can use the Canvas App Previewer to test out your canvas app before publishing it.
  • Click the Canvas App link on the left. The app appears and you’ll see the message Hello User.FullName. The canvas app works in this context because when you click the app name in the previewer, the signed request is sent to the endpoint YourHerokuAPPurl/examples/hello-world/index.jsp
  • After configuring access, you can see the canvas app in the Canvas App Previewer and on the Chatter tab of your organisation.

About Saurabh Dua


  1. This comment has been removed by the author.

  2. Hi Saurabh,
    when i typed command for cloning i.e. cd c:\
    git clone it throws an error on command prompt saying, "git" not recognized as internal external command. Could you please suggest me that where i am wrong? what should i do to access this command on command prompt.

    1. Hi Deepak ,

      Either you don't have Git installed on your machine or it is not properly installed.

      Here is the link for installing GIT on windows

      TO verify if GIT is successfully configured just type
      git --version on the command prompt. If is it configured correctly you would see a message like: "git version".

    2. Many Thanks Suarabh. It's working like charm.

  3. Heroku | Welcome to your new app!
    Refer to the documentation if you need help deploying.
    This is showing in my canvas app

  4. Hi Saurabh,

    My application is doing auth check each time.
    Is there any way to remove callback url and directly from canvas to redirect to the application?

  5. I can’t believe focusing long enough to research; much less write this kind of article. You’ve outdone yourself with this material without a doubt. It is one of the greatest contents. here


Note: only a member of this blog may post a comment.

Powered by Blogger.