Here’s a simple use case of using an application event to update an attribute in another component.
aeNotifier.cmp.aeNotifier.cmp sets a message in a component event and fires the event.aeHandler.cmp, handles the fired event.aeHandler.cmp sets an attribute in aeHandler.cmp based on the data sent in the event.The event and components in this example use the default c namespace. If your org has a namespace, use that namespace instead.
Note
The aeEvent.evt application event has one attribute. We’ll use this attribute to pass some data in the event when it’s fired.
1<!--c:aeEvent-->
2<aura:event type="APPLICATION">
3 <aura:attribute name="message" type="String"/>
4</aura:event>The aeNotifier.cmp notifier component uses aura:registerEvent to declare that it may fire the application event. The name attribute is required but not used for application events. The name attribute is only relevant for component events.
The button in the component contains a onclick browser event that is wired to the fireApplicationEvent action in the client-side controller. Clicking this button invokes the action.
1<!--c:aeNotifier-->
2<aura:component>
3 <aura:registerEvent name="appEvent" type="c:aeEvent"/>
4
5 <h1>Simple Application Event Sample</h1>
6 <p><lightning:button
7 label="Click here to fire an application event"
8 onclick="{!c.fireApplicationEvent}" />
9 </p>
10</aura:component>The client-side controller gets an instance of the event by calling $A.get("e.c:aeEvent"). The controller sets the message attribute of the event and fires the event.
1/* aeNotifierController.js */
2{
3 fireApplicationEvent : function(cmp, event) {
4 // Get the application event by using the
5 // e.<namespace>.<event> syntax
6 var appEvent = $A.get("e.c:aeEvent");
7 appEvent.setParams({
8 "message" : "An application event fired me. " +
9 "It all happened so fast. Now, I'm everywhere!" });
10 appEvent.fire();
11 }
12}The aeHandler.cmp handler component uses the <aura:handler> tag to register that it handles the application event.
The handler for an application event won’t work if you set the name attribute in <aura:handler>. Use the name attribute only when you’re handling component events.
Note
When the event is fired, the handleApplicationEvent action in the client-side controller of the handler component is invoked.
1<!--c:aeHandler-->
2<aura:component>
3 <aura:attribute name="messageFromEvent" type="String"/>
4 <aura:attribute name="numEvents" type="Integer" default="0"/>
5
6 <aura:handler event="c:aeEvent" action="{!c.handleApplicationEvent}"/>
7
8 <p>{!v.messageFromEvent}</p>
9 <p>Number of events: {!v.numEvents}</p>
10</aura:component>The controller retrieves the data sent in the event and uses it to update the messageFromEvent attribute in the handler component.
1/* aeHandlerController.js */
2{
3 handleApplicationEvent : function(cmp, event) {
4 var message = event.getParam("message");
5
6 // set the handler attributes based on event data
7 cmp.set("v.messageFromEvent", message);
8 var numEventsHandled = parseInt(cmp.get("v.numEvents")) + 1;
9 cmp.set("v.numEvents", numEventsHandled);
10 }
11}The aeContainer.cmp container component contains the notifier and handler components. This is different from the component event example where the handler contains the notifier component.
1<!--c:aeContainer-->
2<aura:component>
3 <c:aeNotifier/>
4 <c:aeHandler/>
5</aura:component>You can test this code by adding <c:aeContainer> to a sample aeWrapper.app application and navigating to the application.
https://MY_DOMAIN_NAME.lightning.force.com/c/aeWrapper.app.
If you want to access data on the server, you could extend this example to call a server-side controller from the handler’s client-side controller.
See Also
j