Application Events In Salesforce Simplified

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.

In the above diagram, there are 3 sibling components.

Component-A fires an application event. Since Component-C has a handler associated for this application even so the framework will notify it.

Create Custom Application Events:

Open the developer console.

Go to File > Lightning Event

Enter the name – MyApplicationEvent and click Submit.

Save the following code in the MyApplicationEvent.evt

<aura:event type="APPLICATION" description="My Application Event">
    <aura:attribute type="String" name="eventMessage"/>
</aura:event>

In order to create an application event, the type attribute inside aura:event should be equal to APPLICATION.

You can specify the parameters this event will accept by using an aura:attribute.

Register Application Events:

You have to register or specify a component event in the component markup where it is expected to be fired.

You can register an event using the <aura:registerEvent> in the component markup.

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

In aura:registerEvent, the type attribute accepts the name of the component with a namespace prefix. Here c is the default namespace.

Fire Application Events:

You can fire an event using the fire() method.

The following snippet shows how to fire a component event:

var appEvent = $A.get("e.c:MyApplicationEvent");
appEvent.setParams({"eventMessage" : "paramterValue" });
appEvent.fire();

In the above code block, we have fired an application event. Along with it we also set the event parameters using the setParams() method.

Please note that the syntax to get an instance of an application event is different than the syntax to get a component event, which is cmp.getEvent(“eventName”).

Handle Application Events:

Use <aura:handler> in the markup of the handler component.

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

The event attribute specifies the event being handled. The format is namespace:eventName.

Please note that 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.

Application Event Example:

Please create an aura component with the name ComponentA and save the following code:

<aura:component>
<aura:registerEvent name="MyApplicationEvent" type="c:MyApplicationEvent"/>
<lightning:card title="Component-A">
    <aura:set attribute="actions">
        <lightning:button label="Fire App Event!" onclick="{!c.fireAppEvent}"/>
    </aura:set>
    <p class="slds-p-horizontal_small">
        Component-A will fire an App event.
    </p>
</lightning:card>
</aura:component>	

({
    fireAppEvent : function(component, event, helper) {
        var appEvent = $A.get('e.c:MyApplicationEvent');
        appEvent.setParams({"eventMessage":"Hey, Have an Awesome Day!"});
        appEvent.fire();
    }
})

Please create an aura component with the name ComponentB and save the following code:

<aura:component>
    <aura:handler event="c:MyApplicationEvent" action="{!c.handleAppEvent}"/> 
    <aura:attribute name="message" type="String"></aura:attribute>
    <lightning:card title="Component-B">
        <p class="slds-p-horizontal_small">
            {!v.message}
        </p>
    </lightning:card>
</aura:component>	

({
    handleAppEvent : function(component, event, helper) {
        var msg = event.getParam("eventMessage");
        console.log('msg' + msg);
        component.set("v.message", msg);
    }
})

Please create an aura app with the name myApp and save the following code:

<aura:application extends="force:slds" >
	<lightning:layout>
    	<lightning:layoutItem size="6">
            <c:ComponentA/>
        </lightning:layoutItem>
        
        <lightning:layoutItem size="6">
            <c:ComponentB/>
        </lightning:layoutItem>
    </lightning:layout>
</aura:application>

So what we have done in this example?

In this, we have created two sibling components i.e. component-A and component-B.

Component-A fires an application event which is handled by component-B.

Below is the preview of myApp.app:

Thank you for visiting SalesforceBlue.com
If you have any queries feel free to write down a comment below 🙂