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 form 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 lightning event in this case which will allow UserInput.cmp to fire the event, that will caught by the event handlers of DisplayResult.cmp.

Lightning Event: First create a 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.

Data Transfer in Salesforce Lightning

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

Salesforce Lightning Data Transfer

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 of time.

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:

Transferring Data in Salesforce

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 set 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:-

Create Salesforce Lightning Application

0 Comments

Leave a Reply

CONTACT US

We're not around right now. But you can send us an email and we'll get back to you, asap.

Sending

About Us

Forcetalks is a Salesforce collaboration platform for coders & developers, geeks & nerds, consultants & business heads, admins & architects, managers & marketers and of course the business owners. A community where you can learn from, where you can contribute to. For you. For Salesforce. Read More...

Copyright 2018 Forcetalks. All Right Reserved.

Log in with your credentials

or    

Forgot your details?