Sunday, February 25, 2018

Covered Aura:Method, Aura.Action, ParenttoChild, ChildtoParent and Sibling Communication.

Below code Covers Aura:Method, Aura.Action, ParenttoChild, ChildtoParent and Sibling Communication in one Single Application.



Step 1:

=========
componentEvents
=========
<aura:event type="COMPONENT" description="Event template" >
 
    <aura:attribute name="firstnumber" type="Integer" />
     <aura:attribute name="secondnumber" type="Integer" />
 
</aura:event>

Step 2:
==============
childcomp
===========
<aura:component>
  <aura:attribute name="childoutput" type="Integer" />

  <aura:attribute name="clickme" type="Aura.Action" />

  <aura:handler name="init" value="{!this}" action="{!c.doInit}" />
  <aura:registerEvent name="cmp1" type="c:componentEvents" />
 
 
   <lightning:card title="Child 1">
 
  <lightning:input type="integer" label="Number 1" aura:id="num1" />
  <lightning:input type="integer" label="Number 2" aura:id="num2" />

  <p
    ><lightning:button
      label="Component Event"
      onclick="{!c.fireComponentEvent}" variant="brand"
    />
  </p>

  <p
    ><lightning:button
      label="Parent Method calling with Aura.action"
      onclick="{!v.clickme}" variant="brand"
    />
  </p>
     
       </lightning:card>
</aura:component>

==============
childcomp controller
===========

({
child : function(component, event, helper) {
     
        var output=parseInt(event.getParam("firstnumber")) +parseInt(event.getParam("secondnumber"));
     
       component.set("v.childoutput",output);

},
 
    fireComponentEvent : function(component, event) {
        // Get the component event by using the
        // name value from aura:registerEvent
    var cmpEvnt=component.getEvent("cmp1");
    var num1=parseInt(component.find("num1").get("v.value"));
    var num2=parseInt(component.find("num2").get("v.value"));
     
    cmpEvnt.setParams({"firstnumber":num1,"secondnumber":num2});
        cmpEvnt.fire();
    },
    doInit :function(component, event, helper){
     
       // component.set("v.childoutput",10000);
    }

})

Step 3:

=========
childcomp2
========

<aura:component >
 
     <aura:attribute name="prntoutput" type="Integer" default="0"/>
    <aura:method name="Addition" action="{!c.Addition}" description="Sample method with parameters">
    <aura:attribute name="param1" type="Integer" />
    <aura:attribute name="param2" type="Integer" />
    </aura:method>
    <br/>
    <br/>
    <br/>
     <lightning:card title="Child 2">
    <p>Sibling out put</p>
    {!v.prntoutput}
    <br/>
    <br/>
    <br/>
    </lightning:card>
</aura:component>

================

({
Addition : function(component, event, helper) {
         var params = event.getParam('arguments');
        if (params) {
            var param1= params.param1;
            var param2= params.param2;
            var output=param1+param2;
        }
     
        component.set("v.prntoutput",output);

}
})

Step 4:

parentComp
==========
<aura:component >
    <aura:attribute name="prntoutput" type="Integer" />
  <aura:handler name="cmp1" event="c:componentEvents" action="{!c.parent}" />
 
    <lightning:card title="Parent output">
 
    {!v.prntoutput}
 
   </lightning:card>
     <br/>
    <br/>
    <br/>
 
     <c:childcomp />

     <c:childcomp2 aura:id="sibling"   />
 
 
 
   <!--   <c:childcomp clickme="{!c.Parentmethod}"  />  -->
 
   <!--   <c:childcomp cmp1="{!c.parent}"/> -->

 
</aura:component>


====
parentComp controller
=====

({
parent : function(component, event, helper) {
     
        var fnumber=parseInt(event.getParam("firstnumber"));
        var snumber=parseInt(event.getParam("secondnumber"));
        var output=fnumber+snumber;
     
       component.set("v.prntoutput",output);
     
        var childCmp = component.find("sibling");

      childCmp.Addition(fnumber,snumber);
     
     

},
    Parentmethod:function(component, event, helper) {
     
      alert("From Parent Method");
     
     

}
})

Step 5:
==================
Grantparent
==============

