Reading list Switch to dark mode

    How to fire Lightning Event from Visualforce Page

    Updated 10 August 2021

    In this blog, we will learn how to fire lightning event from visualforce page. We will be using apex:includeLightning and aura:dependency tags. Let us proceed with knowing about these tags in brief.

    Tag Reference

    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.

    Searching for an experienced
    Salesforce Company ?
    Find out More

    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”.

    Fire lightning Events in Visualforce Page

    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>

    Output

    Support

    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/

    . . .

    Leave a Comment

    Your email address will not be published. Required fields are marked*


    Be the first to comment.

    Back to Top

    Message Sent!

    If you have more details or questions, you can reply to the received confirmation email.

    Back to Home

    Table of Content