Apex Code Development You need to sign in to do that
Don't have an account?
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:
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:
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?
The error message we are getting in our Lightning Component is this:
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?
-----------------------
A [force:canvasApp] component integrates a Force.com 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.
<aura:component>
<force:canvasApp developerName="myTestApp" />
</aura:component>
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.
<aura:component>
<force:canvasApp applicationName="myTestApp" />
</aura:component>
------------------------
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!
For the force:canvasApp I was using a combination of my own knowledge on canvas and basically this:
https://developer.salesforce.com/docs/atlas.en-us.lightning.meta/lightning/aura_compref_force_canvasApp.htm
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:
https://developer.salesforce.com/docs/atlas.en-us.lightning.meta/lightning/components_visualforce.htm
and a few other blogs (now including my own blog on adding a Chuck Norris quote to an LEX page, which works fine http://srlawr.blogspot.co.uk/2016/02/the-way-of-lightning-component.html (http://srlawr.blogspot.co.uk/2016/02/the-way-of-lightning-component.html) )
I'll give this a go now.
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...)
I then made my component:
I then made my app:
I then made my visualforce page, to invoke this app/component....
But when I put this on the page layout and load the page:
Something has gone wrong!
(I'm out of image uploads on this post now... so will continue in new post!)
And I reload my detail page, it comes straight through:
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 :)
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:
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:
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.