Activity Forums Salesforce® Discussions What is the Flow of code in Salesforce lightning event?

  • Avnish Yadav

    Member
    August 9, 2018 at 7:25 am

    Hello Anurag,

    Let's say you have Component A and Component B and an event E. You want to move from A to B then,

    The flow of Code in Lightning Event are:-

    Component Event:-

    1. Firstly you have to register an event in component A.

    <aura:registerEvent name="EventE" type="c:EventE"/>

    2. Fire the event by clicking any button, like onclick="{!c.fireComponentEvent}". Controller Code is here:-

    {
      fireComponentEvent : function(cmp, event) {
      // Get the component event by using the
      // name value from aura:registerEvent
      var cmpEvent = cmp.getEvent("EventE");
      cmpEvent.setParams({
         "message" : "A component event fired me. " +
         "It all happened so fast. Now, I'm here!" });
          cmpEvent.fire();
       }
    }

    3. In Event E we have to pass data message so it look like this

    <aura:event type="COMPONENT">
    <aura:attribute name="message" type="String"/>
    </aura:event>

    4. Handle the event in Component B.
    <aura:handler name="EventE" event="EventE" action="{!c.handleComponentEvent}"/>

    5. Code for Component B controller:-

    {
        handleComponentEvent : function(cmp, event) {
         var message = event.getParam("message");

         // set the handler attributes based on event data
         cmp.set("v.messageFromEvent", message);
        }
    }

    That's all for Component Event. Let's talk about Application Event.

    Application Event:-

    1. Firstly you have to register an event in component A. Well, in Application event, it is not mandatory to register event but here we are registering the event.

    <aura:registerEvent name="EventE" type="c:EventE"/>

    2. Fire the event by clicking any button, like onclick="{!c.fireComponentEvent}". Controller Code is here:-

    {
      fireApplicationEvent : function(cmp, event) {
    // Get the application event by using the
    // e.<namespace>.<event> syntax
    var appEvent = $A.get("e.c:EventE");
    appEvent.setParams({
    "message" : "An application event fired me. " +
    "It all happened so fast. Now, I'm everywhere!" });
    appEvent.fire();
       }
    }

    3. In Event E we have to pass data message so it look like this

    <aura:event type="APPLICATION">
    <aura:attribute name="message" type="String"/>
    </aura:event>

    4. Handle the event in Component B.
    <aura:handler name="EventE" event="EventE" action="{!c.handleApplicationEvent}"/>

    5. Code for Component B controller:-

    {
        handleApplicationEvent : function(cmp, event) {
         var message = event.getParam("message");

         // set the handler attributes based on event data
         cmp.set("v.messageFromEvent", message);
        }
    }

    Thanks.

Log In to reply.

Popular Salesforce Blogs

Popular Salesforce Videos