<aura:component implements="flexipage:availableForAllPageTypes" >
    <aura:attribute name="prntoutput" type="Integer" />
     <aura:attribute name="parentdata" type="Integer" default="100000" />
     <aura:handler name="cmp1" event="c:componentEvents" action="{!c.Grandparent}" />

    <lightning:card title="Grand Parent Output">
 
    {!v.prntoutput}
    <br/>
    <br/>
    <br/>
    <c:parentComp  prntoutput="{!v.parentdata}" />
     
    </lightning:card>
</aura:component>

==================
Grantparent controller
==============

({
Grandparent : function(component, event, helper) {
     
        var output=parseInt(event.getParam("firstnumber")) +parseInt(event.getParam("secondnumber"));
   
       component.set("v.prntoutput",output);
     
     

}
})

Step 6:
=========
Alleventsapp
=======

<aura:application extends="force:slds">
    <c:GrandparentComp />
</aura:application>


For another advance way of communication on top of these topics, please refer here: https://davesfdc.blogspot.com/2018/10/another-advanced-way-of-parent-to-child.html

Salesforce Lightning: Application Events (Sample Siri)

Application events follow a traditional publish-subscribe model. An application event is fired from an instance of a component. All components that provide a handler for the event are notified.


Step 1 : create Application event

/* Use type="APPLICATION" in the <aura:event> tag for an application event. For example, this c:appEvent application event has one attribute with a name of message. */

===============================
ApplicationCommunication  Event
================================


<aura:event type="APPLICATION" description="Discussion between multiple Components" >
 
    <aura:attribute name="mesg" type="string" />
 
 
</aura:event>


Step 2:  Create Source Component

/*A component registers that it may fire an application event by using <aura:registerEvent> in its markup. The name attribute is required but not used for application events. The name attribute is only relevant for component events. This example uses name="appEvent" but the value isn’t used anywhere.*/

Name: SourceCmp
==================

<aura:component implements="flexipage:availableForAllPageTypes">
 
    <aura:registerEvent name="anyname" type="c:ApplicationCommunication" />
    <aura:attribute name="Display" type="boolean" default="false" />
    <aura:attribute name="greeting" type="string" />
    <lightning:input type="string" label="Enter some data here"  aura:id="inputdata"/>
    <p><lightning:button label="Click here to fire an application event"
        onclick="{!c.fireApplicationEvent}" />
    </p>


</aura:component>

Step 3: copy paste below code in the SourceCmp  client side controller
======
SourceCmp controller side code
========
({
fireApplicationEvent : function(component, event, helper) {
     
        var message=component.find("inputdata").get("v.value");
     
        var appEvent=$A.get("e.c:ApplicationCommunication");
     
        appEvent.setParams({"mesg":message});
     
        appEvent.fire();
     
 

}
})


Step 4: Listener or Handler Markup code

/*Use <aura:handler> in the markup of the handler component.

For example:

<aura:handler event="c:appEvent" action="{!c.handleApplicationEvent}"/>*/

==========
Name: Listener (Handler)
===========
<aura:component implements="flexipage:availableForAllPageTypes" access="global" >
    
    <aura:attribute name="receivedevent" type="string"  />
    
    <aura:handler event="c:ApplicationCommunication" action="{!c.handleApplicationEvent}" />
    
     <p>{!v.receivedevent}</p>

    
</aura:component>


Step 5:


==================
Listener client side controller
==================
({
    handleApplicationEvent : function(cmp, event) {
      var Sourcedata= event.getParam("mesg");
        var response="Sorry I did not understand you";
        if(Sourcedata=='Hi')
        {
            response="Hello"
        } 
         if(Sourcedata=='How are you')
        {
            response="Im doing great!!"
        } 

         if(Sourcedata=='How is your course')
        {
            response="Going good"
        } 
         if(Sourcedata=='Do practice after this session')
        {
            response="Sure Thank you !!"
        } 
         if(Sourcedata=='Good Night')
        {
            response="Good night too, sweet dreams !!"
        } 
         if(Sourcedata=='Good Morning')
        {
            response="Good Morning too, have a great day !!"
        } 

            
        cmp.set("v.receivedevent",response);
    }

})


Step 6:  create Application with the below code

<aura:application >
    <c:SourceCmp />
    <c:Listener  />
</aura:application>


Step 7: Instead of above 6th step code I recommend to Surface SourceCmp and Listener  on different parts of the Application builder page. Though there is no connection between these components but still you can create communication  between these two components.