Communications between Lightning Components : Salesforce

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!

Comments

  1. In Passing value through attribute in child component example.
    while calling child component from parent component the attribute name should be 'showTable' and not 'tableDisplay' since 'showTable' is the attribute defined in the child component.

    ReplyDelete
    Replies
    1. That's this tested code ... did yo tried same code into your Org.

      Delete
  2. I must appreciate you for providing such a valuable content for us. This is one amazing piece of article. Helped a lot in increasing my knowledge.salesforce admin training in bangalore

    ReplyDelete
  3. Hi, the first way of passing data between components 'Using Attributes' is not working. I completely copy pasted the markup as given above, but still I am not getting the results in my components.

    ReplyDelete
  4. Charm Windows offers a large group of answers for upvc windows manufacturers gurugram which incorporate - Commotion dropping windows, Robber safe windows, sun based control windows, Security glass windows and modified benefit windows. Anything that the plan you have at the top of the priority list, anything that your practical need, Joy Windows has a superior exhibition answer for you.

    ReplyDelete

Post a Comment

Popular posts from this blog

Salesforce LWC : Compact Layout on Hover

Salesforce LWC With Third Party JS : D3