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 ?

Canvas is a set of tools and JavaScript APIs that allow for easy integration with a 3rd party application. It allows you to take your new or existing applications and make them available to your users as part of their Salesforce experience. Under the hood, Canvas apps are loaded into Salesforce through an iframe.

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:

  • Authentication
  • Context
  • Cross-domain XHR
  • Events

The Canvas SDK

The Canvas SDK is used from JavaScript in an app that supports JavaScript to access Salesforce data that the user has access to. The data requests that Canvas apps make happen in the context of the Salesforce user.

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:

<script type="text/javascript" src="https://curious-impala-skkpwh-dev-ed.lightning.force.com/canvas/sdk/js/52.0/canvas-all.js"></script>

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
  • Canvas app to publish its own events to the Lightning Component from JavaScript and Subscribe to Order Status Change Events via SDK
  • 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

Demo

Check out the our YouTube, and don't forget to subscribe to our channel, so that you're notified right away when a new video is available.