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

  7. Someone Sometimes with visits your blog regularly and recommended it in my experience to read as well. The way of writing is excellent and also the content is top-notch. Thanks for that insight you provide the readers! BizOp

  8. Keep up the good work , I read few posts on this web site and I conceive that your blog is very interesting and has sets of fantastic information. 안전놀이터

  9. Hello I am so delighted I located your blog, I really located you by mistake, while I was watching on google for something else, Anyways I am here now and could just like to say thank for a tremendous post and a all round entertaining website. Please do keep up the great work. 안전놀이터

  10. Thanks so much for this information. I have to let you know I concur on several of the points you make here and others may require some further review, but I can see your viewpoint. 온라인릴게임

  11. This is such a great resource that you are providing and you give it away for free. I love seeing blog that understand the value of providing a quality resource for free. 온라인릴게임

  12. This disappointment really neutralizes the craftsman. In the event that painting an individual piece isn't charming, there's consistently the alternative of buying dynamic workmanship. Diamond Painting Tricks For Beginners

  13. A decent web improvement organization gives it's designers designated time every week to take a gander at recent fads and advances. In fact a portion of these patterns and advancements are impasses, however you will not realize except if you investigate them. hosting companies in pakistan

  14. This comment has been removed by the author.

  15. I am incapable of reading articles online very often, but I’m happy I did today. It is very well written, and your points are well-expressed. I request you warmly, please, don’t ever stop writing. 팔팔카

  16. When you use a genuine service, you will be able to provide instructions, share materials and choose the formatting style. odotlive

  17. Shipping options is necessary for any e-commerce website to utilizing a single or flat rate for shipping. E-Commerce websites are the best method to conduct business globally.

  18. Excellent and very exciting site. Love to watch. Keep Rocking. 대전스웨디시

  19. For the most part, web designs comprise text, illustrations, designs and pictures.

  20. I love the way you write and share your niche! Very interesting and different! Keep it coming! คลินิกเสริมความงาม ใกล้ฉัน

  21. I really impressed after read this because of some quality work and informative thoughts . I just wanna say thanks for the writer and wish you all the best for coming!. textbook answers

  22. I really impressed after read this because of some quality work and informative thoughts . I just wanna say thanks for the writer and wish you all the best for coming!. magento development company

  23. Good website! I truly love how it is easy on my eyes it is. I am wondering how I might be notified whenever a new post has been made. I have subscribed to your RSS which may do the trick? Have a great day! 먹튀검증


Powered by Blogger.