Aura Events

Summary

This post will cover topics below:

  • Introduction.
  • Example of Application Event.
  • Example of Component Event.

Introduction

Aura events are a file that contains the attributes.

The attributes are defined outside the component. Generally, there are 2 or more components related to each event.

There are 2 types of Aura events. The events are the Application event and Component event. 

Application event

External attributes can be accessed by separated components.

Component event

External attributes can be accessed by related components.

Headings

Application Event

Example – define Application event

appEventExample.evt


<aura:event type="APPLICATION" description="Example App">
    <aura:attribute name="message" type="String" />
</aura:event>

componentExample1.cmp


<aura:component>
    <aura:registerEvent name="appEventExample" type="c:appEventExample" />
    <lightning:button label="submit" onclick="{!c.submitButton}" />
</aura:component>

componentExample1 – controller.js


submitButton: function(cmp, event, helper) {
    var appEvent = $A.get("e.c:appEventExample");
    appEvent.setParams({
        message: "Hello World"
    });
    appEvent.fire();
}

componentExample2.cmp


<aura:component>
    <aura:attribute name="eventStringRes" type="String" />
    <aura:handler event="c:appEventExample" action="{!c.handleEvent}" />
    
    
{!v.eventStringRes} //display to screen
 
</aura:component>

componentExample2 – controller.js


handleEvent: function(component, event, helper) {
    var res = event.getParam("message"); //get value from attr in the event
    component.set("v.eventStringRes", res); //assign to local attr
}

MaskFieldsEvent.evt


<aura:event type="APPLICATION" description="Advance Example">
    <aura:attribute name="convertMaskFields" type="Map" />
</aura:event>

Component1.cmp


<aura:component>
    <aura:registerEvent name="MaskFieldsEvent" type="c:MaskFieldsEvent" />
</aura:component>

Component1Controller.js


retrieveResponse: function(component, event, helper) {
    var convertMaskFieldsVal = $A.get("e.c:MaskFieldsEvent"); //assign app event to variable
    var maskFieldsObj = {}; //empty object to hold user's input
    maskFieldsObj.emailAddress = org.emailAddress; //assign val 
    convertMaskFieldsVal.setParams({"convertMaskFields":maskFieldsObj});
    convertMaskFieldsVal.fire(); 
}

Component2.cmp


<aura:component>
    <aura:handler event="c:MaskFieldsEvent" action="{!c.nextSection}" />
</aura:component>

Component2Controller.js


nextSection: function(component, event, helper) {
    helper.checkFormSection(component, event, helper);
}

Component2Helper.js


checkFormSection: function(component, event, helper) {
    var maskFieldsVal = event.getParam("convertMaskFields"); //get event and assign to var
    var parentVal = component.get('v.parentCompany');
    parentVal.emailAddress = maskFieldsVal.emailAddress;
    component.set('v.parentCompany', parentVal);
}

Component Event

This event passing attribute’s value between related components mostly child-to-parent component.

Example – define Component event.

componentEventExample.evt


<aura:event type="COMPONENT" description="Example Component">
    <aura:attribute name="message" type="String" />
</aura:event>

componentExample1.cmp


<aura:component>
    <aura:registerEvent name="compEventExample" type="c:componentEventExample" />
    <lightning:button label="submit" onclick="{!c.submitButton}" />
</aura:component>

componentExample1 – controller.js


submitButton: function(cmp, event, helper) {
    var compEvent = component.getEvent("compEventExample");
    appEvent.setParams({
        'message': "Hello World"
    });
    compEvent.fire();
}

componentExample2.cmp


<aura:component>
    <aura:attribute name="eventStringRes" type="String" />
    <aura:handler name="compEventExample" event="c:componentEventExample" action={!c.handleEvent} />
    
    //add component1 as a child component
    <c:componentExample1 />
    
{!v.eventStringRes} //display to screen
 
</aura:component>

componentExample2 – controller.js


handleEvent: function(component, event, helper) {
    var res = event.getParam("message"); //get value from attr in the event
    component.set("v.eventStringRes", res); //assign to local attr
}

Leave a Reply