1

We're currently using an aura component with the <force:canvasApp> component to embed our Canvas App. As mentioned in the answer to this post, Sfdc.canvas is not fully exposed to the aura component. I've attempted to load canvas-all.js into the aura component using <ltng:require>, but from the aura component's controller/helper javascript files, I can't get Sfdc.canvas.parent to show up (even though the browser console shows Sfdc.canvas.parent as existing).

Does anyone have a working example of firing a custom canvas app event via Sfdc.canvas.parent.publish from an aura component into the embedded Canvas App? Any other way to fire an event from Lightning to the Canvas App?

Update (Edit 1)

As suggested by @rzr below, using postMessage() from the outer iframe in the Canvas App would do the job (you can see an example by @studds here and postMessage() in action to communicate between Lightning and a VF page here). Only problem is that it is seemingly impossible to touch the DOM inside the <force:canvasApp> component as per Lightning Locker DOM security.

Does anyone know how to send any communications from Lightning to the embedded <force:canvasApp> app?

1

I think the canvas-all.js is only meant to be used in the app being canvassed, and not in any Aura/LWC component.

Is there anything keeping you from using the standard iframe postMessage API? If you see the documentation for force:canvasApp it states that the component takes a canvasId="someId" property that you should use for targeting events:

"An unique label within a page for the Canvas app window. This should be used when targeting events to this canvas app."

I havent tried this out but it might send you in the right direction:

component.find("someId").getElement().contentWindow.postMessage("message", "some message");

Then in your app being canvassed:

$(window).on("message", function(e) {
  console.log(e.originalEvent.data)
});
  • Since the canvas app is a separate component, you can't access the DOM via .getElement() (see the Invalid DOM Access section). So component.find("myCanvasApp").getElement() throws an error. Otherwise your approach is right on target. – Brian Miller Feb 17 at 20:48
  • Here's how to use the canvasId to get the unique outer iframe identifier: const canvasIframeOuterId = 'canvas-outer-' + namespace + ':' + appName + ':' + canvasId; – Brian Miller Feb 17 at 20:51

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.