Salesforce Lightning Events

Share on facebook
Share on twitter
Share on linkedin
Salesforce Lightning is a component based framework for the application development.Component is the core part of the lightning framework.

Salesforce Lightning is a component based framework for the application development.Component is the core part of the lightning framework.  The communication between components are handled by events.  There are two types for events:

  1. Component Event
  2. Application Event

Component Events can only be handled by components and the communication will be simple between components.  Salesforce recommends using Component events instead of application events.  The component events can only be registered in child component and handled by parentcomponent.

To create a component event in salesforce, navigate File -> New -> Lightning Event in developerconsole. Name the event, enter the description and click submit to create lightning event.

The syntax for events starts with aura:event and the extension for the event is .evt.  The sample component are as follows,

<aura:event type="COMPONENT" description="Event template" > 

<aura:attribute name="message" type="String"/> 

</aura:event> 

The attribute type is the one that will differentiate Component event from Application event.

The events can be fired from controller.  The syntax to fire the event are as follows.

{ 

fireComponentEvent : function(component, event) { 

   // Get the component event by using the name value 

   var cmpEvent = component.getEvent("cmpEvent"); 

   cmpEvent.setParams({ 

       "message" : "A component event fired me. " + 

       "It all happened so fast. Now, I'm here!" }); 

   cmpEvent.fire(); 

} 

} 

The event will be fired when the cmpEvent.fire() is executed.  This controller method is called from the component button.

Life cycle of the component events:

  1. The life cycle of the event starts with firing the event.
  2. Identify the container component of the event source component.  The event source component will the component that is <aura:registerevent /> component.
  3. Locate all handlers within the container component for the identified component event.
  4. Execute all handlers, and execute the controller methods that are registered with the handlers.
  5. Re-render the necessary components.

Basic example for component events: 

<aura:event type="COMPONENT" description="Event template" >         

<aura:attribute name="message" type="String"/> 

</aura:event>

Child Component: 

The event is registered in this component.

<aura:component > 

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

   <ui:button label="fireComponent" press="{!c.fireComponentEvent}" /> 

</aura:component>

Controller: 

{ 

   fireComponentEvent : function(cmp, event,helper) { 

//Get the event using registerEvent name. 

   var cmpEvent = cmp.getEvent("cmpEvent"); 

   cmpEvent.setParams({"message" : "A component event fired me. "}); 

   cmpEvent.fire(); 

   } 

}

Parent Component: 

The event is wired in this component as a handler.

<aura:component > 

   <aura:attribute name="messageFromEvent" type="String"/> 

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

   <c:childComponent /> 

   <p>{!v.messageFromEvent}</p> 

</aura:component>

Controller: 

{ 

   handleComponentEvent : function(cmp, event) { 

   var message = event.getParam("message"); 

   // set the handler attributes based on event data 

   cmp.set("v.messageFromEvent", message); 

); 

   } 

} 

By using component event, the values can be passed from a child component to a parent component via event.  Lightning events play an important role in lightning framework.

Reference Link: https://developer.salesforce.com/docs/atlas.en-us.lightning.meta/lightning/events_intro.htm

About MST

At MST Solutions our cornerstone is to adapt, engage and create solutions which guarantee the success of our clients. The talent of our team and experiences in varied business verticals gives us an advantage over other competitors.

Recent Articles

Mobile Responsive Testing

Mobile Responsive Testing is simply a Testing Process performed to make sure that your website or an app is working appropriately on all types of devices.
Whether it an app or website, they need to ensure that they are accessible from any device, anytime, anywhere.

Read Article »

Work with us.

Our people aren’t just employees, they are key to the success of our business. We recognize the strengths of each individual and allow them time and resources to further develop those skills, crafting a culture of leaders who are passionate about where they are going within our organization.