How to Pass Data From One Component to Another in Salesforce Lightning?

We have to build a lot of components for building up a Salesforce Lightning Application.

Lightning events are the right way to pass the values from one component to another component.

Let’s take a scenario there are two components i.e UserInput and DisplayResult.’ UserInput’ component accepts two user input values and we need to add these values and display the result in the ‘DisplayResult.cmp’. How the UserInput.cmp will pass the calculated value to the DisplayResult.cmp? We have to use a Salsforce lightning event in this case which will allow UserInput.cmp to fire the event, that will be caught by the event handlers of DisplayResult.cmp.

Don't forget to check out: Salesforce Lightning Bolt: Create Gen-next Portals At Lightning Speed

Salesforce Lightning Event:

First create an event named “Result.evt”. Since UserInput component has a value to be passed to the DisplayResult component. So the event needs an attribute to store the value.

<aura:event type="APPLICATION">
    <aura:attribute name="Pass_Result" type="String"/>
</aura:event>

Component:

UserInput.cmp which would accept two input values from the user and sum it.

<aura:component implements="force:appHostable">
    <aura:registerEvent name="loadMyEvent" type="c:Result"/>
    <p>Hello From Component1</p>
    <br/>
    <ui:inputNumber aura:id="Input1" label="First Value" required="true"/>
    <ui:inputNumber aura:id="Input2" label="Second Value" required="true"/>
    <ui:button label="Sum" press="{!c.Add}"/>
    <br/>
</aura:component>

Look at the above component, UserInput has registered the event “Result” using the tag in the component. This is a declaration that the component states to notify that “UserInput” component will fire the “Result” event at some point in time.

Looking for Salesforce Lightning Services? Choose the Top Salesforce Consultant for your business from here.

Now create the client-side controller for UserInput.cmp

UserInputController.js:

({
    Add : function(component, event, helper) {
        var get_num1 = component.find(“Input1”).get(“v.value”);
        var get_num2 = component.find(“Input2”).get(“v.value”);
        var res = parseInt(num1) + parseInt(num2);
        var evt = $A.get(“e.c:Result”);
        evt.setParams({ “Pass_Result”: res});
        evt.fire();
    }
})

In the above client-side controller of UserInput, we get the user inputs and converted it to integer data type, adding the two values. Then the final result is passed to the “Result” event and fired.

Now, we need to define the DisplayResult, which will display the result.

DisplayResult.cmp:

<aura:component>
    <aura:attribute name="Get_Result" type="Integer" />
    <aura:handler event="c:result" action="{!c.getValueFromApplicationEvent}"/>
    The result is {!v.Get_Result}
</aura:component>

In DisplayResult tag used to register the application event which was created.

When the event is fired, the getValueFromApplicationEvent action in the client-side controller of the handler component is invoked.

Now create the controller for DisplayResult.cmp

DisplayResultController.js:

({
    getValueFromApplicationEvent : function(cmp, event) {
        var ShowResultValue = event.getParam(“Show_Result”);
        // set the handler attributes based on event data
        cmp.set(“v.Get_Result”, ShowResultValue);
    }
})

The controller retrieves data from the Event named “Result” and sets the retrieve data in the DisplayResult.cmp attribute name “Get_Result“.

Now create a Salesforce Lightning Application named “MyApp” to access these components in Salesforce:-

<aura:application>
    <c:UserInput/>
    <c:DisplayResult/>
</aura:application>