Salesforce Lightning Events Part 6 - Building Application Events

Welcome to the 6th tutorial of Lightning Events Tutorial Series. Now you know a little about application events and the 3 phases for the propagation of application events namely:- Bubble, Capture and Default phase. If you have joined right now and want to learn application events only then start from my previous blog post here.

So, let's begin development. We'll start by making an application event and I'll be using the previous code from my GitHub Repository here. In this tutorial I am not going to make anything scenario based like we did before (forming the income component)  whereas this time, I am going to simply pass a message using application event and display that.

So, let's begin by making a small change in our previous code but before that I am going to show how our application will finally look like:-

So, this is how our final application will look like, as you can see above I have divided the app in two sections, the upper section contains the component event that we've already done and the lower section consists of application event part that we are going to build right now.

Let's start by making changes in our application. If you just want to learn about the application events and starting from here I'll suggest you to comment the component event part in the below application code i.e. <c:LightningEventsCompContainer /> just enclose it in <!-- --> so that it doesn't cause any errors.

LightningEventsApp

As you can see above, the whole application is divided into two parts. The above part is the component event part and the below part is the application event part. In the application event part, I have called LightningEventsAppContainer component twice and have passed different values (1 and 2) in the id attribute of this component. Now let's move on to LightningEventsAppContainer component and check what's written there.

LightningEventsAppContainer

Above is the code for LightningEventsAppContainer component. As you can see above, I have made two attributes, first is id whose value we're getting from the LightningEventsApp and second is message which we'll display when we'll get the message from the application event. The default value of message is set as none. I have also registered a handler for the event which is referring to LightningApplicationEvent event and also calling the controller function handleApplicationEvent which is responsible for performing the action on capturing application event. I have displayed both the attributes in a div with class outerComponent below in this. After the id and message is displayed, LightningAppComp1 component is called in which I am passing the value of id attribute. Now, let's take a look at the CSS too.

As you can see, I have given the outerComponent class which was applied to the div displaying id, message and containing LightningAppComp1 component too, a black border so that both the instances of LightningEventsAppContainer having id 1 and 2 can be viewed separately from each other. Now, moving on to the controller, let's have a look at the code below:-

As you can see above, we have handleApplicationEvent method which is responsible for handling the application event. In this method, we are getting the value of id from the attribute so that we can show an alert that which instance's handler is called and finally I am setting the message attribute with the value received by application event. In the definition of application event, I have an attribute named message that's why I am using event.getParam("message") here to get the value from my application event.

Now, before moving on to LightningAppComp1, let's have a look at LightningApplicationEvent first.

LightningApplicationEvent

As you can see in the code above, I have used the aura:event tag to define an application event and specified the event type as APPLICATION and I have specified an attribute of type string and having a name - message which I was using in the LightningEventsAppContainer component above. Now, my outer component, application event and app is ready, so it's time to code our source component.

LightningAppComp1

Let's have a look at the below code:-

As you can see, this code is also similar to what we have done in the outer component, we have an attribute named id which is getting the value of id from parent component. As this same inner component is called from two different instances/calls of outer component in app with id 1 and 2. So, this component is getting different id's from both the different instances as each instance have it's own copy of inner component.
Then it consists of registerEvent tag which is referring to LightningApplicationEvent in type and has a name of myAppEvent. Following that, it has an event handler defined, that consists of a reference to LightningApplicationEvent in the event attribute and a controller function handleApplicationEvent is specified in action attribute i.e. this function will be called automatically as there is a need to handle the application event. There is a div having a class of innerComponent that consists of a button having a text Fire Event which will call controller function fireApplicationEvent on click of this button and the application event will fire.

My component is ready now it's time to look at some CSS.

As you can see above, the class of div i.e. innerComponent has a border of red. So, that the inner component can be separated from the outer component. Now, we're going to look at the controller.

As you can see above, in the controller of source component, I have two methods, one is handleApplicationEvent in which we're getting the value of id attribute and displaying it in an alert message so that we know, this handler is from innerComponent which is responsible for firing the event along with the id passed from the outer component instance.
Apart from this, there is fireApplicationEvent method which is called on button click having text Fire Event. To fire the application event, we are getting the reference to it using $A.get("e.c:LightningApplicationEvent"); as we know that the Application Event is global so, here we're getting a reference to event using $A which is itself a global instance name and storing it in a variable named appEvent as we already know that the application event has a single attribute message, So, I am setting that attribute with a value Hello and finally I am firing that event using appEvent.fire(); (Try removing the register event tag and see if the event works - Let me know your result in comments below)

One thing to notice is that right now I have set both the event handlers in inner and outer component to bubble phase as we're going to learn about this phase first. There are two more phases in application events namely:- Application and Default phase. Now, I want you to try this by yourself, fire the application event by clicking the button and see how it behaves, then change the handler phase to application and default and observe the changes.

Tired of reading or just scrolled down..?? Don't worry, you can watch the video too :-)

For the full code used in this tutorial, kindly refer to the applicationeventbubblephase branch of my GitHub repository here

That's all for this post. In the next post, We'll be exploring each phase of Application Event using this demo code and see how the event work in each phase. Till then stay tuned and keep supporting SFDC Stop.

Happy Trailblazing..!!