Publish Events: Passing events from a Skuid Page to a contained Lightning Out Component?

  • 1
  • Question
  • Updated 3 months ago
  • Answered
I'm trying to raise an event from a Skuid page hosted in Visual Force to a Lightning Component that's hosted in the Skuid page in a iFrame, like so:



But no matter what I seem to try the LC doesn't seem to be hearing the event. I tried a point & click publish with scope set to include LC's on the Tab's Actions but no dice. I also tried using a snippet but same results. 

I know there are several configurations where this will work such as Skuid pages hosted in LC's, but what about the other way around?

Thanks
Photo of Sean W

Sean W

  • 80 Points 75 badge 2x thumb

Posted 3 months ago

  • 1
Photo of Zach McElrath

Zach McElrath, Employee

  • 49,056 Points 20k badge 2x thumb
So, the Lightning Component is embedded in a Visualforce Page that is being loaded into Skuid via an iframe? That is not supported out of the box, although it is possible. Is there a reason you're loading the Lightning Component in a Visualforce Page in an iframe, vs just loading Lightning Out directly in the Skuid Page? This can be done via JavaScript, and I think that if you do this, the Lightning Component will hear the event.

Basically you just need to do the following (assuming that you already have a Lightning Application and Lightning Component properly configured for Lightning Out (https://developer.salesforce.com/docs/atlas.en-us.lightning.meta/lightning/lightning_out.htm)

1. Add a JavaScript Resource with Resource Type "External" to load the Lightning Out library, from the relative URL: lightning/lightning.out.js  
2. Add a JavaScript Resource with Record Type "Inline (Component)" that instantiates your desired Lightning Out Component, whose content should be something like this

var element = arguments[0];$Lightning.use("c:MyLightningOutApp",    // name of the Lightning app    function() {        $Lightning.createComponent(            "c:FooBar", // top-level Lightning component of your app            { },                  // attributes to set on the component when created            element[0],   // insert the lightning component inside the Skuid custom component's DOM element            function(cmp) {                // callback when component is created and active on the page            }        );    },    "https://acme.lightning.force.com", // Your Lightning domain    skuid.utils.userInfo.sessionId // Access Token); 




Photo of Sean W

Sean W

  • 80 Points 75 badge 2x thumb
Thanks the detailed response, but I'm getting what looks like a cross site script error when I try this:

Failed to load https://zzz.lightning.force.com/c/QBOUsageHistory_App.app?aura.format=JSON&aura.format=JSON&aura.formatAdapter=LIGHTNING_OUT: No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin 'https://zzz--c.cs9.visual.force.com' is therefore not allowed access.

Any idea? Also, I haven't run across this technique in the documentation. Is it in there anywhere?
(Edited)