function readOnly(count){ }
Starting November 20, the site will be set to read-only. On December 4, 2023,
forum discussions will move to the Trailblazer Community.
+ Start a Discussion
DesaiDesai 

How to pass data from one lightning component to other

Hi, 
 we have a lighitng  component  using lighitnign:treegrid to display the data in hierarchy. In the components controller, we storing the details of the selected records.

Now we need to pass this set of records to another lightning component . How do we do it.

Regards,
Desai
Abinash Panigrahi 22Abinash Panigrahi 22
Hi Desai,

Best way to pass data between components could be using Lightning Events.

You can dig more into it, by reffering to this link: https://www.forcetalks.com/blog/how-to-pass-data-from-one-component-to-another-in-salesforce-lightning/

Mark it as best answer, if you find the information useful.

Thanks,
Abinash
Ramesh DRamesh D
@Desai
1. Using attribute in lightning components.
2. Using aura:method to pass data.
3. Using component type event.
4. Using application type event.

Follow below link http://sanjaykeynotes.blogspot.com/2018/09/communications-between-lightning.html

Thanks
Ramesh
Kanhaiya Yadav 4Kanhaiya Yadav 4
Hi Desai,
        For Component Communication, you can use Lighting Events,
        In case of your, Application Event is the best way,
       
E.g.
SampleApplicationEvent
<aura:event type="Application" description="Sample Application Event">
    <aura:attribute name="message" type="String" />
</aura:event>

<!--Component1.cmp-->
<aura:component>
    <aura:registerEvent name="SampleApplicationEvent" type="c:SampleApplicationEvent"/>
    <lightning:button label="Click to fire the event" variant="brand" onclick="{!c.component1Event}"/>
</aura:component>

({
    component1Event : 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();
    }
})

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

({
    component2Event : 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');        
    }
})

Lightning Application:
<aura:application extends="force:slds">
    <c:Component1/>
    <c:Component2/>
</aura:application>


Thanks,
Kanhaiya
DesaiDesai
Hi ,

Thanks all of you but still its not working.
Application Event:
<aura:event type="Application" description="Event template" >
    <aura:attribute name="sRowList" type="String" />
</aura:event>

//Component 1 is added on Account Page
Comp 1:
 <aura:registerEvent name="Result" type="c.Result" /> 
 <lightning:button label="Add to Work Order" onclick="{!c.createRecords}" />

Comp1 Controller:
 createRecords : function(component, event, helper)
    {
                var evt = $A.get("e.c:FikeResult");
                evt.setParams({ "sRowList": "Hello Again"    });
                evt.fire();
               //there is other logic here which calls the apex class and inserts some records on Asset and creates a Work Order
 }

//Component is placed on Workorder
Comp 2:
 <aura:attribute name="GetResult" type="string" /> 
<aura:handler event="c:Result" action="{!c.getValueFromApplicationEvent}" />
<div class="slds-m-around_xx-large">
        <p>The result is {!v.GetResult}</p>
    </div>

Comp2 controller :
 handleMyApplicationEvent : function (component, event, helper) {

       var value = event.getParam("sList");
       component.set("v.GetResult", value );  
        alert("Received application event with param = "+ value);

    }

Anything wrong here ?

Regards,
Desai
Maharajan CMaharajan C
Hi Desai,

Please check the below things:

In Comp1 :   type="c.Result  ==>  type="c:Result"

 <aura:registerEvent name="Result" type="c:Result" /> 

In Comp1 Controller:                 

var evt = $A.get("e.c:Result");

Comp2 Controller:

var value = event.getParam("sRowList");

I found the above mistakes in your code and refer the below link for more details: 

https://www.biswajeetsamal.com/blog/application-events-in-salesforce-lightning-framework/

Thanks 
Maharajan.C
DesaiDesai
Hi Maharajan,

Thanks . I made all the corrections and verified wiht above link but sill its not wokring.
  • I have two components, Comp 1 is on differnt page and comp 2 is on different page .
  • On clikc of a button on Comp1 , event is fired and some records are inserted and pages is refreshed. 
  • Next when i go to other page where comp 2 is present, i dont see any data.
Regards,
Desai