Activity Forums Salesforce® Discussions What is a flow of a code written in Salesforce Lightning Component?

  • Avnish Yadav

    Member
    September 10, 2018 at 1:24 pm

    Hi Anurag,

    The flow of Lightning Component -

    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.. 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);
        }
    }

    Hope this will you.
    Thanks.

     

    • This reply was modified 5 years, 6 months ago by  Avnish Yadav.

Log In to reply.

Popular Salesforce Blogs

Popular Salesforce Videos