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 | <aura:event type="APPLICATION"> |
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 | var appEvent = $A.get("e.c:applicationEvent"); |
HANDLING APPLICATION EVENT:
Use
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.
To start with we need to first create the application event. Here is the code.
1 | <aura:event type="APPLICATION" description="Fired when a Button is pressed"> |
The component code –
1 | <aura:component implements="force:appHostable,flexipage:availableForAllPageTypes"> |
The controller code –
1 | ({ |
The style code –
1 | .THIS .slds-button--neutral{ |
COMPONENT 2 – ButtonCountPressed:
The component code –
1 | <aura:component implements="force:appHostable,flexipage:availableForAllPageTypes"> |
The controller code –
1 | ({ |
FINALLY THE APPLICATION – CountTheTotalClickApp
1 | <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.