In this session we will demo business process of Canvas app built on Heroku using Node.js to integrate something such as external inventory from an external web application that doesn’t have an API for integration into Salesforce. Review of authentication methods, data flow and concepts for working with Salesforce data in the Canvas web app and the external web app data in Salesforce.
What is Canvas ?
What is a Canvas app ?
A Canvas app is a special type of connected app within Salesforce that allows users to access the external system directly from within the Salesforce UI. Canvas includes tools that handle:
- Cross-domain XHR
The Canvas SDK
You will include the Canvas SDK in your external app in order to access Salesforce Data and publish/subscribe to events using the Streaming API. This is easily included from your Salesforce org using a URL:
Canvas app on Heroku – why would you want to use canvas for a web app on Heroku?
- Heroku supports multiple programming languages for greater flexibility such as Node.js, Ruby, PHP, Python, Java or even use a buildpack for other languages
- Building an app on Heroku is more scalable than building an app directly on the Force.com platform
- Heroku can handle the processing and storage of large data volumes better than Salesforce
- Heroku can extend your Salesforce functionality without your users ever leaving the platform
Why does this matter?
- It allows us to extend Salesforce functionality to another platform
- No need to re-write complex existing functionality within Salesforce and take advantage of existing applications
- It allows us to build something new that might not fit well on the Salesforce platform, but still use that functionality from within Salesforce without ever leaving the UI
What about accessing the data on Heroku after the users have interacted with it through the Canvas app?
This is where Salesforce Connect/oData & External Objects come into the picture. To easily display and relate your data in Heroku to data in Salesforce, you can set up an External Data Source for your Heroku Postgres database and expose your data as External Objects using the oData protocol.
How do we set this all up?
Set up a connected app for Canvas to use a Signed Request – this is the default
- The Signed Request containing the consumer key, access token, user context and authentication information is sent to the canvas app URL – this will be an HTTP POST to your application
- The Signed Request is decoded and verified in the external app using the shared consumer secret that’s in the SF connected app
- You can also use SAML SSO with your canvas app along with the Signed Request
- One advantage of a signed request method is that when a Salesforce admin has permitted users to access the Canvas app, no intermediate authorization is required for the app to make requests to Salesforce
- You can add your Canvas app to an Aura Component using <force:canvasApp>
- You can pass parameters to your Canvas app such as your Object Type so that it can work with multiple objects and know what kind of recordId it is receiving
Our System Scenario
The company currently has a Specialty Inventory Application. This in-house web-based Node.js application has a is used by Sales Consultants and allows them to perform specialized searches for availability and inventory of Products. This application does not have an exposed API but can be easily modified. Users need to be able to access this application from within the Salesforce UI.
How can we easily make this work within Salesforce? Let’s take a look
What we will be doing
- See how a Canvas App can access Salesforce Products/Pricebook to determine the pricing of items in an inventory system from an Order in Salesforce
- Select and add inventory items from the external app to the Order in Salesforce
- Take action on the Order when events are published from the Canvas App
- React to updates on the Order Status change in the Canvas app
How to set it up:
- Use the Enable Order Events in Order Settings to take advantage of the OOTB Platform Events for Order Status Change subscription channel: /event/OrderStatusChangedEvent
- Add the “Access and Manage Your Data (API)” OAuth scope in your Canvas connected app to connect to the Streaming API
- Node.js Canvas app on Heroku to use the Canvas SDK to perform a query in Salesforce for Product pricing information
- Set up an External Data Source and External Objects to expose the data in the external system back into Salesforce to relate those items to Order Line Items
Amit Chaudhary is Salesforce Application & System Architect and working on Salesforce Platform since 2010. He is Salesforce MVP since 2017 and have 17 Salesforce Certificates.
He is a active blogger and founder of Apex Hours.