Code By Code – Lightning Framework – Chapter 13 – Component Event

Code By Code – Lightning Framework – Chapter 13 – Component Event

Chapter 13

Topics for this chapter:

  • Custom Aura Event Types
  • Component Events
  • Uses Of Component Events
  • Raising Component Events
  • Handling Component Event

Custom Aura Event Types

Events are a mechanism to communicate between component. The lightning framework supports 2 types of custom events which are designed to handle communication between components.

– Application Events

           Application events use pub-sub (publish-subscribe) methodology to handle communication between different aura components. Components may fire these events and other active components on the same page having event handlers, can handle these events. These events allow communication between any different components without any constraints.

– Component Events

           A component event is fired from an instance of a component. It can be handled by the component itself or all the parent component in the component hierarchy.
Basic steps for creating, raising and handling component event includes:

  • Defining custom component event
  • Register the event using <aura:registerEvent> in your component
  • Raising the event using event.fire() in your controller
  • Define handlers for your event using <aura:handler>
  • Define action in those handlers to handle the event and do post-processing

Creating Component Event - SearchFormSubmitEvent

Creating an aura or lightning event is very easy. Open developer console and navigate to File -> New -> Lightning Event.
Name your event “SearchFormSubmitEvent” and click ok. Paste below code in event file.

<aura:event type=”COMPONENT” description=”Event template”>
<aura:attribute type=”String” name=”carTypeId”/>
</aura:event>

Registering, Raising and Handling Component Events

Before you can fire a component event from any component, first you need to register the event in the component.

<aura:registerEvent name="searchFormSubmit" type="c:SearchFormSubmitEvent" />

After registering the event, you can raise it from JavaScript controller or helper file. Below code is from CarSearchForm component controller file.

onFormSubmit : function(component, event, helper) {
var searchFormSubmit = component.getEvent(“searchFormSubmit”);
searchFormSubmit.setParams({
//get selected carTypeId from picklist
//and pass in event attribute
“carTypeId” : component.find(“carType”).get(“v.value”);
});
searchFormSubmit.fire();
},

Once the event is raised or fired, you can handle this event in same component or in parent components using an aura:handler. aura:handler has 2 attributes, name which can be any meaningful name, event should be the exact name of event along precedding with namespace. Below code is from CarSearch component which is a parent component of CarSearchForm component.

<aura:handler name="searchFormSubmit" event="c:SearchFormSubmitEvent" action="{!c.doFormSubmit}" />

Below is the code from “doFormSubmit” method from CarSearch component.

doFormSubmit : function(component, event, helper) {
//fetching carTypeId attribute value from event
var carTypeId = event.getParam(‘carTypeId’);    var carSearchResultComp = component.find(“carSearchResult”);// call the aura:method in the child component
var carSearchCmpResult = carSearchResultComp.searchCars(carTypeId);
},

To get parameter value from an event, use getParam method.

Lightning Component Development Day6 - Firing and Handling Component Events, Commenting Code

Test your knowledge

Component Event

Next In This Guide

Manish Choudhari

I am a certified Salesforce Application & System Architect and Developer working on Salesforce Technology since 2014. Currently, I have 14 Salesforce certifications along with OCPJP (Oracle Certified Profession JavaSE6 Programmer) working in Salesforce.com Hyderabad as a Technical Engineer. Writing technical blogs, learning new technologies and frameworks and sharing knowledge is my hobby.

This Post Has 3 Comments

  1. Avatar

    Hi Manish,

    First of all thanks a lot for sharing detailed tutorial videos and codes for Lightning Framework. These are really helpful and very well explained.
    I am trying to complete the lab exercises for Day 6 and stuck at the CarTile component where static resources are used to save images of Cars. I am not able to display the image from the resource(I named the static resource as Cars) where I have saved the file.

    Here is my CarTile component code.

    {!v.car.Contact__r.Name}

    It would be really helpful if you can guide.
    Thanks!

  2. Avatar

    Can we handle event on multiple places?

    My scenario is – I have a conman component( say cmp 1) which I am using multiple places and this component have 1 button, now if I use it on component 2 then handle the event and fire the account update, if it use in component 3 the handle the same event and fire it to update contact.

Leave a Reply

Close Menu