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. This comment has been removed by a blog administrator.

  3. 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.

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

  5. 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?

  6. Carpet canvas is usually made of an enormous work of solid cotton strings. An individual work is framed by bending two strings around one another the long way and locking them around an across string made a similar way. large diamond painting

  7. This is my first time i visit here. I found so many interesting stuff in your blog especially its discussion. From the tons of comments on your articles, I guess I am not the only one having all the enjoyment here keep up the good work sviluppo siti web Corsico

  8. 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. how to get hired as a freelance writer

  9. Mobile phones have become as ubiquitous as wristwatches once were. Men, women and even children are today connected to others from across the world,fl studio mobile apk all thanks to the new smartphone technology.

  10. Barely web plans become more significant and basic for each web aces who handles web locales. Website laten maken

  11. What was the difficult they were attempting to determine?

  12. Implementing best Kajabi vs clickfunnels marketing strategies along with the development process of the same surely doesn't come easy. Yet it is a must-have aspect that needs to be taken care of with utmost precision. Indeed, your app has major chances of witnessing sure shot success by deploying these effective marketing tools mentioned below. To make the marketing process even more comprehensive, hiring a marketing company for the same can prove to be the best decision taken as a developer. Read more!

  13. Developing an Elyments App ​is an accomplishment. With so much time and effort involved in the entire process of development, test and launch, devising an effective marketing strategy would be the last thing in the mind of a developer.

  14. nice post, keep up with this interesting work. It really is good to know that this topic is being covered also on this web site so cheers for taking time to discuss this! spy app

  15. An interesting dialogue is price comment. I feel that it is best to write more on this matter, it may not be a taboo topic however usually individuals are not enough to talk on such topics. To the next. Cheers. best spy apps


Powered by Blogger.