What is Salesforce Event and how to use that with Salesforce Lightning Application ?

There are two types of events in the framework:

• Component events are handled by the component itself or a component that instantiates or contains the component.
• Application events are handled by all components that are listening to the event. These events are essentially a traditional publish-subscribe model.

Real Time Example of Salesfore Event : Let me give you an example where i used Salesforce Event. In one of my application (Bulk Update), I have created a data table with columns having Text Fields, date pickers and also a component which is a combination of Text Field and Checkbox. Now in this application when user enters the Text and selects the Checkbox that is there in the component, I have to trigger one method in my application (Bulk Update) to do some task. In this case I have to use Event that will be fired from component on change of Text and Checkbox value with the values and the unique record Id. And my application will listen to that Event and work accordingly.

How to use Salesforce Event :  Let’s create a Demo application to demonstrate how we can integrate Salesforce Event with our Lightning Application.

Lightning Application : Created a Lightning Application that holds one Lightning Component.

<aura:application extends="force:slds">
    <div style="text-align:center">
        <h1 style="font-weight: bold;font-size: 25px;">Lightning Event Demo Application</h1>
        <br/><br/>
    	<c:EventDemoLightningApp_RecieverComp ></c:EventDemoLightningApp_RecieverComp>
    </div>
</aura:application>

Added EventDemoLightningApp_RecieverComp component inside my Application which is responsible for doing my all tasks.

Lightning Component (EventDemoLightningApp_RecieverComp) : I created a Lightning Component which is basically handling the Event. Means when event is triggered this component will get to know about the Event. To make a component handle the Event we have to use  aura:handler

 <aura:handler name="cmpEvent" event="c:EventDemoLightningApp_Event" action="{!c.onEventTriggered}"/>

In aura:handler i have defined the event name c:EventDemoLightningApp_Event which i have created and on whose change this handler’s action should be called. In this handler i have given action method (javascript method) which should be called on Event receive. So my EventDemoLightningApp_RecieverComp looks like :

<aura:component >
    <aura:handler name="cmpEvent" event="c:EventDemoLightningApp_Event" action="{!c.onEventTriggered}"/>
    <h2 style="font-weight: bold;font-size: 20px;">Component 1</h2>
    <p id="eventMessage"></p>
    <br/><br/>
    <c:EventDemoLightningApp_SenderComp ></c:EventDemoLightningApp_SenderComp>
</aura:component>

And for handling the event we have used action as EventTriggered which is implemented in javascript controller :

({
	onEventTriggered : function(component, event, helper) {
        document.getElementById('eventMessage').innerHTML = 'Message Recieved from Component 2 : '+event.getParam('message');
	}
})

As you can see i am using getParam method event to read key value pair of data that will be sent with the Event. Now here we can have our logic to do some task or show alert with the data we are getting with the Event.

Lightning Component (EventDemoLightningApp_SenderComp) :   I created another Lightning Component which is basically triggering the Event. Means when this method will trigger the Event and send data with that. To register a component with Event we have to use  aura:registerEvent :

<aura:registerEvent name="cmpEvent" type="c:EventDemoLightningApp_Event"/>

In this I have metioned type as Event Name that we want to register. Now in this component when we want to trigger this event we have to call this registerEvent with name cmpEvent and have to fire. My component looks liks :

<aura:component >
	<aura:registerEvent name="cmpEvent" type="c:EventDemoLightningApp_Event"/>
    <aura:attribute type="String" name="inputMessage" default=""/>
    <h2 style="font-weight: bold;font-size: 20px;">Component 2</h2>
    <ui:inputText value="{!v.inputMessage}"></ui:inputText>
    <lightning:button variant="brand" label="Trigger Event" onclick="{! c.triggerEvent }" />
</aura:component>

Having one input text field and one button. On click of button I am calling the controller method which will read the text from the input field and send as a parameter with the Event and triggers the Event.  Code in my javascript controller is :

({
	triggerEvent : function(component, event, helper) {
		var cmpEvent = component.getEvent("cmpEvent");
        cmpEvent.setParams({
            "message" : component.get("v.inputMessage")
        });
        cmpEvent.fire();
        console.log('Event Fired');
	}
})

This function get the event that we have registered in this component then it  reads the value of input text and set as the message parameter of Event and finally it fires the component.

Event (EventDemoLightningApp_Event) :  This is the custom event that we have created. In this event I am using only one parameter which is “Message”. That why we are passing and retrieving “Message” key in our javascript code. But as per our requirement we can define and use as many event parameters : My Event looks like :

<aura:event type="COMPONENT" description="Event Demo" >
   <aura:attribute name="message" type="String"/>
</aura:event>

So to summarize this I will way that we are having a application which has a component “Component 1” and Component 1 has another component “Component 2”. Component 1 is having aura:handler with “Event 1” that why component 1 can listen to event change for Event 1. Now if we talk about Component 2 then Component 2 is having aura:registerEvent with “Event 1” so when we fire this aura:registerEvent from our javascript, it will trigger the Event 1 and calls the aura:handler method of component with Event 1.

Screenshots of Demo Application :

Application looks something like this. Component 2 inside Component 1 and Component 1 inside Application.

Now when user enters some value in the input text field and press Trigger Event button in Component 2, it triggers Event with Message as “Tarandeep Singh” and Component 2 will listen to this Event and prints the Message on the UI.