Advanced Events Example

Component Event

Here is the markup for compEvent.evt.

<!--c:compEvent-->
<aura:event type="COMPONENT">
    <!-- pass context of where the event was fired to the handler. -->
    <aura:attribute name="context" type="String"/>
</aura:event>

Application Event

Here is the markup for appEvent.evt.

<!--c:appEvent-->
<aura:event type="APPLICATION">
    <!-- pass context of where the event was fired to the handler. -->
    <aura:attribute name="context" type="String"/>
</aura:event>

Notifier Component

The eventsNotifier.cmp notifier component contains buttons to initiate a component or application event.

The notifier uses aura:registerEvent tags to declare that it may fire the component and application events. Note that the name attribute is required but the value is only relevant for the component event; the value is not used anywhere else for the application event.

The parentName attribute is not set yet. We will see how this attribute is set and surfaced in eventsContainer.cmp.

<!--c:eventsNotifier-->
<aura:component>
  <aura:attribute name="parentName" type="String"/>
  <aura:registerEvent name="componentEventFired" type="c:compEvent"/>
  <aura:registerEvent name="appEvent" type="c:appEvent"/>

  <div>
    <h3>This is {!v.parentName}'s eventsNotifier.cmp instance</h3>
    <p><lightning:button
        label="Click here to fire a component event"
        onclick="{!c.fireComponentEvent}" />
    </p>
    <p><lightning:button
        label="Click here to fire an application event"
        onclick="{!c.fireApplicationEvent}" />
    </p>
  </div>
</aura:component>

CSS source

The CSS is in eventsNotifier.css.

/* eventsNotifier.css */
.cEventsNotifier {
    display: block;
    margin: 10px;
    padding: 10px;
    border: 1px solid black;
}

Client-side controller source

The eventsNotifierController.js controller fires the event.

/* eventsNotifierController.js */
{
    fireComponentEvent : function(cmp, event) {
        var parentName = cmp.get("v.parentName");

        // Look up event by name, not by type
        var compEvents = cmp.getEvent("componentEventFired");

        compEvents.setParams({ "context" : parentName });
        compEvents.fire();
    },

    fireApplicationEvent : function(cmp, event) {
        var parentName = cmp.get("v.parentName");

        // note different syntax for getting application event
        var appEvent = $A.get("e.c:appEvent");

        appEvent.setParams({ "context" : parentName });
        appEvent.fire();
    }
}

You can click the buttons to fire component and application events but there is no change to the output because we haven't wired up the handler component to react to the events yet.

The controller sets the context attribute of the component or application event to the parentName of the notifier component before firing the event. We will see how this affects the output when we look at the handler component.

Handler Component

The eventsHandler.cmp handler component contains the c:eventsNotifier notifier component and <aura:handler> tags for the application and component events.

<!--c:eventsHandler-->
<aura:component>
  <aura:attribute name="name" type="String"/>
  <aura:attribute name="mostRecentEvent" type="String" default="Most recent event handled:"/>
  <aura:attribute name="numComponentEventsHandled" type="Integer" default="0"/>
  <aura:attribute name="numApplicationEventsHandled" type="Integer" default="0"/>

  <aura:handler event="c:appEvent" action="{!c.handleApplicationEventFired}"/>
  <aura:handler name="componentEventFired" event="c:compEvent" action="{!c.handleComponentEventFired}"/>

  <div>
    <h3>This is {!v.name}</h3>
    <p>{!v.mostRecentEvent}</p>
    <p># component events handled: {!v.numComponentEventsHandled}</p>
    <p># application events handled: {!v.numApplicationEventsHandled}</p>
    <c:eventsNotifier parentName="{#v.name}" />
  </div>
</aura:component>

CSS source

The CSS is in eventsHandler.css.

/* eventsHandler.css */
.cEventsHandler {
  display: block;
  margin: 10px;
  padding: 10px;
  border: 1px solid black;
}

Client-side controller source

The client-side controller is in eventsHandlerController.js.

/* eventsHandlerController.js */
{
    handleComponentEventFired : function(cmp, event) {
        var context = event.getParam("context");
        cmp.set("v.mostRecentEvent", 
            "Most recent event handled: COMPONENT event, from " + context);
        
        var numComponentEventsHandled =
            parseInt(cmp.get("v.numComponentEventsHandled")) + 1;
        cmp.set("v.numComponentEventsHandled", numComponentEventsHandled);
    },

    handleApplicationEventFired : function(cmp, event) {
        var context = event.getParam("context");
        cmp.set("v.mostRecentEvent", 
            "Most recent event handled: APPLICATION event, from " + context);

        var numApplicationEventsHandled =
            parseInt(cmp.get("v.numApplicationEventsHandled")) + 1;
        cmp.set("v.numApplicationEventsHandled", numApplicationEventsHandled);
    }
}

The name attribute is not set yet. We will see how this attribute is set and surfaced in eventsContainer.cmp.

You can click buttons and the UI now changes to indicate the type of event. The click count increments to indicate whether it's a component or application event. We aren't finished yet though. Notice that the source of the event is undefined as the event context attribute hasn't been set .

Container Component

Here is the markup for eventsContainer.cmp.

<!--c:eventsContainer-->
<aura:component>
    <c:eventsHandler name="eventsHandler1"/>
    <c:eventsHandler name="eventsHandler2"/>
</aura:component>

The container component contains two handler components. It sets the name attribute of both handler components, which is passed through to set the parentName attribute of the notifier components. This fills in the gaps in the UI text that we saw when we looked at the notifier or handler components directly.

Add the c:eventsContainer component to a c:eventsContainerApp application. Navigate to the application.

https://MyDomainName.lightning.force.com/c/eventsContainerApp.app.

Click the Click here to fire a component event button for either of the event handlers. Notice that the # component events handled counter only increments for that component because only the firing component's handler is notified.

Click the Click here to fire an application event button for either of the event handlers. Notice that the # application events handled counter increments for both the components this time because all the handling components are notified.