 Hello everyone. I am Sanjay Gupta. I welcome you on Sanjay Gupta Tech School. So today we have day 76 of Salesforce Learning Bootcamp and we are learning Lightning Aura component development this week, right? So yesterday I just explained you the basics of Lightning component as well as Lightning Aura component. So today also we'll be discussing a few more things related to Lightning Aura component. Okay, so let's wait for a couple of more minutes so that more folks can join so that if you will be having any questions related to Aura component, so you can ask me live and I will be answering those questions. Okay, so till the time more folks are joining so let's quickly complete the beginner slide. So if you are watching videos for the first time on Sanjay Gupta Tech School YouTube channel and you want to know about me so this slide will help you to know what I have done, what I'm doing and my career related to Salesforce and this I say in every session like be consistent, do regular practice. So nowadays like every things I am explaining and demoing in the sessions, right? So just go through the session and whatever I am explaining in the session so just practice that so that you can understand the concepts well, right? So consistency is the key and do regular practice and for that purpose in the session tracker, you can just find exercise sheet link so it is above it is available on the top. So if you click on the sheet link so you will be having this exercise sheet and here everything is available, right? So all the bootcamp related sessions, their links, their exercises, self-practice questions, everything is available here, right? So soon I will be putting some questions related to Aura and LWC as well so that you can practice, okay? And join this telegram group where lots of folks are available and they are discussing their doubts on daily basis. So if you want to become part of this community, you can join and we are in week 22 of this bootcamp and this week I will be completing some topics related to Aura so I won't be covering all the topics because we are not using Aura in the project development frequently in the companies. So just to give you the basic insight like what Aura component is, how we can implement so that's why we are doing these sessions and from next week onwards we'll be focusing dedicatedly on lightning web components, okay? So just follow Sanjay Gupta Tech School on YouTube, LinkedIn, Instagram, Telegram and if you want to follow these social media platforms so important links are available in the video description. As in my all live sessions I tell you like there will be lots of upcoming bootcamps available. So from next month onwards like I am planning to have a few more bootcamp so from next week onwards I will be sharing some insights about that. So one of my friend who is having good knowledge on Appian. So Appian is basically a local development tool so he will be delivering sessions on that as well. So different technologies I will be covering now so that you can learn different things and decide like wherever there is any opportunity for job. So accordingly you can choose the particular stream, okay? So with this note let's jump on to the topic now. So today we need to understand few more concepts related to lightning Aura component and in that sequence first we will be understanding how we can create attributes and expressions and Aura, right? So I will be explaining that in brief because variable whenever we learn anything related to coding so we create variables so that we can store some values but in case of lightning Aura components if you want to create a variable so for that basically you need to create an attribute, right? So in my C programming bootcamp I just explained the concept of constant variable and expressions like how we use them and different operators, right? So those things that we learn in C programming or C++ or Java or Apex so those things are available in lightning components as well and here variables are equivalent to attributes and whatever attributes you use if you want to display their values on the front end or UI so that you can do with the help of expressions, right? Okay so moving forward now I am jumping to the org and here I am going to modify these components so yesterday I created this component and here in this component I will be doing some modification so Lingraju is asking your voice is low even for recorded so you are talking about live recorded sessions or recorded sessions that I uploaded till last year so just clarify so that accordingly I can so if something is not working with live so I can just do something with the mic and if it is happening for the recorded video so that I cannot help okay so moving forward now I am going to implement attributes and expressions for you so that you can understand how basically it works so if you are using Aura component and you want to create a variable so basically you need to use AuraColon attribute then you need to define a name for that variable so let's say I am writing name as var1 so this variable name can be anything you can put any name to this attribute then you need to define the type so here I am putting string because I want to store string into this attribute if you want to store different value like you can store integer you can store boolean value you can store date you can store id so different different types are available even you can use s objects data type as well and if you want to store default value so here let's say I am putting test value so this way if you want to create a variable in lightning Aura component so this is the statement right so here variables basically are known as attributes when we will be learning lightning web components so they are these attributes will be known as property right so in different platform in different tool or you can say in different framework some terminologies basically change their names but the meaning overall meaning is same so now here I am using a heading and now I am going to define an expression so this way you need to write an expression in Aura so here you can see we are using curly braces then exclamation V dot var1 so var1 is the attribute name then V stands for view right so in each lightning Aura component if you use any attribute so you need to write it like this V dot then attribute name and before that you need to use exclamation sign and then you can enclose it in curly braces so I am just saving this code and moving to demo app so here you can see first lightning component is already used so I am just going to preview okay it is not showing here components attribute value let me just check what is the issue okay so I did a mistake here you can see variable name is var1 so V is small here I used capital V so I just need to change it to small V I just saved it and now I am going to refresh and here you can see now it is showing the value right so this you also need to remember in Aura like whatever code you are implementing it is basically case sensitive right so this you need to remember whenever you are implementing code in lightning Aura component so everything is case sensitive if you write something in upper case so you need to use it in upper case if it is in lower case you need to use it in lower case right so this way if you want to use any attribute so this is the way that you can implement in lightning Aura right and whatever you implement here that will be available on the UI only and other files are supporting file so today I am going to show you controller as well so we will be using controller right so I will show you like if we create a button and if we click on a button so how on click of that button you can just execute a certain function that is defined with the help of controller right so here what I am going to do I am going to implement the code in this second LC component and yes yes Janna this Aura is case sensitive so whatever code you write here in this component file or in this controller helper so controller helper will be having javascript so that is also case sensitive so here when we talk about case sensitive so this attribute thing is case sensitive rest of the thing like these elements these are case insensitive as well okay so moving forward now I am going to create one more component for you and in this component what we'll be doing we'll be creating a button as well so when I will be clicking on the button so some action will be performed and accordingly result will be displayed so I am creating an attribute or attribute name equals to message then type equals to string then here I am writing hello then exclamation V dot message right so I hope now you are able to understand this statement so here attribute name is message type is string and this is an expression through this we are just going to show the value of this message attribute on the ur now I told you like in lightning or a component other than HTML we will be using Salesforce specific elements so here we have this lightning colon button and here I am using label then click me so this is the button label so on button this click me will be shown on the UI and then I am using an event that is on click and here I am writing colon c dot handle click okay so this is the label of the button so if you remember I explained you JavaScript so in JavaScript also we created a button and on click of that button I used to call a function and that function I used to define in the HTML sorry in the JavaScript so this is our component file and here we are using this lightning button so it will be rendered on the UI and then whenever you click on the button so this handle click function will be executed now this handle click function we need to define in the controller so now you need to click on this controller right so automatically a file will be created so its name will be second LC controller dot GS so it is a controller file where the code which you will be writing it will be specific to JavaScript so here we are creating a function this is the name of the function so now if you want to define a function with handle click name so here you will be writing that name okay so whatever whatever name you have given to your function in in your component file so the same name you need to use here right now what we need to do whenever I click on this button so I just want to change the value of this message attribute so that I am going to do through JavaScript so here I am going to write component dot set V dot message comma button click so this is the way like we have two methods first one is set and second one is get so if you want to set some value from JavaScript to your components view file so you can just use component dot set then name of the attribute and then you can assign the value as per the data type right so this way you will be able to assign the values and this attribute is basically declared here so initially it will be showing nothing so let me just show you some default value as well so here I am writing test value so initially it will be showing test value when I will be clicking on the button so automatically this button clicked will be displayed in place of that text so this way like you can link your components view and your controller function right so now what I am going to do here in this application I am going to change it so it will be second LC I am just saving this code and clicking on update preview right so here you can see it is showing hello then test value and click me is also available in the same line right so what we need to do we need to change the lines so here you can use br br is for line change if you want to change the line or like you want to show your element in the new line so you can use br br basically stands for break line and it is HTML element that you can use directly and now if you refresh your page so you will see your button in the new line yes Jana I will be showing you like from where you can learn about these components so before that just understand this then I will show you the references through where you can just understand so right now you can see it is showing hello test value so this test value is coming from here default value is test value that is shown here and here hello is displayed as is as plenty plain text this message attribute is showing this test value then we have a button whose label is click me right now if I click on this button so that JavaScript function will be executed and the result will be available here so I'm clicking here and you can see this message is changed right so this way those who are beginner and never practice lightning or a component so for them it will be beneficial like how we can utilize these different files so that we can implement lightning or a component okay so I hope you understood now I'm going to show you some references that you can refer so if you search for lightning component library so there will be a sales force official sales force library link which is publicly available so here you can see on left hand side we have component reference and it is for both so at top you will see it is for lightning web component at top you can see it is for lightning web component here you can see different different components related to lightning web component are available if you scroll down so we will see or a component or a related components right so right now I use lightning button so here you can see it is lightning button right so you if you want to use different kind of buttons so here under lightning you have a button and here you will find different different buttons available so their sample code is also written at below so we just need to use the variant if you want to use different different styling right so what you can do simply you can copy this code and you can use this code in your or a component so it will be available as is and later on you can see with each button on click method or function is associated so that you can implement in your javascript file so here controller is also available so this way like here we have an alert which is like getting which button you have clicked so each button is basically calling handle click right each button is calling handle click function so what is happening through this event variable that we are using above we are getting the source and we are getting the label like get source means button information will be received and through dot get v dot label we will be receiving the label of the button and that will be displayed here with you clicked right so this way lots of things are available if we see the lightning card so yesterday if you remember our text was not having white background so if you want to have that so you can use this lightning card right so this is the lightning card which will show you your result in the white background so here in lightning card we have header footer body everything new button so you can customize whatever you don't need you can just remove and you can customize this so this way lots of components are available so as per the requirement you need to search and you can utilize this so basically lightning auto component and lightning web component we use for UI design so if you see if I go back so when I opened this page so here you can see lots of components are available so these kind of UI if you want to create if you want to create these kind of UI so these are pre pre implemented codes you just need to click on them and you will have a reference and that reference code you can use as is in your components right but you need to decide whether you are implementing lightning auto component or lightning web component okay so let's say it is a radio group so if I click so this is the demo and this is the code now you just need to understand this code like how it is working so these are simple so here if you see radio groups so name label options values type and option options and values are defined above so you just need to relate everything is available here whole code you will be having and as per your need you will be customizing this code and no one will be able to explain each and every component to you so as per the requirement you will be just exploring that thing and you will be using them so everything that is available here it is for implementing different kind of UI right so I am just sharing this link with you so that you can just have a look and when like this the same link we'll be using for lightning web components also right so it is important for you so whenever you work on front end development and you have aura or lwc requirements so this this is a go to link for me like whenever I implement any component so I just explore this and for content creation also I just explore this and learn something new so here lots of components are available that you can understand okay so with this let's jump to our next example so here button clicks so now what I'm going to do I will be creating two buttons and I will show you how we can have two different functions and JavaScript okay so I am first creating one more attribute I'm creating one more attribute so changing it to message one message two it is test value one test value two then hello message one and I'm just copying and pasting it right so it will be message two so this way different different statements are available here and for line break I am using BR here I'm using HR as well so HR is for horizontal rule okay so these are two buttons two different messages will be displayed and it this will be handle click one handle click two so naming you can decide as per the requirement right so it also depends like which kind of project you are implementing so as per the project requirement also you can just decide names of your attributes label of your button function name so everything depends on the requirement okay so this way two buttons are created here now in JavaScript file in the controller file we need to create two functions as well handle click one and handle click two so handle click is already there so I'm just changing its name copying it then here you need to put a comma and then you can put a function right so this way if you want to have two different functions so you can implement and here I am writing message one here I am writing message two so it is first button click and then second button click right so this way you can have any number of functions in your controller and here we have this code now if I refresh so you will see the results okay so on UI I hope you are able to see the results at top you can see we have hello test value one then we have click me then we have hello test hello test value two and then click me and this is horizontal rule it is coming because of HR okay now what I am going to do if I click on click me so it is showing this if I click on click me it is showing this right so this way two different functions are working so if you click on particular button so that particular function is getting executed so now if you have any doubt you can ask so these are simple things and maybe in real-time scenario you will be implementing complex implementation so I'm just waiting for any question if you have so I will be able to answer otherwise I will be moving forward so I don't see any question as of now yes it is not getting auto refreshed so whenever you change in the code you need to refresh so generally what will happen whatever component we are implementing here so we won't be testing it through this app instead we will be placing it on the page like yesterday we placed our component on the home page so we'll be placing our component on the home page or any other page and if you refresh your page so your component will be refreshed automatically right and if you want to implement a refresh functionality in your component so that is also possible okay so I think all good so far so moving forward now I'm showing you one more thing so right now what we are doing in the controller we are just setting this value ourselves now my requirement is I just need to show the label of the button right so I'm changing the label of the buttons first button and second button right so if I click on first button so with hello I need to see first button right if I click on second button so after hello I need to see hello button message now how you can do that so we'll be leveraging these three variables so first we are already using so whenever something is coming from this component file to this controller file so that information will be available into this component variable right so that component variable we are using here through that only we are just setting the values okay now if you click on a button so button related information because button on button if you click so that is basically treated as an event so that event information will be available in this event variable okay so now how you will be utilizing that so I'm just commenting this statement and here I am creating a variable button then event dot get source so this is the another way like you can set the value so here what we are doing we are utilizing this event variable so if you click on a button so all that information will be available into this event variable so this functionality we will be using in lightning web component as well in lightning web component also we will be clicking on the button and all the information will be available with this event variable so through that event we are getting the source that information will be available in the button through button we are getting the label of the button and then it will be assigned into message and that message we are assigning here right so here also you can write it but here what I will be doing I will be combining couple of statements so here I am just going to combine it like this so this way also you can write so event dot get source dot get v dot label right so instead of writing two statements I just combined those two statements and the result will be available into this message variable and that message variable will be stored into this message two and the result will be available on the UI okay so I just saved it now if I refresh so you can see button labels got changed if I click on this button so whatever is written on the button it is reflecting here if we click on this button so it is reflecting here right so this way these two functions are working now so I hope you understood the working right now what I am going to do I am going to call a single function with both the buttons I will be calling a single function with both the buttons okay so what is happening here so we have these two buttons and you can see this first button is calling handle click second button is also calling handle click same function so now I am going to modify that code for you so this is handle click too so I am just modifying this and just just ignore this code I am commenting all the code here and we are not calling so it won't be executing so we have this handle click it will be executing now here what I need to do I just need to apply if condition so that I can check I can check which button is actually clicked so now I will be using conditional statement okay so this conditional statement is simple we we use conditional statement in apex we use it in java cc++ in almost all programming languages we implement if we implement conditional statement so that I am going to use here so I will be checking if message is equals to first button so it means button one is clicked then else button two is clicked right and whatever message will be available in this message variable so basically this msg variable is compared with this first button text if it is equals it means msg variable is having that first button message so that message will be assigned into message one attribute if not so so else part will be executed it means msg variable is having basically second button as a message and that will be assigned into message two so this way through single method also you can fulfill your requirement so you don't need you don't need to implement two separate functions with a single function you will be able to accomplish this requirement right so this is kind of reusability that we are achieving from here I am just refreshing the code so if I click on first button result is showing if I click on second button result is showing so I modified the code I am calling handle click both the times still my code is working fine right so I hope this way you are able to understand like how we can implement complex JavaScript code in aura so this is just a beginning as per the requirement you need to modify the functionality and step by step I hope you will be able to implement the components okay so if you have any question you can ask otherwise I will be moving to explain one more feature for today so we discussed about attributes and expressions we discussed how to call JavaScript function and this is important because same thing we need to do in the lightning web component as well so I am I am just covering mostly that part which is which is available in lightning web component as well so that you have some understanding and you can compare like how things are working in aura and how thing works in web components yes Vishal if you have something in label so you just need to get that first and then you can utilize that so Janna basically this helper is supporting for controller so how you can utilize it so instead of writing this code here what you can do you can just shift this code in the helper right so from here I am just cutting this code this code and pasting it here and here I am using even component and event so this is my helper where I implemented the code now this is my controller so from here I will be calling the helper function so helper dot then this is helper method so I am going to call it then I need to pass component dot events this way so what you can do right so here we are calling so if you if you want to reuse this code if you want to reuse this code in different functions like you want to call the same function in here as well if you want to call same function here as well so that can be done with the helper only so if you want to call one method more than one places so what you can do just implement helper implement the code there and that helper code you can call anywhere in the controller functions and those controller functions basically you will be calling in the component so this way basically this is three separate files helper is also javascript file so in complex implementations we prefer helper as well but in simple implementation we write the code in helper only so you can relate like in trigger what we did in trigger we just call the method and trigger handler will be having the definition so it is kind of same controller is like calling the method and helper is having the definition okay so this way you will be able to implement the components yes Anita I will be updating that exercise sheet there you will be having some complex scenarios so that you can practice and discuss each other in the telegram group right so right now I am just explaining the basics of aura and will be giving you some exercises as well no we cannot use helper in another component so whatever files you see here those files we can use in this component only if you want to share something like if you want to share the values or methods you want to call so you need to implement parent child relation relationship for that you need to implement parent child relationship for that and we have different techniques through that you can call method of parent into child or method of child into parent but if you have two independent components then that is not possible yes sarun whatever I am teaching these are like basic building blocks if you want to become expert so you need to level up yourself and you need to implement complex problems so for aura and lwc I will be sharing some complex problems so I will be updating our exercise sheet where you will find some complex problem and while implementing those you will experience like you are using html css and javascript as well okay so let me first explain the concepts and then you can just focus on the practice okay so I have one more concept that I need to explain to you so it is basically bounded versus unbounded expressions so with this topic we will be discussing about parent child component relationship so basically with the help of aura we will be binding the data right so here if you want to bind the data between two components so there should be one relationship available so we can add a component in markup of another component so the component which will be adding the markup the component which will be adding any other component in its markup so that will be known as container component or you can say parent component and we can use an expression to initialize attribute values in the component based on attribute values of the container component so what what does it mean like from parent component you can pass the values to child and through child you can just update those parent component attributes right so they kind there will be kind of bounded expression if you change value of attribute in parent so it will be updated automatically in the child if you update child so parent will be updated automatically right so there are two form of expression syntax for that so we have those as unbounded expression and bounded expression so unbounded we will be using hash so expression I already explained to you in curly braces we need to write attribute like exclamation v dot so in place of exclamation we'll be using hash and if you use exclamation so it will be considered as bounded expression but remember if you are having parent child relationship then only you will see that bounded unbounded behavior okay so for that right now we need to implement two components so I will be implementing one parent component and then we'll be implementing child component okay so I'm just closing all these files creating new component and naming it as child data clicking on submit so child component is getting created here I'm going to create an attribute naming it as child variable and type is string now if you want to show child values so you need to write the statement so I hope this is clear to everyone we created an attribute we are showing its value then here we are having lightning button label equals to update child variable and then I will be calling a function so this is the name of the function update child variable okay so what will happen whenever you will be clicking on this button so on click of the button function that you need to define in your JavaScript will be executed and that JavaScript function will be updating its value so at right inside I'm clicking on controller so here I need to define this function name so I'm pasting it here now I am writing component dot set v dot child variable and here you can put some values okay so this is our child component now we need to implement a parent component as well and in that parent component I will be calling this child component okay so I am going to create one more component naming it as parent data now here I am creating one attribute so this attribute is basically for parent so naming it as parent variable type is string and here I am setting a default value as well default value is parent value okay so this way attribute is created now I'm just showing parent value so v dot parent where so parent variable will be displayed then we just need to create a lightning button label equals to update parent variable and then on click we need to call a function and here you can see whenever we are calling a function so we need to write c dot because this function will be defined in controller so that's why c dot this parent variable is an attribute it is available in this view file that's why it is v dot okay so this way this parent component code is implemented now here I'm going to call the child component so I'm going to show you how we can call the child component so calling child component so this is a comment and after this I'm going to write c colon child data then in child variable so in child component we have a variable named as child variable so here I'm going to pass the value of my parent attribute so understand this carefully it is different and this concept we'll be using in lwc as well so c is the namespace child data is the child component so by default all the components are stored in c namespace so that's why you need to write c colon then name of the child component then it's variable so here we have this variable which is kind of attribute here name is child variable it is not having any value so what will happen this parent where attributes value will be assigned into this child where and here we are using hash okay so let's see what will happen but before that I'm going to implement the controller of parent so here I'm copying this name and putting it here okay so now what we need to do we just need to set the value of the parent attribute right so this way our code is implemented and if you see any doubt at any line number so what you can do you can just write child component and line number and parent component and line number if you have any doubt I can explain it again now what I need to do parent component I need to place here so if you use parent component automatically child component will be rendered on the UI so here you can see all the results are available but in same line so now we need to customize this we need to use line breaks and we can use HR as well so that we'll be having horizontal rule so now I'm going to modify that so we can do some UI changes so what is happening let's do it here so first of all child then parent so here I'm using br tag here I'm using br tag and in child component here I'm using here I'm using right so this way it will be divided and child so here I'm using HR tag as well for horizontal rule so first child component will be rendered and then parent information will be rendered so if I refresh so you will see the changes so here you can see this is child components result this is parent components result and both child value attribute parent value attribute both are saying both are showing same value so how it is happening the value which is available in this parent value that is parent value default value is going to this attribute as well so this parent where attribute is having already this value parent value it will go to child as well so both will be having same values now see it carefully if I click on this button so child attribute is getting updated if I click on this button so only parent attribute is getting updated okay so there is no relation between them so that's why it is known as unbounded relationship this is unbounded relationship so now you just need to read this in unbounded expression we use this hash if you pass data from parent to child so we use this hash with that now any change to the value of the child attribute attribute in the child does not affect the parent attribute in parent and vice versa so if you change the value of child attribute parent won't be updated if you update parent attribute child won't be updated that is happening here now you will say if we want to do that is it possible so answer will be yes for that we need to implement bounded expression so in in the in case of bounded expression you will be using this exclamation sign and then it will happen so now I'm going to show you so where you need to change we need to change that line number six only so this hash you need to change to exclamation now I am refreshing the page again so here we see default values if I click on update child value so see carefully both are updated here also update child value here also update child attribute if I click on update parent where so it will be updating both right so this way you can see both are having some relationship so this is bounded expression okay so now if you have any doubt so please raise your question so that I can answer so Jana is asking please explain exclamation and hash when to use so like if you have two components both are connected and if you want to apply changes like from child component if you are changing you want to throw that value to parent component as well so then you will be using exclamation but if you won't if you don't want to share the values then you can use hash so Madhu Mohan whatever exercises I will be sharing with you so you can practice and if you get stuck somewhere so you can ask for help in the telegram group so Ashutosh is asking to explain it one more time so Ashutosh basically what is happening here we created a child component where one attribute is available we are showing that attribute and we created a button on click of that button this function will be executed and which is available in the controller so this controller is basically updating the child attribute okay now in the parent component we did the same implementation we have an attribute we are showing its value we are having a button through that click button click this parent where attribute will be updated but here we are calling the child component and from this we are passing the parent value into child right now if you use exclamation so whenever you update parent where so child where will be updated if you update child where so parent well where will be updated but if you use hash so that change won't be effective so this is the thing that I demoed in this session so Rajesh helper.js basically we use to support controller and renderer.js we'll be using if you want to override default rendering so let's say whenever I refresh the page so page is rendering on the UI this this after this refresh or whenever you access any link so basically your page is rendering right on load or you can say rendering so if you want to override and you want to implement your own rendering thing so here you can implement that code yes Jhana so you can see the controller portion and Anita yes these are the basic concepts whenever you work on real-time project so these are the basic building blocks with the help of these you will be implementing complex solutions so I will be putting some exercises so that you can create some lightning components and you can place those lightning components on the UI and tomorrow I will be explaining you how we can connect our lightning component with Apex so we can we can retrieve Apex data and we can show that on lightning components as well okay so I will be explaining a little bit on Aura because anyhow we just need to focus more on lightning web components so I will save your energy learning lightning or a component so this I am just explaining so that you know how lightning or a component is actually implemented so with with two to three sessions it will be like easy for you to understand the working you don't need to deep dive in Aura component so whatever practice thoroughly we will be doing that we will be doing for lightning web component only okay so for lightning Aura component I will give you small small exercises but for lightning web component there will be proper exercises in each session that I will give for you and you can practice that uh yes go goth me uh we can call the parent from child as well so in that case that child will become the parent if you do the river so that that calling component will become the pivot so don't go with the name in real time we won't be using child and parent with the component name this I used for demonstration purpose so the component whichever is calling the other component will become the container or parent component okay so if you have more questions let me know I'm done with the session so tomorrow I will be having one more session on this and from next week onwards we'll be starting lightning web component implementation so that will be easy and exciting as well because that lightning web component implementation is used in real time nowadays so this is it for you for today thank you so much for joining today's session see you tomorrow same time thank you bye everyone see ya