Skip to main content

How to Create Manual Round Robin ID in Salesforce

Pass variables from Parent to Child Component in Lightning Component Salesforce | Parent to Child integration.



Hello folks, in this article I will explain how you can send value from a Parent Component to Child Component. 

There could be multiple solutions for this, I will explain here how you can use "aura:attribute" & "Application event" to pass the data from Parent component to Child component.

Method 1 : Using aura:attribute
In below example I am passing the variable to the child component using the aura:attribute on the button's click of the Parent Component.

ParentComponent.cmp
 1
 2
 3
 4
 5
 6
 7
 8
 9
10
<aura:component implements="force:appHostable,flexipage:availableForAllPageTypes,flexipage:availableForRecordHome,force:hasRecordId,forceCommunity:availableForAllPageTypes,force:lightningQuickAction" access="global" >
    <aura:attribute name="parentValue" type="String" />
	<h1>Hello, I am Parent Component</h1>
    <div class="row">
        <lightning:button label="Send value to child" iconName="utility:comments" iconPosition="left"  variant="brand" onclick="{! c.sendValue }" />
    </div>
    <br/>
    <br/>
    <c:ChildComponent childValue="{!v.parentValue}" />
</aura:component>

ParentComponentController.js
1
2
3
4
5
({
	sendValue : function(component, event, helper) {
		component.set("v.parentValue","I am value from Parent");
	}
})

ChildComponent.cmp
1
2
3
4
5
<aura:component implements="force:appHostable,flexipage:availableForAllPageTypes,flexipage:availableForRecordHome,force:hasRecordId,forceCommunity:availableForAllPageTypes,force:lightningQuickAction" access="global" >
    <aura:attribute name="childValue" type="String" />
	<h1>Hello, I am Child Component. Here is the value from Parent : {!v.childValue}</h1>
    
</aura:component>



Method 2 : Using Application Event
In below example I am passing the variable to the child component using the Application Event on the button's click of the Parent Component.


ParentChildEvent.evt
1
2
3
<aura:event type="APPLICATION">
    <aura:attribute name="parentVar" type="String"/>
</aura:event>

ParentComponent.cmp
 1
 2
 3
 4
 5
 6
 7
 8
 9
10
<aura:component implements="force:appHostable,flexipage:availableForAllPageTypes,flexipage:availableForRecordHome,force:hasRecordId,forceCommunity:availableForAllPageTypes,force:lightningQuickAction" access="global" >
    <aura:registerEvent name="dataTransfer" type="c:ParentChildEvent"/>
    <h1>Hello, I am Parent Component</h1>
    <div class="row">
        <lightning:button label="Send value to child" iconName="utility:comments" iconPosition="left"  variant="brand" onclick="{! c.sendValue }" />
    </div>
    <br/>
    <br/>
    <c:ChildComponent />
</aura:component>

ParentComponentController.js
1
2
3
4
5
6
7
({
	sendValue : function(component, event, helper) {
        var appEvent = $A.get("e.c:ParentChildEvent");               
        appEvent.setParams({"parentVar":"Hello I am value from Parent"});                                               
        appEvent.fire(); 
    }
})

ChildComponent.cmp
1
2
3
4
5
6
<aura:component implements="force:appHostable,flexipage:availableForAllPageTypes,flexipage:availableForRecordHome,force:hasRecordId,forceCommunity:availableForAllPageTypes,force:lightningQuickAction" access="global" >
    <aura:handler action="{!c.getEvents}" event="c:ParentChildEvent" />
    <aura:attribute name="childValue" type="String" />
	<h1>Hello, I am Child Component. Here is the value from Parent : {!v.childValue}</h1>
    
</aura:component> 

ChildComponentController.js
1
2
3
4
5
6
({
	getEvents : function(component, event, helper) {
        var evtValue = event.getParam("parentVar");
        component.set("v.childValue",evtValue);
	}
})



If you have any question please leave a comment below.
If you would like to add something to this post please leave a comment below.
Share this blog with your friends if you find it helpful somehow !

Thanks
Keep Coding 😊


Comments

Popular posts from this blog

How to send WhatsApp from Lightning Component Salesforce ?

Send WhatsApp from Lightning Component SalesforceHi folks, in this article I will explain how you can send WhatsApp from Lightning Component using https://wa.me/
In this example I will create a Quick Action button on Contact which will be connected with my Lightning Component.
Please follow the steps below : 
Step 1 : Create a Lightning Component & Apex as shown below
WhatsApp.cmp
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30<aura:componentcontroller="Vlog_whatsappCTRL"implements="force:appHostable,flexipage:availableForAllPageTypes,flexipage:availableForRecordHome,force:hasRecordId,forceCommunity:availableForAllPageTypes,force:lightningQuickAction"access="global"><aura:attributename="recordId"type="String"/><aura:attributename="con"type="Contact"/><aura:attributename="msg"type="String"/><aura:handlername="init"action…

Send WhatsApp and Save Chat using Lightning Component Salesforce | Salesforce Tutorials

Hello folks,
In this article you will learn to send WhatsApp and Save the Chat using Lightning Component Salesforce. 
Prerequisite : 
Create a custom object WhatsApp__c
Create custom fields as shown below : 


Please follow the code below : 

WhatsAppComponent 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30<aura:componentcontroller="Vlog_whatsappCTRL"implements="force:appHostable,flexipage:availableForAllPageTypes,flexipage:availableForRecordHome,force:hasRecordId,forceCommunity:availableForAllPageTypes,force:lightningQuickAction"access="global"><aura:attributename="recordId"type="String"/><aura:attributename="con"type="Contact"/><aura:attributename="msg"type="String"/><aura:handlername="init"action="{!c.doInit}"value="{!this}"/><articleclass="slds-card"><divclass="slds-card__header…

Get Parent Id when overriding standard actions with a Lightning Component in salesforce1 app

How to Get Parent Id when overriding standard actions with a Lightning Component in salesforce1 app ?
In this blog I will explain how you can get Parent Id when overriding standard actions with a lightning component.
For example I have changed my Opportunity New button action with a custom Lightning Component. 
Let's create a new account and from the related tab try creating the new Opportunity. Have you noticed any change in URL ?
Let me share the URL with you :  _________________________________________________________________________ https://kapilbatra1-dev-ed.lightning.force.com/lightning/o/Opportunity/new?recordTypeId=0127F000000htlpQAA&additionalParams=accid%3D0017F00002S6g9H%26&inContextOfRef=1.eyJ0eXBlIjoic3RhbmRhcmRfX3JlY29yZFBhZ2UiLCJhdHRyaWJ1dGVzIjp7Im9iamVjdEFwaU5hbWUiOiJBY2NvdW50IiwicmVjb3JkSWQiOiIwMDE3RjAwMDAyUzZnOUhRQVIiLCJhY3Rpb25OYW1lIjoidmlldyJ9LCJzdGF0ZSI6e319&count=3 _________________________________________________________________________
In above URL you …