+ Start a Discussion
Daniel PuzaDaniel Puza 

How should a Lightning component communicate with a loaded Canvas App?

We are developing a custom Lightning component that contains a Canvas App which loads our external site inside of the Lightning component.

Is it possible, and if so what are some recommended ways to communicate between the Lightning component and the loaded Canvas App site? (NOT the parameters passed in to load the canvas app initially.)

For instance, we would like a button in the Lightning component to trigger an action inside the loaded Canvas App.

It seems that various methods of communicating are restricted by Lightning Locker etc.  I found documentation for various methods of event raising and handling but all I've tried have been without success.  It seems possible they're only for communicating from Lightning component to Lightning component, or from canvas app to canvas app (or Visualforce), but not Lightning component to canvas app.
https://developer.salesforce.com/docs/atlas.en-us.lightning.meta/lightning/events_component.htm
https://developer.salesforce.com/docs/atlas.en-us.platform_connect.meta/platform_connect/canvas_app_events.htm

I was able to send a message from the canvas app to the lightning component using this "non-standard, probably unsupported technique", but not the other way around.
https://salesforce.stackexchange.com/a/161621/49367
Best Answer chosen by Daniel Puza
Daniel PuzaDaniel Puza
Since using events between a Visualforce page and a canvas app (https://developer.salesforce.com/docs/atlas.en-us.platform_connect.meta/platform_connect/canvas_vf_app_resizing.htm) is supported, I wrapped our canvas app in an empty Visualforce page and used this blog article (https://developer.salesforce.com/blogs/developer-relations/2017/01/lightning-visualforce-communication.html) as an example to communicate between the lightning component and the Visualforce page by loading the Visualforce page in an iframe:
<iframe aura:id="vfFrame" src="{!'https://' + v.vfHost + '/apex/myvfpage'}"/>

Then I am able to use postMessage (https://developer.mozilla.org/en-US/docs/Web/API/Window/postMessage)/addEventListener (https://developer.mozilla.org/en-US/docs/Web/API/EventTarget/addEventListener) to communicate between the lightning component and the wrapper Visualforce page.  And can use publish (https://developer.salesforce.com/docs/atlas.en-us.platform_connect.meta/platform_connect/canvas_app_vf_publish_code_example.htm)/subscribe (https://developer.salesforce.com/docs/atlas.en-us.platform_connect.meta/platform_connect/canvas_app_vf_subscribe_code_example.htm) to pass the event between Visualforce and the canvas app.

Another approach that works is using SignalR on our external app to trigger the communication.  Had to work through some configuration for CORS, but got a proof of concept working that way too.

Tried to accomplish the same thing with CometD.  I thought it could be a little cleaner than SignalR because it’s built in to Salesforce and there is some Salesforce documentation on it.  However, I haven’t been able to get the CometD approach to work.  The Salesforce side is throwing CORS errors, even though I have the connection included in the Salesforce CORS/CSP whitelist.  I set up the CORS configuration in IIS and got SignalR working, but I don’t know what else I can configure in Salesforce to allow the same thing with CometD and CORS, or if it’s even possible.  According to this (https://developer.salesforce.com/docs/atlas.en-us.chatterapi.meta/chatterapi/extend_code_cors.htm), only these Salesforce technologies support CORS.
  • Analytics REST API
  • Bulk API
  • Connect REST API
  • Salesforce IoT REST API
  • Lightning Out
  • REST API
  • User Interface API
  • Apex REST

All Answers

ShirishaShirisha (Salesforce Developers) 
Hi Daniel,

Greetings!

Seems like this can be achieved by firing an event.So,can you please check the below thread for more information:

https://salesforce.stackexchange.com/questions/131245/how-to-fire-an-event-from-a-canvas-app-to-a-lightning-component

Kindly let me know if it helps you and close your query by marking it as best answer so that it can help others in the future.

Warm Regards,
Shirisha Pathuri
Daniel PuzaDaniel Puza
Shirisha, that's the same page I linked to in my original post -- the "non-standard, probably unsupported techniques" that I previously tried.
It doesn't work.  (Maybe it used to, but I assume that Lightning Locker prevents this now.)  It fails at the very first line, since outerIframe is null.  As I would expect.  Lightning Locker prevents accessing DOM elements from other Lightning components.
var outerIframe = document.querySelector('.forceCanvasApp iframe');



 
Daniel PuzaDaniel Puza
Since using events between a Visualforce page and a canvas app (https://developer.salesforce.com/docs/atlas.en-us.platform_connect.meta/platform_connect/canvas_vf_app_resizing.htm) is supported, I wrapped our canvas app in an empty Visualforce page and used this blog article (https://developer.salesforce.com/blogs/developer-relations/2017/01/lightning-visualforce-communication.html) as an example to communicate between the lightning component and the Visualforce page by loading the Visualforce page in an iframe:
<iframe aura:id="vfFrame" src="{!'https://' + v.vfHost + '/apex/myvfpage'}"/>

Then I am able to use postMessage (https://developer.mozilla.org/en-US/docs/Web/API/Window/postMessage)/addEventListener (https://developer.mozilla.org/en-US/docs/Web/API/EventTarget/addEventListener) to communicate between the lightning component and the wrapper Visualforce page.  And can use publish (https://developer.salesforce.com/docs/atlas.en-us.platform_connect.meta/platform_connect/canvas_app_vf_publish_code_example.htm)/subscribe (https://developer.salesforce.com/docs/atlas.en-us.platform_connect.meta/platform_connect/canvas_app_vf_subscribe_code_example.htm) to pass the event between Visualforce and the canvas app.

Another approach that works is using SignalR on our external app to trigger the communication.  Had to work through some configuration for CORS, but got a proof of concept working that way too.

Tried to accomplish the same thing with CometD.  I thought it could be a little cleaner than SignalR because it’s built in to Salesforce and there is some Salesforce documentation on it.  However, I haven’t been able to get the CometD approach to work.  The Salesforce side is throwing CORS errors, even though I have the connection included in the Salesforce CORS/CSP whitelist.  I set up the CORS configuration in IIS and got SignalR working, but I don’t know what else I can configure in Salesforce to allow the same thing with CometD and CORS, or if it’s even possible.  According to this (https://developer.salesforce.com/docs/atlas.en-us.chatterapi.meta/chatterapi/extend_code_cors.htm), only these Salesforce technologies support CORS.
  • Analytics REST API
  • Bulk API
  • Connect REST API
  • Salesforce IoT REST API
  • Lightning Out
  • REST API
  • User Interface API
  • Apex REST
This was selected as the best answer
mark jones 123mark jones 123
Hey there, it was a totally fine experience for me when I called in at your internet site. I just wanted to applaud you on the quality of the work you've completed here and additionally to send your team the best of luck with it as you grow down the road. It undoubtedly was a hoot to scan your blog and I'll naturally be dropping by once again to find exactly how you are developing. If you are looking windows 7 professional product key free 2019 then click on the link or for all version of window 7 like (ultimate, home) click here.
Daniel PuzaDaniel Puza
I posted a source code example in my stackoverflow answer here (https://salesforce.stackexchange.com/a/314376/49367).