Hey guys, today in this post we are going to learn component event (aura:event type=”COMPONENT”) where passing the attribute value from Child Component to Parent Component on Click button in aura lighting component Salesforce.
Real time scenarios:- Create a component event in Salesforce lightning, and pass the event attribute value from child component to parent component on click button uses of register event and event handler.
After Get/Set the event attribute value, a Modal Popup should be open on parent component.
How to Communicate with Events in Lightning Aura Components
In the Aura Components programming model, events are fired from JavaScript controller actions. Events can contain attributes that can be set before the event is fired and read when the event is handled.
Events are declared by the aura:event tag in a .evt resource, and they can have one of two types: component or application.
There are two type of event in lightning component in Salesforce
- Component Events:- A component event is fired from an instance of a component. A component event can be handled by the component that fired the event or by a component in the containment hierarchy that receives the event. To know more details about Component Events, Click Here.
- Application Events:- 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. To know more details about Application Events, Click Here
Files we used in this post example (Component type event):-
| parentComponentEventApp.app | Lightning Application | It is used for call the component to preview on browser. |
|
childComponentEvent.cmp |
Lightning Component | It is a child component and hold a click button. |
|
childComponentEventController.js |
JavaScript Controller File | It is used for click function to To get the component event attribute value and fire the event. |
| parentComponentEvent.cmp | Lightning Component | It is a parent component and call the event handler (aura:handler) actiion function in lightning component |
| parentComponentEventController.js | JavaScript Controller File | It is set the attribute value of event from child component to parent. |
| myComponentEvent.evt | Lightning Event | Creat a application event, It’s hold two attribute as string type value. |
Live Demo
Other related post that would you like to learn in Salesforce
- Find the below steps
Create a component type event. Use type=”COMPONENT” in the aura:event tag for an component event.
Step 1:- Create component type event : myComponentEvent.evt
From Developer Console >> File >> New >> Lightning Event
myComponentEvent.evt [Lightning Event]
|
1 2 3 4 |
<aura:event type="COMPONENT" description="Learn component event from w3web.net tutorial"> <aura:attribute name="cmpMsg" type="String" default="Welcome w3web.net" /> <aura:attribute name="popFadeEvnt" type="String" default="slds-hide" /> </aura:event> |
Create Lightning Component
Step 2:- Create Lightning Component : childComponentEvent.cmp
From Developer Console >> File >> New >> Lightning Component
childComponentEvent.cmp [Lightning Component File]
|
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 31 32 33 34 35 36 37 38 39 40 41 42 |
<aura:component > <aura:registerEvent name="myEvent" type="c:myComponentEvent" /> <lightning:button label="Example of Component Event Click Here.." variant="brand" onclick="{!c.childEvntAction}"/> <br/><br/> <!--Start RelatedTopics Section--> <div style="border:1px #ddd solid; padding:10px; background:#eee; margin:40px 0;"> <p data-aura-rendered-by="435:0"><img src="https://www.w3web.net/wp-content/uploads/2021/05/thumbsUpLike.png" width="25" height="25" style="vertical-align:top; margin-right:10px;" data-aura-rendered-by="436:0"><strong data-aura-rendered-by="437:0"><span style="font-size:16px; font-style:italic; display:inline-block; margin-right:5px;">Don't forget to check out:-</span><a href="https://www.w3web.net/" target="_blank" rel="noopener noreferrer" style="text-decoration:none;" data-aura-rendered-by="440:0">An easy way to learn step-by-step online free Salesforce tutorial, To know more Click <span style="color:#ff8000; font-size:18px;" data-aura-rendered-by="442:0">Here..</span></a></strong></p> <br/><br/> <p data-aura-rendered-by="435:0"><img src="https://www.w3web.net/wp-content/uploads/2021/07/tickMarkIcon.png" width="25" height="25" style="vertical-align:top; margin-right:10px;" data-aura-rendered-by="436:0"><strong data-aura-rendered-by="437:0"><span style="font-size:17px; font-style:italic; display:inline-block; margin-right:5px; color:rgb(255 128 0);">You May Also Like →</span> </strong></p> <div style="display:block; overflow:hidden;"> <div style="width: 50%; float:left; display:inline-block"> <ul style="list-style-type: square; font-size: 16px; margin: 0 0 0 54px; padding: 0;"> <li><a href="https://www.w3web.net/lwc-get-set-lightning-checkbox-value/" target="_blank" rel="noopener noreferrer">How to get selected checkbox value in lwc</a></li> <li><a href="https://www.w3web.net/display-account-related-contacts-in-lwc/" target="_blank" rel="noopener noreferrer">how to display account related contacts based on AccountId in lwc</a></li> <li><a href="https://www.w3web.net/create-lightning-datatable-row-actions-in-lwc/" target="_blank" rel="noopener noreferrer">how to create lightning datatable row actions in lwc</a></li> <li><a href="https://www.w3web.net/if-and-else-condition-in-lwc/" target="_blank" rel="noopener noreferrer">how to use if and else condition in lwc</a></li> <li><a href="https://www.w3web.net/get-selected-radio-button-value-and-checked-default-in-lwc/" target="_blank" rel="noopener noreferrer">how to display selected radio button value in lwc</a></li> </ul> </div> <div style="width: 50%; float:left; display:inline-block"> <ul style="list-style-type: square; font-size: 16px; margin: 0 0 0 54px; padding: 0;"> <li><a href="https://www.w3web.net/display-account-related-contacts-lwc/" target="_blank" rel="noopener noreferrer">display account related contacts based on account name in lwc</a></li> <li><a href="https://www.w3web.net/create-lightning-datatable-row-actions-in-lwc/" target="_blank" rel="noopener noreferrer">how to insert a record of account Using apex class in LWC</a></li> <li><a href="https://www.w3web.net/fetch-picklist-values-dynamic-in-lwc/" target="_blank" rel="noopener noreferrer">how to get picklist values dynamically in lwc</a></li> <li><a href="https://www.w3web.net/edit-save-and-remove-rows-dynamically-in-lightning-component/" target="_blank" rel="noopener noreferrer">how to edit/save row dynamically in lightning component</a></li> <li><a href="https://www.w3web.net/update-parent-object-from-child/" target="_blank" rel="noopener noreferrer">update parent field from child using apex trigger</a></li> </ul> </div> <div style="clear:both;"></div> <br/> <div class="youtubeIcon"> <a href="https://www.youtube.com/channel/UCW62gTen2zniILj9xE6LmOg" target="_blank" rel="noopener noreferrer"><img src="https://www.w3web.net/wp-content/uploads/2021/11/youtubeIcon.png" width="25" height="25" style="vertical-align:top; margin-right:10px;"/> <strong>TechW3web:-</strong> To know more, Use this <span style="color: #ff8000; font-weight: bold;">Link</span> </a> </div> </div> </div> <!--End RelatedTopics Section--> </aura:component> |
Create JavaScript Controller
Step 3:- Create Lightning Component : childComponentEventController.js
From Developer Console >> File >> New >> Lightning Component >> JavaScript Controller
childComponentEventController.js [JavaScript Controller]
|
1 2 3 4 5 6 7 8 9 10 |
({ childEvntAction : function(component, event,helper) { var myEvent = component.getEvent("myEvent"); myEvent.setParams({ "cmpMsg" : "Learn Step-by-step Salesforce Tutorial From -- ", "popFadeEvnt" : "slds-show" }); myEvent.fire(); } }) |
Create Lightning Component
Step 4:- Create Lightning Component : parentComponentEvent.cmp
From Developer Console >> File >> New >> Lightning Component
parentComponentEvent.cmp [Lightning Component]
|
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 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 |
<aura:component > <aura:handler name="myEvent" event="c:myComponentEvent" action="{!c.parentEventAction}"/> <aura:attribute name="w3webMsg" type="String"/> <aura:attribute name="modalFade" type="String" default="slds-hide"/> <div class="slds-m-around_medium"> <c:childComponentEvent /> <div class="{!v.modalFade}" aura:id="modalPopupId"> <section class="slds-modal slds-fade-in-open"> <div class="slds-modal__container"> <header class="slds-modal__header"> <button class="slds-button slds-button_icon slds-modal__close slds-button_icon-inverse" onclick="{!c.cancelPopup }" title="Close"> <lightning:icon iconName="utility:close" alternativeText="Approved" /> </button> <p style="color:#ff0000;">{!v.w3webMsg} <a href="https://www.w3web.net/" target="_blank" rel="noopener noreferrer"><strong>w3web.net</strong></a></p> <h2 class="slds-text-heading_medium slds-hyphenate">Component Event Popup</h2> </header> <div class="slds-modal__content slds-p-around_medium"> <div class="slds-form slds-form_stacked"> <div class="slds-form-element"> <lightning:input type="text" name="NameStr" label="Name" value=""/> </div> <div class="slds-form-element"> <lightning:input type="text" name="Address" label="Address" value=""/> </div> <div class="slds-form-element__control" > <lightning:input type="text" label="City" name="city" value=""/> </div> <div class="slds-form-element__control" > <lightning:input type="text" label="State" name="state" value=""/> </div> <div class="slds-form-element__control" > <lightning:input type="text" label="Pincode" name="pincode" value=""/> </div> </div> </div> <footer class="slds-modal__footer"> <div class="slds-grid slds-wrap"> <div class="slds-col slds-size_10-of-12 slds-text-align--left"> <p style="font-size:11px;">{!v.w3webMsg} <a href="https://www.w3web.net/" target="_blank" rel="noopener noreferrer"><strong>w3web.net</strong></a></p> </div> <div class="slds-col slds-size_2-of-12"><lightning:button class="slds-button slds-button_destructive" label="Cancel" title="Cancel" onclick="{! c.cancelPopup}"/></div> </div> </footer> </div> </section> <div class="slds-backdrop slds-backdrop_open"></div> </div> </div> </aura:component> |
Create JavaScript Controller
Step 5:- Create Lightning Component : parentComponentEventController.js
From Developer Console >> File >> New >> Lightning Component >> JavaScript Controller
parentComponentEventController.js [JavaScript Controller]
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 |
({ parentEventAction : function(component, event, helper) { var cmpMsg = event.getParam("cmpMsg"); var popFadeEvnt = event.getParam("popFadeEvnt"); //alert('cmpMsg ' + cmpMsg + 'popFadeEvnt ' + popFadeEvnt); component.set("v.w3webMsg", cmpMsg); component.set("v.modalFade", popFadeEvnt); }, cancelPopup:function(component, event, helper){ component.set("v.modalFade",'slds-hide'); } }) |
Create Lightning Application
Step 6:- Create Lightning Application : parentComponentEventApp.app
From Developer Console >> File >> New >> Lightning Application
parentComponentEventApp.app [Component Application File]
|
1 2 3 |
<aura:application extends="force:slds"> <c:parentComponentEvent/> </aura:application> |
Further post that would you like to learn in Salesforce
List your blog on Flyout and start making money for publishing sponsored content on your blog. Here’s the invite link. Get Started for Free
Check Out:- Earn Unlimited Everyday With This Trick:- Click Here
What is the use of component event in Salesforce?
A component event is an event that is fired by a lightning component. A component event can either be handled by the component itself or it can be handled by any other component which is present in the hierarchy that receives the event.
How many types of component event are there?
There are two types of events in the framework: Component events are handled by the component itself or a component that instantiates or contains the component. Application events are handled by all components that are listening to the event.
How do you create a component event?
Create a sample component type event. Use type=”COMPONENT” in the aura:event tag for an component event. The attribute type is the one that will differentiate Component event from Application event.
What is the difference between the component event and the application event?
Component events can only be handled by components above them in the containment hierarchy so their usage is more localized to the components that need to know about them. Application events are best used for something that should be handled at the application level, such as navigating to a specific record.
Related Topics | You May Also Like
How to pass data from parent component to child component Using Application event in salesforce | How to Use Application Event to pass attribute value from one lightning component to another in aura lightning component Salesforce
How to Fetch/Edit Custom Metadata Type Records Uses of lightning:datatable and onrowaction operation in Lightning Component Salesforce | how to custom metadata retrieve/edit through apex in aura lighting component Salesforce
How to validate child component from parent component on click button using aura method in lightning component | how to validate child component from parent component in lightning component Salesforce
How does work application and component event in Salesforce lightning component| A Simple Example of Application Event Handling Between two Custom Lightning Components in Salesforce
How to return data from multiple objects using wrapper class in lightning component | wrapper class instances in lightning component to return data from multiple objects and delete selected row on click delete button in Salesforce
How to create custom lookup on custom object in lightning component | how to create custom lookup dynamically as re-usable in Salesforce lightning component
Retrieve data of Cross-object(Lookup/Master-Detail) from child to parent for custom objects and navigate to record detail page in lightning component Salesforce | How to fetch data of Cross object using SOQL query in salesforce
How do you display an image from static resources in Aura component? | How to get static resource url in salesforce | import from @salesforce/resourceUrl to the component’s JavaScript file
- Your reaction of the article ▾
Author of w3web.net
Hi, This is Vijay Kumar behind the admin and founder of w3web.net. I am a senior software developer and working in MNC company from more than 8 years. I am great fan of technology, configuration, customization & development. Apart of this, I love to write about Blogging in spare time, Working on Mobile & Web application development, Salesforce lightning, Salesforce LWC and Salesforce Integration development in full time. [Read full bio] | | The Sitemap where you can find all published post on w3web.net
thanks this post is very helpful for me. again thank for such amazing information.
This post is really nice and providing the high quality information.Thanks for sharing this information with us.