Canvas makes it simple to integrate a third-party application into Salesforce. Canvas is a set of tools and JavaScript APIs for exposing an application as a canvas app. This means you can incorporate new or existing third-party applications into your Salesforce org and make them available to your users.
Generally, we use the canvas app to make a third-party app user interface available for salesforce users and they can operate the UI right from the Salesforce user interface. The user can read the information and they can also update the information as per requirements.
Some other integration options are also available for example 1. we can use Web tabs to present a full application on large screen space and 2. HTML iframes are in a custom component but canvas apps provide greater functionality than developing with iframes.
You can use canvas tools to integrate your technology within Canvas rather than redesigning and reintegrating your external applications. Canvas has the following tools for handling seamless integration:
- Authentication—If your application requires authorization, you can implement it by using a signed request or OAuth 2.0.
- Context—API support that enables you to retrieve context information about the environment in which the canvas app is running.
- Context—API support that enables you to retrieve context information about the environment in which the canvas app is running.
- Cross-domain XHR—JavaScript support for cross-domain XML HTTP requests back to the Salesforce domain.
- Resizing—Methods that support the ability to resize your canvas app.
- Events—Events provide a JavaScript-based way to send and receive events between canvas apps. Use events to enable communication between multiple canvas apps on a single page.
The third-party application that you want to integrate into Salesforce can be written in any programming language (java, node, python, ruby, etc.)
The canvas app can be used in
- Visulaforce pages
- Lightning Components
- Chatter feed
- Publisher
- Layout and mobile cards
- Mobile Navigation
- Open CTI
- Console
Integrate a Heroku-hosted node app in Salesforce
Let’s see how to integrate and display a node.js application that is hosted on the Heroku platform in salesforce org.
You must have a Heroku account; if you do not have one, you can create one for free.
Deploy this sample canvas node app in Heroku. This is just a sample app that shows an image based on the provided URL with a banner on the canvas app.
Enter the name of your application, leave the region United States as default and click on the Deploy app button.
It will take a few seconds/minutes to deploy the app on heroku. Once it is deployed click on the Manage App button.
Click on the Setting button and add the config variables.
- CANVAS_CONSUMER_SECRET
- IMAGE_URL ( https://sfdclesson.files.wordpress.com/2021/03/cropped-sfdc-icon-1.png )
For now, leave the value field of CANVAS CONSUMER SECRET blank and enter the image URL that you want to render in the IMAGE_URL.
Now let’s create a connected app in Salesforce org.
Go to setup > search ‘app’ and click on App Manager
Click on the New Connected App button on the App Manager page.
- Enter the connected app name and contact email.
- Check the “Enable OAuth Settings” checkbox, enter the callback URL, and select full access in Selected OAuth Scope.
Scroll down to the bottom of the page:
- Check the Canvas checkbox.
- Enter the canvas app URL: https://sfdc-canvas-application.herokuapp.com/canvas-demo/
- Keep default for Acess method: Signed Request (POST)
- Select Lightning Component in the location multi-select picklist.
Click on the Save button.
Click on the Manage button and then click on Edit Policies
In the Permitted Users field select, Admin approved users are pre-authorized
Click on the Save button.
Now go back to the connected app detail page and click on Manage consumer detail and copy the consumer secret.
Open the Heroku app dashboard, click on the Settings tab, and put the consumer secret in the config var CANVAS_CONSUMER_SECRET
Edit the user profile and assign the connected app access that will be using the canvas application.
Great! All settings have been completed!
Lightning component
Create a lightning component and use <force:canvasApp> to load the canvas app. In developerName attribute provide the API name of your connected app.
| <aura:component implements="force:appHostable,forceCommunity:availableForAllPageTypes,flexipage:availableForAllPageTypes" access="global"> | |
| <lightning:card > | |
| <aura:set attribute="title"> | |
| <lightning:icon iconName="utility:connected_apps" size="small"/> <b>SFDC Lessons Canvas App</b> | |
| </aura:set> | |
| <force:canvasApp width="100%" maxWidth="infinite" height="600px" maxHeight="infinite" | |
| developerName="Canvas_App"/> | |
| <aura:set attribute="footer"> | |
| <a href="https://sfdclesson.com">SFDC Lessons</a> | |
| </aura:set> | |
| </lightning:card> | |
| </aura:component> |
Place this lightning component on a Tab, Home Page, Record Page, or other pages as needed.
This is how the node app will look like in Salesforce org.
Summary
We learned about the canvas app and how to integrate a third-party application into Salesforce using the Canvas app. This article demonstrated a very simple app, but the same steps can be used to integrate real, partners, systems integrators, or customer cloud apps in Salesforce org. For more information, check out the resources below.
SFDC Lessons 