 Hello everyone. In this module, I'm going to demonstrate how you can call JavaScript functions in other components. So in previous module, I demonstrated you like how we can implement init handler and how we can link a method that is implemented in JavaScript controller. So that init is called automatically whenever your component is loaded. But now we will be implementing JavaScript functions, those we will be calling on some event like if you hit a button. So on clicking on particular button that method will be called and executed. So I'm going to create new lightning component naming it as LC demo three. Clicking on submit. Now here I'm going to create one attribute. Naming it as message. It's type is string. So in previous module we already saw like how we can create attributes how we can implement expressions. So here I'm writing hello and then expression V dot message. Right. So line number two is showing like how to create attributes line number four is showing like how you can use attributes and an expression. Now, I'm creating a lightning button. Labeling it as click me. And on click of this. I need to call a method. Right. So here you can see the difference. We are writing seed or because that method will be defined in the components controller. So labeling it as handle click. So this way this components view code is complete. Now I'm clicking on this controller. So controller will be opened and here we need to implement the code in JavaScript. So I'm copying this and pasting it here. Sorry. So remember one thing like JavaScript is case sensitive so uppercase and lowercase you need to implement and properly. Now here I'm writing component dot set. So whenever you are defining any lightning component and if you're implementing its controller. So all the component related information will be available in this argument component. The events related information will be available in this event and in later modules I will tell you like what is the use of this helper. Now here we have this component dot set so component dot set basically sets a value to particular attribute. Here I need to use V dot message. So whatever attribute that is available in the components view like it is available here. So to use it in controller we always need to write it like this V dot message. And here we can write the message button click. So through this controller. The value of this message attribute will be set and when when this will happen. When you will be clicking on this button click me. So I'm saving this code. Now I'm going to open demo application where I will be putting this component so demo LC demo three. Clicking on preview. So here you will see one button is available right and if I click on this. It is showing some error. Let me check it. I need to use this exclamation sign here. I am refreshing it again. I clicked on click me so here you can see button click the message is available. So what you can do. You can put one horizontal rule here so that it will be available in separate line. So if I click here so you can see button click messages available here or simply instead of HR you can use VR tag as well. Right so it will simply shift it into new line so I'm using it twice. If I go here click on refresh so this time you won't see any horizontal rule. You will see this button and if you click on this button so button click message will be displayed. And always remember whenever you implement this so you need to use exclamation sign. Right now I'm going to create one more button so changing this attributes name as masses one. Copying and pasting it and creating one more attribute as masses two. Right now here I am putting horizontal rule. And copying and pasting it. So here I'm going to. So I need to copy this as well. So let's say here I'm writing button one. And here I'm writing button two. And message one. And message two. Here I am changing it as click me as well. And naming it as under handle click. Right. So this way. This is the part of button one. So if we click on button one so the message will be displayed through this. And here if we click on this button click me as well. And the value will be displayed in this message to now. We need to save it. We need to move to controller. And here. We need to define one more method so it is handle click. I'm copying this. So if you define one more method so you need to put comma here. Right. And here you can. Put the method name. So it should be masses one. It should be masses two. And here. I'm writing another button click. So now we have two methods handle click and another handle click. So like accordingly, whatever on whatever button you are clicking. So accordingly that function will be executed. And accordingly value of these attributes like masses one and masses two will be set. So I saved all the codes now moving to this tab and clicking on the refresh button. So here you can see both the buttons are available. If I click on click me so button click this displayed. If I click on click me as well. So it is showing another button click. Right. So this way. I created two separate buttons and for two buttons to handlers are available in the components controller. So this way I hope you understood how we can call JavaScript functions at the lightning component. Right. So in previous module we used in it to define initial values. So we can use it here as well. So let's say or a handler. Name equals to in it. Value equals to. This and action doing it. Name can be anything as per your choice. But we are defining in it handler. That's why we need to keep as it has doing it. Right. Now I'm moving here and copying this. And pasting and renaming it as doing it. Now what I'm going to do. I'm making copies of these masses one masses two. And here I'm writing but then initialize like button one initialized and button two initialized. Right. Now if I click here do a refresh so you will see initial messages on load of the component. So here you can see button one is initialized this plate and here button two initialized is displayed. Now if I hit on this click me so masses will be replaced because another function is executed. That is binded with this button. If I click on this so the function which is binded with this button that is executed. So this way you can have like default function which is executed on load of component and you can have functions those can be called on particular event like clicking off the button. Right. Now I'm going to write some more code here. So I'm commenting this and creating a variable here naming it as button and even dot get source. So I told you like if we perform any event so event related information will be available at this event. So we are fetching event dot get source. Then variable masses equals to button dot get. Then we dot label. So if you click on the click on any button so that buttons information will be available into this event. So we are fetching like which button is clicked through this get source function. The information will be available into this button and through this button dot get we are fetching the label and we are assigning it into message. Right. Now after this what we can do. We can write component dot component dot set then the dot message one comma message. So what will happen if I click on this button click me. So it will call this function handle click handle click function is getting the source of the button stored in this BTN through BTN dot get we are fetching the label of the button which is stored in this message and that msd variable we are assigning into message one. So instead of this button clicked the label of the button will be displayed while you will be clicking on the button. So I'm saving this code moving here refreshing it. So initially you will see button one is initialized. Now if I click on this click me so you will see click me will be displayed here. And if I click here so it will show that masses that static masses that we provided. Right. Now what we can do if you want to remove these two statements as well. So you can simply write. Even dot get source. Then dot get the dot label. So instead of creating or writing these two statements you can combine them all together and you can use them in place of MSD so it will work as is. So if I save it and go to this tab click on refresh. So if I click so you will see same outputs are displayed. Right. So this way I hope you understood how we can fast the label of the button which is clicked. And if you want to apply this here as well so you can simply copy it. So I'm commenting this. Pasting it here. And changing it to message to. Now if I refresh it. Click here so it is showing click me. It is showing click me as well. So now both the buttons are displaying whatever labels they have. So this way you can customize the code as well so you can put the message that you want if you want to put the or you want to fetch the label of the button so that is also possible. Now I'm going to combine these two methods altogether like if you click on this button so we will be calling handle click and if we want to click on this button so we will be calling this handle click right and I am. Removing these. And mentioning here button only right. So we have like this one expression which will display value of message one and we have two buttons click me and click me as well. Both will be calling this handle click. Right so now this method won't be executed anymore. It is available but it won't be like called or executed. So what I'm going to do here I'm going to. Uncomment these statements and applying if message double equals to click me. Right then component dot set V dot. Message one. Now here I'm going to put MSG. Then else component dot. Set V dot. Message to an MSG. Right so let's see what happens now. Okay so here masses one is available so we can't use masses to here I'm putting this value in masses one itself. Right so this time we have this button and two like button masses and two buttons. And I'm going to comment this as well. I don't want to show any in its message refreshing it again. So now if I click on this button so click me will be displayed if I click on this button so click me as well will be displayed. And here you can see I'm calling this method only handle click here. Here and here as well. Right so both the buttons are calling same method and whatever the label of button is that is being rendered on the UI. Right now if you want to put any custom message so that is also possible. So let's say button one clicked here. We want to show button to click if I refresh so it will show button one click it will show button to click. So this way if you want to implement several buttons and if you want to link those buttons with single method so that is also possible and you can like easily categorize or easily identify like which button is clicked. Right so this way I demonstrated you how to call JavaScript functions and lighting or a component. Thank you.