Integration

Displaying External Web app using Salesforce Canvas

Displaying External Web app using Salesforce Canvas

Displaying External Web app using Salesforce Canvas

Force.com Canvas enables you to easily integrate a third-party application in Salesforce. Force.com 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 force.com App using Salesforce Canvas and Heroku.

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

Pre-Requisite:
1) Create a free account on Heroku (https://signup.heroku.com/). Ignore this step if you already have an account with Heroku.  
2) Download and install Heroku toolbelt. (https://blog.heroku.com/the_heroku_toolbelt)
3) Clone/download  the Salesforce Canvas SDK  to c:\ location from the Repository  (https://github.com/worldofsalesforce/SalesforceCanvas). If you are cloning using command prompt use the below commands to clone.
       cd c:\
       git clone https://github.com/worldofsalesforce/SalesforceCanvas
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 Force.com 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

40 comments:

  1. This comment has been removed by the author.

    ReplyDelete
  2. This comment has been removed by a blog administrator.

    ReplyDelete
  3. Hi Saurabh,
    when i typed command for cloning i.e. cd c:\
    git clone https://github.com/worldofsalesforce/SalesforceCanvas. 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.

    ReplyDelete
    Replies
    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
      https://www.atlassian.com/git/tutorials/install-git#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.8.1.windows.1".

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

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

    ReplyDelete
  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?

    ReplyDelete
  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

    ReplyDelete
  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

    ReplyDelete
  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. 안전놀이터

    ReplyDelete
  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. 안전놀이터

    ReplyDelete
  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. 온라인릴게임

    ReplyDelete
  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. 온라인릴게임

    ReplyDelete
  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

    ReplyDelete
  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

    ReplyDelete
  14. This comment has been removed by the author.

    ReplyDelete
  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. 팔팔카

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

    ReplyDelete
  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. https://www.sandeepmehta.co.in/affordable-seo-services-delhi/

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

    ReplyDelete
  19. For the most part, web designs comprise text, illustrations, designs and pictures.
    https://onohosting.com/

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

    ReplyDelete
  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

    ReplyDelete
  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

    ReplyDelete
  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! 먹튀검증

    ReplyDelete
  24. Great post, you have pointed out some fantastic points , I likewise think this s a very wonderful website. 먹튀검증

    ReplyDelete
  25. 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. 먹튀검증

    ReplyDelete
  26. Thankyou for this wondrous post, I am glad I observed this website on yahoo. 토토사이트

    ReplyDelete
  27. It proved to be Very helpful to me and I am sure to all the commentators here! Slot online

    ReplyDelete
  28. This is my first visit to your web journal! We are a group of volunteers and new activities in the same specialty. Website gave us helpful data to work. 먹튀검증

    ReplyDelete
  29. 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. Denver Web Design

    ReplyDelete
  30. Thank you for helping people get the information they need. Great stuff as usual. Keep up the great work!!! 대전건마

    ReplyDelete
  31. Incredible! This blog lo?ks exactly ?ike my o?d one!
    It’s on a totally d?fferent subject b?t it ?as pretty muc?
    t?e ?ame layout ?nd design. Outstanding choice ?f colors!
    송송넷

    ReplyDelete
  32. It was a very good post indeed. I thoroughly enjoyed reading it in my lunch time. Will surely come and visit this blog more often. Thanks for sharing. 바둑이게임

    ReplyDelete
  33. Really I enjoy your site with effective and useful information. It is included very nice post with a lot of our resources.thanks for share. i enjoy this post. hostgator black friday deals

    ReplyDelete
  34. Financial freedom is when you are not controlled by your finances and have no debt. It is a very disconcerting and stressful feeling knowing that you are financially unstable. For those of you who no longer want to feel this helpless and stressed, there are steps you can follow to obtain freedom from your debts and creditors. Personal Finance Coach

    ReplyDelete
  35. What a fantabulous post this has been. Never seen this kind of useful post. I am grateful to you and expect more number of posts like these. Thank you very much. 먹튀검증

    ReplyDelete
  36. your content is very inspiring and appriciating I really like it please visit my site for Satta King Result also check Satta king 24X7 and also check sattaking and for quick result check my site Satta matka and for super fast result check Satta king

    ReplyDelete
  37. You make so many great points here that I read your article a couple of times. Your views are in accordance with my own for the most part. This is great content for your readers. 토토사이트

    ReplyDelete

Powered by Blogger.