function readOnly(count){ }
Starting November 20, the site will be set to read-only. On December 4, 2023,
forum discussions will move to the Trailblazer Community.
+ Start a Discussion
srlawr uksrlawr uk 

Problems with the force:CanvasApp tag in LEX

I am trying to get a Canvas app working in a Lightning Component (exactly as the docs say should be possible) but I am up against an undebuggable error message. Here is what I have tried, and the problem I face:

The error message we are getting in our Lightning Component is this:

js error

It's obviously some sort of Javascript error, but we get no console log relating to it, or indeed can put any breakpoints in the Lightinng Javascript to intercept it. There is no way it's coming from our canvas app, as I can explain...

Having had this problem with our "solution" we began boiling it down. We made the contents of our connected app just the word "Hello" in some HTML tags (not even "Hello World"!) - and then with this canvas app put on a standard visualforce page with the old school apex:canvasApp tag - we have no problem. We can also see it in the canvas app previewer. The connected app is ok.

In another test, I replaced the Lightning Component's force:canvasApp tag with just the words "I am content" - which immediatly appears in our app, in our page - no problem. So I know the Component/App/Visualforce (that's how we are embedding it) works ok too.

The problem comes when we replace the words "I am content" in the Lightning Componenet with the force.canvasApp tag - we suddenly start getting this crappy Javascript error.

My usage of this tag is literally as simple as:
<force:canvasApp applicationName="canvasApi" namespacePrefix="orgNamespace"  />
Which is as far as I can tell the "correct usage" - as per the skeletal docs.

For the record as well, whenever I try to use the Lighting App builder for almost any purpose, I get beaten to the ground with this error bubble - which I have (finally) suddenly realised is really similar looking. Is LEX/Lightning Components (with Canvas) bascially still just a lie?

error bubble

Hey srlawr, can you link me to the doc you are using?

A [force:canvasApp] component integrates a Canvas app into a Lightning component or Lightning app. To use this component, enable Lightning Components as a valid location for the app.

  1. In Setup, search Apps in the QuickFind menu.
  2. Under Connected Apps, click Edit next to the target Canvas app.
  3. Under Canvas App Settings, move Lightning Components from the Available list to the Selected List.
  4. Click Save.

Once this setting is enabled, use the [developerName] or [applicationName] attribute to reference the Canvas app in your markup. For example, this component exposes a Canvas app.

    <force:canvasApp developerName="myTestApp" />

To use [applicationName], the component must be in the organization where the Canvas app was created and that organization can't have a namespace prefix. This component is valid in a non-namespaced organization but displays an error in an organization with a namespace prefix.

    <force:canvasApp applicationName="myTestApp" />

There is need for improvement on the developer (or debugging) experience and my team is working on it this and next release. Keep on bringing up the issues and we will keep improving on them until we reach utopia!

srlawr uksrlawr uk
Hi, thanks so much for getting back, I will spin up a new Dev Edition and see if I can implement my connected app/component without setting a namespace on the org.. to see if I can get this working.

For the force:canvasApp I was using a combination of my own knowledge on canvas and basically this:

The thing being there (and this is a concern as I go ahead to try this again) :
"namespacePrefix: Namespace value of the Developer Edition organization in which the canvas app was created. Optional if the canvas app wasn’t created in a Developer Edition organization. If not specified, defaults to null."

I think I have to use a namespace prefix in a Dev edition to configure a canvas app? Though maybe I don't, and in which case I can use the developerName tag on canvasApp (this is what I will try).

For putting the component on the page I am referencing:

and a few other blogs (now including my own blog on adding a Chuck Norris quote to an LEX page, which works fine ( ) 

I'll give this a go now.
srlawr uksrlawr uk
Ok. So I span up a new Dev edition. I setup my Canvas Connected app. I did not set a namespace on the org.

Here is the config (sorry, I put the client name all over the settings so I have had to obfuscate them! But hopefully you can see this is a Canvas Connected app...)

User-added image

I then made my component:

User-added image

I then made my app:

User-added image

I then made my visualforce page, to invoke this app/component....

User-added image

But when I put this on the page layout and load the page:

User-added image

Something has gone wrong!

(I'm out of image uploads on this post now... so will continue in new post!)
srlawr uksrlawr uk
I know that all the visualforce/component/lightning app stuff is correctly wired, because if I replace the force.canvasApp tag with some text:

User-added image

And I reload my detail page, it comes straight through:

User-added image

I haven't changed anything else in this brand new Dev Edition... (no domain, no namespace, no other fields, files or code)....

So either there IS something else I need to "turn on" to enable canvas in Lightning Components... OR it's broken somewhere on the platform level?!

Thanks again for your input. I will continue to plug away at this, and the moment I have any success, I will get in touch :)
srlawr uksrlawr uk
Here's an interesting twist.

If I include on the visualforce page a standard apex:canvasApp tag.... I get some different shit going on!!

(sorry for all the obfuscation, I hope it still makes sense!)

So new visualforce page with apex tag:

User-added image

When I load the LEX page now, the standard tag works, as expected... but now I DO get some variation of a canvas app from my component too:

User-added image

how interesting! So I might guess that including the apex:canvasApp tag is causing a bit of Javascript that the force:CanvasApp depends on (but is missing) to be included in the page, so the force:canvasApp renderer actually starts to work...

However, there is still some problem (I have no idea what "Error: Parent Version information not supplied" means!) but as you can see from the red box bit - my canvas app otherwise works fine, outputting it's line of text, so I don't know why the lightning component is giving me that message.