Canvas App in Lightning Component

Question

I'm trying to port some Visualforce functionality to Lightning and struggling with an embedded canvas application.

After some trial and error I have the canvas app displaying, but the number of attributes I can specify seems pretty minimal. The following works:

<force:canvasApp developerName="CanvasTest" 
                 onCanvasAppError="{!c.canvasAppError}" width="infinite" />

but the next thing I want to do is add the parameters that I send my app, but as soon as this attribute is specified, even with the simplest JSON string I can come up with:

<force:canvasApp developerName="CanvasTest" 
                 onCanvasAppError="{!c.canvasAppError}" width="infinite"
                 parameters="{param1:'value1'}" />

I just get a blank page and the following message in the JavaScript console:

WARNING: Action failed: force$canvasApp$controller$callParentRender

The logs on my application being surfaced through canvas show no requests being made, so it looks like this fails very early on. I've also tried specifying the parameters via an attribute and building the JSON string in the helper but to no avail.

Using the same parameters in an <apex:canvasApp /> tag in a Visualforce page works fine.

I see the same behaviour if I specify a containerId: it works in Visualforce and places the canvas app inside the specified div, but I get a blank page in lightning with the failure message in the console.

Answer 1

I had the same problem in a Summer 16 pre-release org. I had a Lightning Component in a Visualforce page. The Lightning Component contained the force:canvasApp component and demonstrated the same behavior as described in the Question when the parameters attribute was used with the following syntax: parameters="{param1:'value1'}".

I found that the only syntax that allowed the canvas app to render and successfully receive the parameters was parameters='{"param1":"value1"}' (both param1 and value1 had to be surrounded by double-quotes, which leads to having to use single-quotes to wrap the entire attribute value).