In continuation to my previous post about component event in Salesforce Lightning, today I would like to discuss about the another type of event i.e. Application event.

Application event in Salesforce Lightning follows publish-subscribe model. An application is fired from an instance of a component. All components that provide a handler for the event will be notified once the event is fired. Below diagram will give you a more clear picture –

As the above diagram tells – Component 1 is firing the event and that information is getting passed to Salesforce framework. Now all the events – Component 2, 3, 4 & 5 are already registered as handler of this event. So it is now Salesforce framework who will notify all these components that the event has occurred. Here you can see that all the components are very much loosely coupled because when Component 1 is firing the event, it does not know or rather it does not care which component is going to handle that event. Similarly when Component 2 or 3 or 4 or 5 will get notified that the event has occurred, they really don’t know which component has fired the event. This approach makes that component very much loosely coupled.

Now I will start with few basic and later I will give you an example to understand Application event.

CREATE CUSTOM APPLICATION EVENT:
To create Application event, you need to write the below code –

1
2
3
<aura:event type="APPLICATION">
    <aura:attribute name="name" type="String"/>
</aura:event>

The above code will create an Application event with name as an attribute to the event.

REGISTER APPLICATION EVENT:
A component needs to register for the event if the component wants to fire that event. Below code will be used to register for application event –

1
<aura:registerEvent name="applicationEvent" type="c:applicationEvent"/>

For application event name attribute is required, but not used for application event. The name attribute is only relevant for component event.

FIRE APPLICATION EVENT:
To fire an event, we need to first get the instance of the event in JavaScript and then use the fire() to fire the event. Here is the code –

1
2
3
var appEvent = $A.get("e.c:applicationEvent");
appEvent.setParams({ "name" : "Sudipta Deb" });
appEvent.fire();

HANDLING APPLICATION EVENT:
Use to handle the event. For example:

1
<aura:handler event="c:applicationEvent" action="{!c.handleApplicationEvent}"/>

When the event is fired, the client side controller method handleApplicationEvent will be called.

With this understanding now I will give you an example of application event communication. 
Here I will prepare two different components –

  • Component 1 – ButtonPressed – This component will contain the button and will fire the event on each button pressed.
  • Component 2 – ButtonCountPressed – This component will show how many times the button is pressed. This component will handle the event which will get fired from Component 1 on each button click.
APPLICATION EVENT – ButtonCountEvent:
To start with we need to first create the application event. Here is the code.
1
2
<aura:event type="APPLICATION" description="Fired when a Button is pressed">
</aura:event>
COMPONENT 1 – ButtonPressed:
The component code –

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
<aura:component implements="force:appHostable,flexipage:availableForAllPageTypes">
 <ltng:require styles="/resource/slds090/assets/styles/salesforce-lightning-design-system.min.css"/>
    <aura:registerEvent name="ButtonCountEvent" type="sudipta:ButtonCountEvent"/>
    
    <div class="slds-page-header" role="banner">
     <div class="slds-media__body">
        <p class="slds-page-header__title slds-truncate slds-align-middle" title="Click and Count">CLICK AND COUNT</p>
        <p class="slds-text-body--small slds-page-header__info">SUDIPTA DEB</p>
     </div>
    </div>
    <div class="container">
        <form class="slds-form--stacked">
         <div class="slds-form--element">
             <ui:button label="Click Here" labelClass="label" class="slds-button--neutral" press="{!c.countButtonClick}"/>
            </div>
        </form>
    </div>
</aura:component>

The controller code –

1
2
3
4
5
6
({
 countButtonClick : function(component, event, helper) {
        var clickEvent = $A.get("e.sudipta:ButtonCountEvent");
        clickEvent.fire();
 }
})

The style code –

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
.THIS .slds-button--neutral{
    padding: 10px;
    margin: 10px;
}
.THIS .slds-page-header__title{
    font-size: x-large;
    color: #097FE6;
}
.THIS .slds-page-header__info{
    padding-top: 10px;
    color: #5F9FD6;
}

COMPONENT 2 – ButtonCountPressed:
The component code –

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
<aura:component implements="force:appHostable,flexipage:availableForAllPageTypes">
 <ltng:require styles="/resource/slds090/assets/styles/salesforce-lightning-design-system.min.css"/>
    <aura:handler event="sudipta:ButtonCountEvent" action="{!c.incrementCount}"/>
    
    <!-- Aura Attributes -->
    <aura:attribute name="count" type="Integer" default="0"/>
    
    <div class="container stds-p-top-medium">
     <div class="slds-notify slds-notify--toast slds-theme--alert-texture">
         <p class="slds-title__title slds-truncate">No of click:</p>
            <ui:outputNumber class="slds-truncate" value="{!v.count}"/>
        </div>
    </div>
</aura:component>

The controller code –

1
2
3
4
5
6
7
8
({
 incrementCount : function(component, event, helper) {
        var count = component.get("v.count");
        count++;
  component.set("v.count", count);

 }
})

FINALLY THE APPLICATION – CountTheTotalClickApp

1
2
3
4
<aura:application >
    <sudipta:ButtonPressed />
    <sudipta:ButtonCountPressed />
</aura:application>

Note – “sudipta” is the namespace used by me. So you need to replace “sudipta” with your org namespace.

Here is the screenshot of the lightning app –

I hope the concept of application event and how to use it is clear now. Please provide your feedback. Thanks.