How to fire Lightning Event from Visualforce Page

A brief information about tags.

1) apex:includeLightning : It includes lightning components for Visualforce JavaScript library, lightning.out.js, according to the domain mapping.

Attributes-
–> id – An identifier to the element.
–> rendered – Specifies if the element will be rendered or not. The default value is true.

2) aura:dependency – This tag is used for declaring dependencies.

Attributes-
–> resource – The resource on which the dependency is being declared.
–> type – The type of resource that component depends on. The default value is “COMPONENT”.

Now, let’s start with the code. We have to fire an Event, so, first and foremost we will require an event. So, we will write a simple code for event containing single parameter, and event type should be “APPLICATION”:

<aura:event type="APPLICATION">
    
    <!-- 
        /**
         * Webkul Software.
         *
         * @category  Webkul
         * @author    Webkul
         * @copyright Copyright (c) 2010-2016 Webkul Software Private Limited (https://webkul.com)
         * @license   https://store.webkul.com/license.html
         */
     -->
    
	<aura:attribute type="string" name="data" />
</aura:event>

Now, let’s start with the app:

<aura:application access="GLOBAL" extends="ltng:outApp">
	
    <!-- 
        /**
         * Webkul Software.
         *
         * @category  Webkul
         * @author    Webkul
         * @copyright Copyright (c) 2010-2016 Webkul Software Private Limited (https://webkul.com)
         * @license   https://store.webkul.com/license.html
         */
     -->
    
	<!--Access of the app should be "global"-->
	<!--The app should extend from ltng:outApp or ltng:outAppUnstyled-->
	<!--The dependency component can be called from Visualforce page, using this app.-->
	<aura:dependency resource="c:myDemoComponent" />
</aura:application>

We have to create a myDemoComponent which we have the dependency on, so here is the code:

<!--COMPONENT-->
<aura:component >
    
    <!-- 
        /**
         * Webkul Software.
         *
         * @category  Webkul
         * @author    Webkul
         * @copyright Copyright (c) 2010-2016 Webkul Software Private Limited (https://webkul.com)
         * @license   https://store.webkul.com/license.html
         */
     -->
    
    <br/><br/>
    <aura:attribute name="str" type="String" default="Hello World Ligtning!!!"/>
  	<div>{!v.str}</div>
    <br/><br/>
	<aura:registerEvent name="myevent" type="c:myEvent" />
	<ui:button label="fireEvent" press="{!c.fireevent}" />
</aura:component>


<!--Controller-->
({
    /**
     * Webkul Software.
     *
     * @category  Webkul
     * @author    Webkul
     * @copyright Copyright (c) 2010-2016 Webkul Software Private Limited (https://webkul.com)
     * @license   https://store.webkul.com/license.html
     */
    fireevent: function(component, event, helper) {
        var myEvent = $A.get("e.c:myEvent");
        myEvent.setParams({"data":"Test"});
        myEvent.fire();
    }
})

Now let’s call the use the App in Visualforce Page:

<apex:page showHeader="false" sidebar="false">    
    <!-- 
        /**
         * Webkul Software.
         *
         * @category  Webkul
         * @author    Webkul
         * @copyright Copyright (c) 2010-2016 Webkul Software Private Limited (https://webkul.com)
         * @license   https://store.webkul.com/license.html
         */
     -->
     
     
    <apex:includeLightning />
    
    <!--DOM element in which lightning will be rendered-->    
    <div id="lightning"> Hello world VF ..!!! </div>
    <script>
        //lightning out function
        $Lightning.use("c:myEventApp", function() {
            $Lightning.createComponent("c:myDemoComponent", {}, "lightning", function(){
                $A.eventService.addHandler({ "event": "c:myEvent", "handler" : visualForceFunction});
            });
        }); 

    </script>

    <script>
    //handler called in lightning out function
    var visualForceFunction = function(event){
        var myEventData = event.getParam("data");
        alert(myEventData);
    };

    </script>
</apex:page>

That’s all for Remote Action function in Visualforce Page, still have any issue feel free to add a ticket and let us know your views to make the code better https://webkul.uvdesk.com/en/customer/create-ticket/