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.

SHARES

Share

Pin it

Tweet

Share

Share

Share

Buffer

Print

About Saurabh Dua