Tag Archives: Lightning Framework

Application Events in Salesforce Lightning Framework

Lightning framework is based on event-driven architecture which allows to communicate between different events. Lightning events are fired from JavaScript controller actions that are triggered by a user interacting with the user interface.

The communication between components are handled by events. There are two types of custom events in the Lightning Framework:

  • Component Events
  • Application Events

Application Events are handled by any component have handler defined for event.These events are essentially a traditional publish-subscribe model.

Application Event Example:
In below example by using Application event, I’m passing the values from a child component to a parent component via event.

Sample Application Event:
Create a sample application type event. Use type=”APPLICATION” in the aura:event tag for an application event. The attribute type is the one that will differentiate Application event from Component event.

<!--SampleApplicationEvent.evt-->
<aura:event type="Application" description="Sample Application Event">
    <aura:attribute name="message" type="String" />
</aura:event>

Child Component:

<!--Child.cmp-->
<aura:component>
    <lightning:button label="Click to fire the event" variant="brand" onclick="{!c.childComponentEvent}"/>
</aura:component>

Child Component JS Controller:
Use $A.get(“e.myNamespace:myAppEvent”) in JavaScript to get an instance of the myAppEvent event in the myNamespace namespace.
To set the attribute values of event, call event.setParam() or event.setParams().

({
    childComponentEvent : function(cmp, event,helper) { 
        //Get the event using event name. 
        var appEvent = $A.get("e.c:SampleApplicationEvent"); 
        //Set event attribute value
        appEvent.setParams({"message" : "Welcome "}); 
        appEvent.fire(); 
    }
})

Parent Component:
The application event handled by the Parent Component that fired using aura:handler in the markup.
The action attribute of aura:handler sets the client-side controller action to handle the event.

<!--Parent.cmp-->
<aura:component>
    <aura:attribute name="eventMessage" type="String"/> 
    <aura:handler event="c:SampleApplicationEvent" action="{!c.parentComponentEvent}"/>
    <div class="slds-m-around_xx-large">
        <c:Child /> 
        <p>{!v.eventMessage}</p> 
    </div>
</aura:component>

Parent Component JS Controller:

({
    parentComponentEvent : function(cmp, event) { 
        //Get the event message attribute
        var message = event.getParam("message"); 
        //Set the handler attributes based on event data 
        cmp.set("v.eventMessage", message + 'Biswajeet');         
    }
})

Output:

System Events in Lightning Framework

System events are fired automatically by the Lightning framework such as during component initialization, attribute value change, rendering etc. All Components can register for system events in their HTML markup.

We can handle these events in the Lightning apps or components, and within the Salesforce mobile app. Here are few examples of system events.

Event Name Description
aura:doneRendering Indicates that the initial rendering of the root application has completed.
aura:doneWaiting Indicates that the app is done waiting for a response to a server request.
aura:locationChange Indicates that the hash part of the URL has
changed.
aura:noAccess Indicates that a requested resource is not accessible due to
security constraints on that resource.
aura:systemError Indicates that an error has occurred.
aura:valueChange Indicates that an attribute value has
changed.
aura:valueDestroy Indicates that a component has been
destroyed.
aura:valueInit Indicates that an app or component has been
initialized.
aura:valueRender Indicates that an app or component has been rendered or
rerendered.
aura:waiting Indicates that the app is waiting for a response to a server request.