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 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 :-)


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..!!

Hope to meet you at Jaipur Developer Fest very soon.

Happy Trailblazing..!!

Now we'll be discussing these phases one by one:-

Bubble Phase

The flow of event in this phase is much similar to what we have done in the component event. In this phase, the component that fired the event can handle it. The event in bubble phase traverse from the source component to the application root. While the event is traversing towards the application root, any component in the containment hierarchy can handle this event. If any handler stops this event from propagating using event.stopPropagation(), then no more handlers will be called in this phase.

In this phase, the event handlers are invoked from the application root towards the source component that fired the event. Any registered handler in the component hierarchy can stop the event from propagating by using event.stopPropagation() after that no more handlers will be able to handle the event in this phase or the bubble phase. If you have gone through the previous tutorials, you shoule be aware that the capture phase handlers always run before the bubble phase.

In this phase, the event handlers are invoked from the root to the source component which fired the event. If the event's  propagation wasn't stopped in the previous phase, the root corresponds to the application root. Otherwise, the root corresponds to the component who stopped the event from propagating further using event.stopPropagation(). This phase will execute only when event.preventDefault() was not called previously in capture or bubble phases.

Happy Trailblazing..!!

For those who are outside and can't attend. My presentation and source code will be available in another blog post after the session for sure.

Hope to meet you at the event soon.
 

Till now we have learned about component events, bubble and capture phase in component events. Now before moving to the application events, there is one more important concept regarding events which we need to learn and that is Container Components.

What is Container Component ?

Container Components are the components that are not the direct owner/parent of any other component but contain another component between their tags wherever they are defined. For ex:- If I make two lightning components named:- one.cmp and two.cmp and instead of calling two.cmp inside one.cmp I do something like this:-

While learning about component events bubble and capture phase I have told about hierarchy or containment hierarchy. So, let's see what a container component is and how this hierarchy is implemented. I'll be using the previous code implemented till now so if you just joined or want access to the current implementation you can read my previous blogs in the series listed here. Or at least have a look at the bubble phase implementation here.

So, we have 2 components already implemented:- LightningEventsCompContainer and LightningEventsComp1. Now, I am going to add one more component i.e. LightningEventsCompWrapper. This component is basically a container component which will be wrapping our base component i.e. LightningEventsComp1 and will be a direct child of LightningEventsCompContainer. Let's jump on to the code now for a deeper understanding:-

LightningEventsCompContainer.cmp

LightningEventsCompWrapper.cmp

({
    // Function invoked when event is handled
    handleTotalIncomeComponentEvent : function(component, event, helper) {
        alert('Event handler at the wrapper component');
    }
})