6

I am tring to fire a lightning application event from a component being loaded by Lightning Components for Visualforce. Here is the event

<aura:event type="APPLICATION" description="Event template">
  <aura:attribute name="id" type="String"/>
</aura:event>

In my component I have

<aura:registerEvent name="getId" type="c:DWRE_getId"/>

My helper I have

var getProductsEvent = $A.get("e.c:DWRE_getId");

However getProductsEvent is always undefined. Is it possible to fire application level events from components being loaded in VF user LCfVF?

Don

2
  • Its definitely possible .Whats your event name that you have declared ? Apr 8, 2016 at 18:13
  • 1
    Also share the detailed code .For lightning components always give as detail as possible so that its a step easier to debug Apr 8, 2016 at 18:14

1 Answer 1

11

There is a blog post here with the below working example where clicking the button fires the event and then the event is handled on the visualforce page:

-- Component --

<aura:component>
  <div> Hello World !!!! </div>
   <aura:registerEvent name="myevent" type="c:myEvent" />
  <ui:button label="fireEvent" press="{!c.fireevent}" />
</aura:component>

-- Component Controller --

({
    fireevent: function(component, event, helper) {
        var myEvent = $A.get("e.c:myEvent");
        myEvent.setParams({"data":"Test"});
        myEvent.fire();
    }
})

-- Application Event --

<aura:event type="APPLICATION">
  <aura:attribute type="string" name="data" />
</aura:event>

-- Lightning App --

<aura:application access="GLOBAL" extends="ltng:outApp">
  <aura:dependency resource="c:myComponent" />
</aura:application>

-- Visualforce Page --

<apex:page showHeader="false" sidebar="false">
    <apex:includeLightning />
    <div id="lightning"> Hello world VF ..!!! </div>
    <script>

        $Lightning.use("c:myEventApp", function() {
            $Lightning.createComponent("c:myComponent", {}, "lightning", function(){
                $A.eventService.addHandler({ "event": "c:myEvent", "handler" : visualForceFunction});

            });
        }); 

    </script>

    <script>

    var visualForceFunction = function(event){
            var myEventData = event.getParam("data");
            console.log(myEventData);
        };

    </script>
</apex:page>
2
  • Thanks everyone. After checking the examples and the answers I have it working as expected. Apr 10, 2016 at 14:17
  • @Jenny B thanks a petabyte. Works great with Locker Service. Used it to call console integration toolkit (close sub tab) from Lightning Component.
    – dzh
    Nov 17, 2016 at 21:37

You must log in to answer this question.

Not the answer you're looking for? Browse other questions tagged .