Application events follow a traditional publish-subscribe model. An application event is fired from an instance of a component. All components that provide a handler for the event are notified.
Step 1 : create Application event
/* Use type="APPLICATION" in the <aura:event> tag for an application event. For example, this c:appEvent application event has one attribute with a name of message. */
===============================
ApplicationCommunication Event
================================
<aura:event type="APPLICATION" description="Discussion between multiple Components" >
<aura:attribute name="mesg" type="string" />
</aura:event>
Step 2: Create Source Component
/*A component registers that it may fire an application event by using <aura:registerEvent> in its markup. The name attribute is required but not used for application events. The name attribute is only relevant for component events. This example uses name="appEvent" but the value isn’t used anywhere.*/
Name: SourceCmp
==================
<aura:component implements="flexipage:availableForAllPageTypes">
<aura:registerEvent name="anyname" type="c:ApplicationCommunication" />
<aura:attribute name="Display" type="boolean" default="false" />
<aura:attribute name="greeting" type="string" />
<lightning:input type="string" label="Enter some data here" aura:id="inputdata"/>
<p><lightning:button label="Click here to fire an application event"
onclick="{!c.fireApplicationEvent}" />
</p>
</aura:component>
Step 3: copy paste below code in the SourceCmp client side controller
======
SourceCmp controller side code
========
({
fireApplicationEvent : function(component, event, helper) {
var message=component.find("inputdata").get("v.value");
var appEvent=$A.get("e.c:ApplicationCommunication");
appEvent.setParams({"mesg":message});
appEvent.fire();
}
})
Step 1 : create Application event
/* Use type="APPLICATION" in the <aura:event> tag for an application event. For example, this c:appEvent application event has one attribute with a name of message. */
===============================
ApplicationCommunication Event
================================
<aura:event type="APPLICATION" description="Discussion between multiple Components" >
<aura:attribute name="mesg" type="string" />
</aura:event>
Step 2: Create Source Component
/*A component registers that it may fire an application event by using <aura:registerEvent> in its markup. The name attribute is required but not used for application events. The name attribute is only relevant for component events. This example uses name="appEvent" but the value isn’t used anywhere.*/
Name: SourceCmp
==================
<aura:component implements="flexipage:availableForAllPageTypes">
<aura:registerEvent name="anyname" type="c:ApplicationCommunication" />
<aura:attribute name="Display" type="boolean" default="false" />
<aura:attribute name="greeting" type="string" />
<lightning:input type="string" label="Enter some data here" aura:id="inputdata"/>
<p><lightning:button label="Click here to fire an application event"
onclick="{!c.fireApplicationEvent}" />
</p>
</aura:component>
Step 3: copy paste below code in the SourceCmp client side controller
======
SourceCmp controller side code
========
({
fireApplicationEvent : function(component, event, helper) {
var message=component.find("inputdata").get("v.value");
var appEvent=$A.get("e.c:ApplicationCommunication");
appEvent.setParams({"mesg":message});
appEvent.fire();
}
})
Step 4: Listener or Handler Markup code
/*Use <aura:handler> in the markup of the handler component.
For example:
<aura:handler event="c:appEvent" action="{!c.handleApplicationEvent}"/>*/
==========
Name: Listener (Handler)
===========
<aura:component implements="flexipage:availableForAllPageTypes" access="global" >
<aura:attribute name="receivedevent" type="string" />
<aura:handler event="c:ApplicationCommunication" action="{!c.handleApplicationEvent}" />
<p>{!v.receivedevent}</p>
</aura:component>
Step 5:
==================
Listener client side controller
==================
({
handleApplicationEvent : function(cmp, event) {
var Sourcedata= event.getParam("mesg");
var response="Sorry I did not understand you";
if(Sourcedata=='Hi')
{
response="Hello"
}
if(Sourcedata=='How are you')
{
response="Im doing great!!"
}
if(Sourcedata=='How is your course')
{
response="Going good"
}
if(Sourcedata=='Do practice after this session')
{
response="Sure Thank you !!"
}
if(Sourcedata=='Good Night')
{
response="Good night too, sweet dreams !!"
}
if(Sourcedata=='Good Morning')
{
response="Good Morning too, have a great day !!"
}
cmp.set("v.receivedevent",response);
}
})
Step 6: create Application with the below code
<aura:application >
<c:SourceCmp />
<c:Listener />
</aura:application>
Step 7: Instead of above 6th step code I recommend to Surface SourceCmp and Listener on different parts of the Application builder page. Though there is no connection between these components but still you can create communication between these two components.
