Application Event in Lightning Component in Salesforce

As we have discussed Component Events in my previous blog which is also one of the events helps to communicate between two components.

Now you might be thinking when there are Component Events why we should use Application Events, well there is a difference between these two custom events.

First of all, let us know the differences i.e. Component Events can be handled by the same component or a component that contains the component or a component that instantiates while Application Events are handled by any component defined for the event.

One of the best things this Application Component can have is it can be used throughout the application.

Attribute tag used for Application Component is as follows:

type=’’Application’’ in the aura:event tag

During the handling of application events, there is no need to specify name attribute in aura:handler.

To get an instance of Application type event, we use,

$A.get(“e.myNamespace:myAppEvent’’) in javascript.

Don't forget to check out: Sort Picklist Values in Lightning Component | Salesforce Tutorials

Let’s take an example of Application Event:

1. Firstly create an application event named ExampleApplicationEvent which is used to pass the values from ParentApplicationEvent to ChildApplicationEvent.

You have to give type as Application in order to use the Application Event.

<!--ExampleApplicationEvent.evt-->
<aura:event type="APPLICATION" description="Example of Application Event" >
    <aura:attribute name="Text" type="string" />
</aura:event>

2. Secondly, create a ParentApplicationEvent Component which is used to register the application event and we made a button on click of that, we can get the parameter which we set using JS Controller.

We have to use aura register event to use application/component events and the name must be the same as given in the event.

<!--ParentApplicationEvent-->
<aura:component >
    <aura:registerEvent name="ExampleApplicationEvent" type="c:ExampleApplicationEvent"/>
    <lightning:button label="Tap to fire the event" variant="brand" onclick="{!c.ParentComponentEvent}"/>
</aura:component>

3. Thirdly we create a ParentApplicationEvent JS Controller which is used to get an event using the event name and set the parameter.

Here we used setParams, you can also use setParam they are both the same thing.

({
    ParentComponentEvent : function(component, event, helper) {
        //You can get the event using event name
        var ExAppEvent = $A.get("e.c:ExampleApplicationEvent");
        // Set here event attribute value
        ExAppEvent.setParams({"Text" : "Welcome To"});
        ExAppEvent.fire();
    }
})

4. Fourthly we create a ChildApplicationEvent Component which is used to handle the component which is fired using the handler.

<!--ChildApplicationEvent-->
<aura:component >
    <aura:attribute name="eventText" type="String"/>
    <aura:handler event="c:ExampleApplicationEvent" action="{!c.ChildComponentEvent}"/>
    <div class="slds-m-around_xx-medium">
        <p>{!v.eventText}</p>
    </div>
</aura:component>

5. Fifthly we create a ChildApplicationEvent JS Controller.

({
    ChildComponentEvent : function(component, event, helper) {
        //You can get the event text attribute here
        var text = event.getParam("Text");
        // Set here event attribute handler values
        component.set("v.eventText", text + ' World! ');
    }
})

Check out another amazing blog by Deepak here: Objects Related To Salesforce Files And Connection Between Them

6. At last, we have created a Lightning Application which is used to preview the component.

<aura:application extends="force:slds">
    <c:ParentApplicatioEvent/>
    <c:ChildApplicationEvent/>
</aura:application>

I have explained stepwise how to use Application Events in Lightning Components. If you still have doubt feel free to ask.

Happy Coding!

Reference: biswajeetsamal