Communications between Lightning Components : Salesforce

Salesforce have new lightning framework to create components in lightning framework which is fast with high performance to pass data from one lightning component to another. For this salesforce provides various ways to communicate between lightning components.

Below are the list of ways you can communicate :-

1. Using attribute in lightning components.
2. Using aura:method to pass data.
3. Using component type event.
4. Using application type event.
5. Using System Events.

1. Using Attributes :-

we have a parent component in which we have a Boolean attribute which i want to pass to child component for further processing.

c:parentComponent.cmp
<aura:component>
<aura:attribute name=”showTable” default=”false” type=”boolean”/>
<lightning:button label=”show table” onclick=”{! c.showBoolean }” />
<c:childComponent tableDisplay=”{!v.showTable}”/>
</aura:component>


c:parentComponent.controller.js
({
showBoolean : function (component, event, helper) {
component.set(“v.showTable”, true);
}
})


c:childComponent.cmp

<aura:component>
<aura:attribute name=”showTable” type=”boolean” default=”false”/>
<aura:if isTrue=”{!v.showTable}”>
SHOW DATA TABLE HERE
</aura:if>
</aura:component>

we click on the lightning:button, it calls showBoolean method in parent component controller where we set the showTable attribute as true. In the code below lightning:button, we call child component and tag the tableDisplay attribute of child component with showTable on parent component. Now any changes in showTable attribute will be passed to showTable attibute of child component directly.

2. Using aura:method :-

We can call a child component method and pass the parameters to the child component using aura:method. For example we have a parent component from where we have to send data to a child component.

c:parentComponent.cmp
<aura:component>
<aura:attribute name=”showTable” default=”false” type=”boolean”/>
<lightning:button label=”show table” onclick=”{! c.showBoolean }” />
<c:childComponent aura:id=”childComponent”/>
</aura:component>


({
showBoolean : function (component, event, helper) {
var childComp = component.find(“childComponent”);
childComp.displayTable(component.get(“v.showTable”));
}
})


c:childComponent.cmp

<aura:component>
<aura:attribute name=”showTable” type=”boolean” default=”false”/>
<aura:method name=”displayTable” action=”{!c.showDataTable}”>
<aura:attribute name=”parameter1″ type=”boolean” default=”false”/>
<aura:method/>
<aura:if isTrue=”{!v.showTable}”>
SHOW DATA TABLE HERE
</aura:if>
</aura:component>

c:childComponent.controller.js
({
showDataTable : function(component, event, helper) {
var parameterList = event.getParam(“arguments”);
if(parameterList) {
component.set(“v.tableDisplay”, parameterList.parameter1);
}
}
})

we click on the lightning:button, it calls showBoolean method in parent component controller where we first find the childComponent using aura:id. Once we get the instance of childComponent we call aura:method function in childComponent whose name is displayTable with parameters in the function.

Lightning framework is based on event-driven architecture which allows to communicate between different events. Lightning events can be fired or handled by javascript controller. Event are triggered by user action.

As we know that along with system events, there are 2 types of custom lightning events:

Application Events
Component Events

3. Using component type event :-

Component events: to talk to a parent using the capture and bubbling mechanism, like with DOM events.Components events can be handled by same component or component which is present in containment hierarchy (component that instantiates or contain component).

Create New Event with String Param (MessageEvent)
<aura:event type="COMPONENT" description="Event template">                                         
<aura:attribute name="msg" type="String" access="GLOBAL"/>                                               
</aura:event>

You would then declare myEvent on the component as:
<aura:registerEvent name="message" type="c:MessageEvent"/>

Firing component events from javascript controller

var MessageEvent = component.getEvent("message"); 
MessageEvent.setParams({"msg":"New Message!!!."});                               
MessageEvent.fire(); 



While handling component events, we need to specify name attribute in  <aura:handler>

<aura:handler action="{!c.handleNotification}" event="c:MessageEvent" name="message">

Note : Make sure that name attribute is same as that of name attribute 
while registering the event.

Application events: This kind of events can be handled by any component which is listening to it (have handler defined for event). It is kind of publish-subscribe modal.

Creating application event. (MessageEvent)
<aura:event type="APPLICATION" description="Event template">                                                       
<aura:attribute name="msg" type="String" access="GLOBAL"/>                             
</aura:event> 

You would then declare myEvent on the component as:
<aura:registerEvent name="message" type="c:MessageEvent"/>
Firing component events from javascript controller

var appEvent = $A.get("e.c:MessageEvent");               
appEvent.setParams({"msg":"New Message!!!."});                                               
appEvent.fire(); 


While handling component events, we need to specify name attribute in  <aura:handler>

<aura:handler action="{!c.handleNotification}" event="c:MessageEvent" name="message">

3. Using System Events :-

System events: These events are fired automatically by the framework such as during component initialization, attribute value change, rendering etc. All Components can register for system events in their HTML markup.
Few examples of system events are init, aura:waiting, aura:doneWaiting, aura:doneRendering etc.

<aura:handler event="aura:waiting" action="{!c.waiting}"/>
<aura:handler event="aura:doneWaiting" action="{!c.doneWaiting}"/>
<aura:attribute name="HideSpinner" type="Boolean" default="true"/>
<aura:renderIf isTrue="{!v.HideSpinner}">
  <div class="slds-spinner_container">
    <div class="slds-spinner--brand slds-spinner slds-spinner--large" role="alert">
      <span class="slds-assistive-text">Loading, Please Wait...</span>
      <div class="slds-spinner__dot-a"></div>
      <div class="slds-spinner__dot-b"></div>
    </div>
  </div>
</aura:renderIf>

Component JS Code
waiting: function(component, event, helper) {
  component.set("v.HideSpinner", true);
 },
 doneWaiting: function(component, event, helper) {
  component.set("v.HideSpinner", false);
 }

Happy Sharing...

Everyone has their own favourites, so please feel free to share yours in the comments below!