5

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

  • Its definitely possible .Whats your event name that you have declared ? – Mohith Shrivastava Apr 8 '16 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 – Mohith Shrivastava Apr 8 '16 at 18:14
9

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>
  • Thanks everyone. After checking the examples and the answers I have it working as expected. – Donald Rivard Apr 10 '16 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 '16 at 21:37

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.