Skip to main content

Lightning Events - Component Events

Hey Guys ,
In my previous post we have seen how to pass value from Parent to Child. Now lets see how you can pass value from Child to parent.
Lightning Event : There are 2 types events and they are 'COMPONENT' and 'APPLICATION' event.
1st we will see how COMPONENT event works and here we will reuse the same components which you created in previous blog.
Think like this. There is a child component(ChildComp1_PC1) which updates some value and you need that updated value in the parent component(ParentComp1).        
       You are gonna remember these steps, 
       Step 1: Create an event
       Step 2: Register that event in component (in our scenario we will register in child comp).
       Step 3: When the event is fired, have a logic to capture that event.
so first you will create an event and register that in a child component (cause it is the one who is going to fire in order to send some values to it's parent ) so registering the event in child will be next step. Later in child component's controller you will set the parameters (or i would say attributes) and fire the event. YOU ARE ABOUT TO FIRE AN EVENT !!! Bang !!!
       Now who will catch the event which you just fired ?? That will be our Parent Component. So how the magic happens ?
No secrets here!! We will set a watch dog in Parent component which will look for the event to be fired and do the action. Enough of reading huh ?? lets see that in action.

create a COMPONENT event: To do that you will do this. Developer Conole =>File =>New=>Lightning Event and name it as MyEventTest.
For content inside the event refer the screenshot.  The important descriptions are given in the comment section itself.
 Now register this event in the component which is firing. In our scenario, this will be fired from Child comp and as i mentioned we need to register the same.
If  you observe the code, <aura:registerEvent name="eventFromChild" type="c:MyEventTest"/>
attribute Name - This could be anything
Attribute Type - c:MyEventTest where c: is a Namespace and MyEventTest is a the name of the event i created in previous step.
Now lets get into action. create button and fire the event.  For the you need to create a controller.js and refer the content in the pic.
We fired the event. now who is going to catch ? Remember I said something about watch dog ??Lets see it in action.
So what action={!c.getValuesFromEvent} from the above screen shot is doing ? Our Watch dog has caught the event but what now ? how to process the values that are being set in the event container?? . That is what our controller.js method of parent component does. Refer the code from pic.
Final Moment has arrived. Let see how the App is defined and the how the result will look like.

And the result is self explanatory !! :)

For more info subscribe this blog and keep an eye on this blog. I will update some other usage of Component event and Application event. 


Labels:

Comments

Post a Comment

Popular posts from this blog

Salesforce - Invoke Apex from Visual Flows

This post will brief you about how one can invoke an Apex class from Visual Flows. Important Note: The method which you would like to invoke should be marked as  @InvocableMethod  and the variables which you would like use in and out of Flow, we need to mark them as  @InvocableVariable Best Practices : Make 2 wrapper classes. One for getting the values from Flow to Apex and other wrapper class is to get the values from Apex to Flow. The below sample code explains how you can get a detail in and out of the flow. Use Case : We ask user to enter the Account ID which they want to update and New Name which they want to update on the entered Account ID. Note: Since this is for the demo purpose, we are asking user to enter the Account ID (SFDC 15/18 digit ID ). In Ideal scenario we can invoke the Flow from custom button/links. (  Refer This ) Here we created a Small Visual Flow which has 2 screens ( 1. For asking details from user and other for Showing the success/fa
4 comments
Read more

Salesforce to Salesforce Integration using OAuth 2.0 and Named Credentials

Hello Everyone, After investing lot of time, I was able to Integrate with my own sandbox( you can say one Salesforce Instance to Other Salesforce instance ) I had a scenario where i had to call a rest method created and Exposed in my own sandbox. So I started digging on this as you guys are now. In order to perform OAuth with salesforce you need to perform 3 important steps. 1.        Create Connected App 2.        Create Auth. Provider 3.        Create Named Credentials Once you are authorized, you just need to write 5- 6 lines of code to invoke your REST method. So let’s gets started. As you know  Salesforce uses OAuth 2.0 now. So our job is to set up OAuth. Importantly, OAuth requires 4 important details and they are, Client ID, Secrete Key, User Name and Password. So how do we get them? Client ID and Secrete Key (AKA Client Secrete) can be obtained from Creating a Connected app. But what about User Name and Password?? User Name and Password can
5 comments
Read more

Lightning - Passing value from Parent Component to Child Component

Hey Guys, This post I will try to cover some of the basics of Lightning Event. So if you have reached this post, I am assuming you have got some basic knowledge of Lightning framework. So, In brief Lightning Framework (LF ) works based on component and event driven modal. So when I say component  based, you might have seen that most of the codes are broken in to component in lightning development. You will understand more when you start creating one. There are few scenarios I would like to explain. Scene 1: Parent Component has one child and i want to pass some value from Parent to it's Child. Scene 2:Vice Versa Now .  I want to pass some value from Child Comp to it's parent components. How will you do ? There are 2 ways For Scene 1 and they are Way 1. Passing the value as Attribute Way 2. Sending the values using Lightning Methods. Way 1 is pretty simple. You will create a Attribute inside component 2(Child Comp) and will pass the required va
Post a Comment
Read more