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 Sho...
4 comments
Read more

Rest Integration Test using Postmaster - OAuth 2.0

Hi , So you have created a Rest class and exposed it. At this stage you know how you can test this using Workbench. Ex: If your class name is : getAccountDetails which is expecting 2 parameters. then in the workbench, you will go to rest Explorer and select Get/Post based on the requirement and paste the URL something similar to this. /services/apexrest/CKDomain/getAccountDetails?Param1=1100055515&Param2=13706195 And BAM!!!! Everything looks fine. But in real time scenarios, you might want to give this endpoint URL to some other system (Say SAP/Oracle) and you want to test from your end before informing them about the endpoint URL. So how can we achieve this. There are many ways to test this and I prefer using Postman app for this. Install  Postman  from here. Now , In order to successfully receive a Rest call out from Other system to Salesforce , there are multiple auth techniques. I would like to use the most commonly used auth technique - OAuth 2.0 As...
2 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 ...
5 comments
Read more