 Hello, everyone. I'm Sanjay Gupta. I welcome you on Sanjay Gupta Tech School. So today we are going to discuss few more topics related to Lightning Web Component. And today is day 81 of this bootcamp and part 4 of Lightning Web Component. So so far I discussed lots of concepts related to Lightning Web Component. So let's cover few more topics related to Lightning Web Component in this session. Okay, so moving forward, so if you have joined this session or you have, you are for the first time on this channel, so you should know about me. So for that, you can go through with this slide and on this slide everything, whatever I have done professionally and whatever I am doing is available. So you can go through with this slide. So always remember consistency is the key. So please do regular practice. And if you want to become part of the community where lots of Salesforce, Beginner or Salesforce enthusiasts are connected, so you can scan this QR code and here you will find lots of people helping each other. So we are in week 24 of this bootcamp. So we are learning Lightning Web Component. This is week two. And I think next week also we will be having few more sessions on Lightning Web Component. And after that, few more sessions will be there which are related to deployment and how QA actually works. So those sessions will be there for the benefit of you. So do follow Sanjay Gupta Tech School on YouTube, LinkedIn, Instagram and Telegram. And all the important links are available in the video's description. And please share a review and review your feedback about the bootcamp. And like from tomorrow, we are going to start one more bootcamp that is related to Appian. So tomorrow, same time, we'll be having an overview session related to that. So you can join that if you want to learn a new tool. And now jumping onto the topic. So in today's session, I will be covering three topics. So if I take you to the session tracker, so all those topics are mentioned here. So we will be talking about how we use CSS and Lightning Web Component. And I will let you know, like if you have created your Lightning Web Component, so it comes with a default JavaScript file. But apart from that, if you want to have more JavaScript files in your component, so how you can use that within the component and outside the component. And other than that, we have life cycle hooks. So I will be explaining their life cycle and whatever methods of those are related to life cycle hooks, we'll be discussing them in detail. So let's first discuss about CSS style sheet. So basically, if we talk about a Lightning Web Component, so in a Lightning Web Component, there are four major files. One is HTML file, second one is JavaScript file, third is .xml file and fourth is .css file. So remember, whenever you create any Lightning Web Component, so that CSS file is not available automatically. So this I told you in previous session as well. So whenever you want to write some CSS for your component, so you need to additionally create that CSS file, right? So here you can see in this example, it is very simple. And here we have parent.html and parent.css. So two files related code are available. In parent.html, we have H1 tag where to do list, this text is available. And in .css file, we have the CSS code. So if you have gone through the CSS related video, so I think you will be able to understand this code properly. If you have not gone through the prerequisite, which is HTML, CSS and JavaScript, so I would request, please go through all those sessions so that you can understand it very well. So here we have the CSS, which is for H1 element. And here we have this attribute font size and we are assigning x, x large as font size. So automatically, this CSS will apply to this H1 element that we are using in the HTML file, right? So this way, simply like whatever CSS we implement for web development. So the same style you can write here in the additional .css file. Okay, so I hope you are able to understand this example. So simply you can create this component, you can deploy it to org and you can place it on homepage and you can test it out. Now, moving forward, we have one more example. So in this example, we have two components. So if you see above, we have parent.html and parent.css. And at the bottom, we have child.html where also we have H1 element implemented. And this child component we are using in the parent component here, like c hyphen child and then we are closing it here. Okay, so this way, if you want to use any child component into parent component, so you can write it like this way. Now, we need to see whether this H1 CSS that is defined in the parent.css will apply to the child component HTML, sorry, H1 element or not. So the answer will be it won't be applied. So whatever CSS you have implemented in the parent.css file, so that will apply on to the parent.html H1 element. It won't be applied to the child components H1 element. So for that, there are two ways. First, you can write CSS in the child component itself. Second, you need to write CSS in the parent component that will apply on the child component, right? So how we can do that. So like anytime if you see any doubt, you can ask in the chat so that I can answer your questions, right? So don't hesitate. And if you if you have any sort of question that you want to clarify, you can ask because these are the advantages of joining the sessions live. So if I move forward, so you will see example number three, an example number three will show you how in the parent.css, we can have the CSS for child component. So you can write c-child. So the CSS display and border, the both CSS will be applied to the whole child component, right? So this way, if you want to apply CSS on the whole child component, you can write it like this. Otherwise, what you can do in your child component, you can create a .css file. And there you can write colon host and the CSS. So whenever this child component will be hosted by any other component, so this CSS will be applied automatically. And other than this, if you want to apply normal CSS for particular element, so you can write it in the same way, we implemented CSS in the parent.css file, right? So these are different ways to write CSS if you have one component or if you have more than one components in a hierarchy, right? So I hope you are able to understand. Now we have one more thing, how to share CSS style rules. So it is also possible like if you want to create a specific component, that component will be having only CSS file, and you want to import that CSS file, similar to external CSS. So here you can see we are creating a component named as CSS library. Now you need to remember this component can have only two files. So normally what happens when we create a component .html and .javascript file also created automatically. So if you are creating a CSS library, so you need to delete those .html and .js file. And you will be having only .css and .js meta.xml files. In that library, right? That will be a component. And here you can see CSS library.css. In this file, we have some CSS defined. Now how you can use this in the component. So let's say we have created one more component whose name is my component. Here we have .html.js. .xml and .css. Now in this component CSS, how you will be importing that CSS. So you need to write at the rate import. And in single quotes, you can write C slash CSS library. So CSS library is having only CSS file. So automatically that will be imported. And whatever CSS you have implemented there, that will be applied automatically onto this HTML file, whatever elements you are using. Yeah, yes, Vanessa, the use of host is like whenever you use any component into another component, so that host CSS will be applied to the whole component, not to the particular element. Okay, so if I take you back, so here you can see we have this colon host. So display and background, this whole CSS will be applying on the component, whole component will be having this. If you have specific CSS that will be applied to particular element only. Okay, so this way I hope you understood how we can create a independent component having only .css file and how we can import it into another component. So this is important to know if you're working as a LWC developer like we can import any CSS library into any other component. Okay, so this this was about CSS. Now let's talk about JavaScript. So similar to CSS, like we shared CSS file from one component to another. So similarly, you can share JavaScript code as well. Right. And this is also important to understand. So whatever today we are discussing all these are concept related things. And whenever you have time, so you can implement these concepts in your existing component that you have implemented for the practice purpose. So here you can see we have a component my component and in this component, we have total five files, right? If you see this component, so we have total five files. So we have my component.html.js.xml. So these are common. These three files will be available with all the components. But if you see at the bottom, we have two more files, my function.js and utils.js, right? These two files are also available. And these are also JavaScript files. So these are additional JavaScript files. So always remember whenever you have a component and you see more than one JavaScript file. So the JavaScript file whose name is similar to the component that is the main JavaScript file, right? And others are supporting JavaScript files. Okay, so in these JavaScript files, whatever functions you are defining, you can import that function in the same component, as well as into any other component. Okay, so now I'm going to show you how we can do that. So if I move forward. So here you can see how we can share JavaScript within component. Okay, so in previous example, here we have a component my component. And in this my component.js, I will be using my function.js and utils.js. So how you can use it this way import then inside curly braces, you're using get amount calculate cost from dot slash utils. So why we are using dot here because this utils dot JavaScript file is part of that component where your primary JavaScript file is available. If you're supporting JavaScript file is available in the same component. So in that case, you will be using dot slash and that particular JavaScript file name. And similarly, you can see in the second line also we are using same process. But the difference is in this first import statement, we are using curly braces. In seconds import statement, we are not using curly braces, right? Now, what is the difference between these? So for to understand these points and to understand few more things, you just need to focus on the below points which are available in form of notes. Okay, so just just go through each point one by one. So first says a JavaScript file can export named exports or a default export. So there are two types of export. So whenever we create any additional JavaScript file. So in that JavaScript file, we can have two types of exports, right? It can be having a name or it can be a default export, right? So if it is a named export, so the code uses the specific name in curly braces. It means get amount and calculate cost. These are named exports, which are defined in utils.js. And to import a default export, the code can use any name. So this this my function is having default export. And here you can use any name. So in the example utils.js uses named exports and my function.js uses a default export. So I hope with this explanation, you are able to relate it. Now, going forward in the upcoming slides, there will be more examples with which you will be able to clearly understand how we can define name exports and how we can define default exports, right? And this is very much important if you want to become export and lightning web component. So all these things which we are discussing in today's session are very much important. Okay, so here, we are having two components. So after this slide, we'll come back on named exports and default exports as well. But before that, focus on this one. So we have first component as more more gaze utils. Here we have .js file and .xml file. Then we have my component where we have HTML JavaScript and XML file. So the folder and one JavaScript file must have the same name. In this example, the name is more gaze utils, right? So moving forward. So here you can see, here we are importing files. Here we are importing any other JavaScript. So what is happening? We have two different components. So if you want to import any JavaScript file, that is not part of the component, or it is part of any other component. So this is the way you can import it. So you need to write C slash mode gaze utils. So here we are using C slash. If I take you back. So earlier what we did we used dot. In this case, these additional JavaScript files was part of this component only. So if your JavaScript file is part of the same component, you need to use dot. If it is part of any other component, and you are importing it into any other component, so you will be writing C slash. Okay. And in the import statement, specify the folder to import from not the file, don't specify a file extension. So basically, this C is the namespace where all the components are available. So we need to use it. Then other components can import code only from the library's main JavaScript file, which has the same name as the folder, right? And the components cannot import from a supplement JavaScript file with another name or a file in a nested folder. So to share such code to say sorry to share code from such files, export their functional variables, then export them again from the main JavaScript file. So basically, what is the meaning of overall overall meaning of all these statements like if you want to import any JavaScript file from any other component, so it should be the primary JavaScript file. And if you want to export any additional JavaScript file, so that function you need to use here in the primary file, and through primary, you can call them here like this, right? So within the component, you can import any file, any JavaScript file, but from any other component, you can import the primary JavaScript file. Okay, so I hope this way you are able to understand the concepts. Now here, we need to discuss how we can write export default function. So earlier, if you remember, we discussed about named export and default export. So if you have my function or JavaScript file, and in this file, you want to define only one function that is default. So this way you can write export default function. So this function is not having any name, right? So this way you can define default export, and you can write any code, whatever code is written here that will be executed whenever you will be importing. And here you can see this way we are importing it, we don't need to write any curly braces, any name we can use here, right? So to refer to the default export, the component that imports the function must choose a name in the import statement. It doesn't have to be the name of the exported function or JavaScript file. That's just a convention. So right now we are using my function, but it can be any name we can use. Okay, so moving forward, now we need to understand how we can export named function variables. So here is the example. So here we have this file, mode gaze, utils.javascript, right? So here this one is the named function. So this is basically a variable and below we have a function. So get term options. Here we have this collection, label, and value, label and value. So this block will be returned and below we have calculate monthly payment. So it will be receiving three parameters and we need to write the logic here. And here at the bottom you can see we are writing export these two get term options and calculate monthly payment. Okay, so this way you can define named export for functions as well as variables. And this way you can import it into any other component, right? So we are writing import, get term options, calculate monthly payment. So now these names should be same as you defined in the component, JavaScript file and from C slash mode gaze, right? So okay, so this, this, this was by mistake. Now next topic is life cycle hooks. So till now whatever we discussed, we discussed about CSS how we can use it. We discussed about additional JavaScript files that we can create and share, right? So next is life cycle hooks. This is also an important topic that you need to know. So before starting this, I just want to recall in aura, we used to use init method. In aura component, we implemented init method, which which were executed whenever a component is loaded, right? So whenever component is loaded that init is automatically executed. So it was like event that we need to handle. So similar to that, if you want to do any operation automatically whenever your component is loaded onto the browser. So we have different options here, different methods here. Those are known as life cycle hooks. So lightning back components provide methods that allow you to hook your code up to critical events in the components life cycle. So these events include when a component is created. So whenever component is created, so constructor will be executed. Whenever component is added to the DOM, DOM means document object model. So whole HTML page is basically known as a document. And whenever any component is added to the document, so it means you can say your component is added to the DOM. So your component will be added added as a object in that document. So that's why it is known as document object model. So whenever your component is added to the DOM, so connected callback method will be executed. Then whenever your component is rendered in the browser completely, then rendered callback is executed. If there are any error, once your component is loading, so error callback will be executed. And if you are removing your component from the DOM, so this connected callback will be executed automatically, right? So these are some life cycle hooks that you need to know their meanings. And in interviews also like this question is asked frequently. So now we are going to discuss them one by one. So before that, you need to understand the life cycle of this life cycle flow of this life cycle hooks. So basically, first of all, what happens, constructor will be called on the parent. So here in this flow, I am assuming we have two components. One is parent and one is child. And I hope everybody knows like child component is called, which is which is used in any other component, which is called in any other component. So that component will be treated as parent. So generally, a parent will be loaded first because child is part of that parent component. So that's why here it is written constructor called on parent. Okay, then public property value of parent is updated, then parent inserted into the DOM, then connected callback called on parent, right? Then parent rendered on the browser. And after that, constructor called on child, public property value of child updated, then child inserted into the DOM, then connected callback called on child, then child rendered, then child rendered callback called on child, right? So once child is completely rendered, then only we can say like parent is also rendered completely, right? So, yeah, so basically, with this life cycle flow, I hope you are able to understand the sequence how these different methods are executed. Okay, so moving forward, next is constructor. So how we can write constructor? So it will be written in your JavaScript file. Simply constructor, then you need to write parenthesis inside curly basis, you will be writing super. Super means the class which we are inheriting. So if that is having any constructor, so that class constructor will be executed. Otherwise, the constructor is having this statement. This dot test equals to component instances created. So what is happening here, we have created a property. So here, we have created a property and this property we are assigning component instances created. So we are using this, I hope everybody know now, like why I have used this here, because whenever we create any property in JavaScript and you use that property after its declaration. So every time you need to write this dot with that property. Okay, so Pooja, the exact meaning of parent rendered means parent is rendered completely on the browser, like you are able to view whatever code you have implemented in parent component. So the result is available on the UI. Right? So whatever code you have written, it is executed and it is visible to the UI. So it means your component is rendered. Okay, so this is the constructor thing. Now we have connected callback. So it is simple example. Here you can see we have a HTML file. So in this HTML file, we have a dev where ID is waiting and if false, ready. So if ready is true, then it will become false. If it is false, it will become true. Right? And here we have if true. So ready is a property which can be having true or false depending on the JavaScript file. Then these are two more properties name and price. Okay, so if ready is having false, then this loading will display. If ready is having true, then this loading will disappear and this name and price will disappear. This way it will be working and it is connected callback demo. So here you can see in the JavaScript file. Here we have name and price. Then we have ready. Initially it is false. Initially it will it is false. So on UI you will see loading and after three seconds ready will be converted into true. So inside connected callback we have used set timeout. So in this set timeout we are setting this dot ready as true and its timeout value is 3000 millisecond. So 1000 millisecond is one second. So after three seconds your this code name and price will be rendered on the UI. Okay, then we have rendered callback. So once your rendering is done like whatever code you have implemented in your component, if it is rendered on the UI and after that if you want to show some message. So at the bottom you can see we have if true and rendered and component come successfully rendered. So this message is available. So what you can do in JavaScript, you can implement rendered callback similar to this connected callback and what you can do you can create a property. Property name will be rendered and its value you need to set as true. Then only this component successfully rendered message will be displayed on the UI. Okay, so first this connected callback will execute and once your whole component is rendered all the output is displayed on the UI then only this rendered callback will be executed. And this this is the error callback. So whenever there will be any error at the time of loading of your component so it will be executed. So it is very unique to LWC. So implement it to create an error boundary component that captures errors in all the descendant components in its tree and it captures errors that occurs in the descendants lifecycle hooks or during an event handler declared in an HTML template. So you can code the error boundary component to log stack information and render an alternative view to tell users what happened and what to do next. So how we can do this so this way you can implement your error callback component. So basically if there is any error so you can have one more component. So error view is an additional component that you need to define. And in that component we can pass these two parameters like error and info. So in error we are passing error and in info we are passing the stack. Stack will be having all the error related messages. So you need to define this error view component and in that components HTML you will be rendering error and stack information. And if there is no error so you can have any other component and that that can be called right. And this way you can implement the JavaScript. So here you need to define two properties error and stack and if error is there so error callback will be executed automatically and basis on that like you can define the values. Okay. So Vishal is asking what is connected callback. So I'm going to explain it again. So basically Vishal you need to understand this. So whenever your component is added to the DOM so then your connected callback is executed. Right. So you can imagine like whenever your component is rendering on the UI and before rendering is completed. So before that like before your rendering is completed your component is added to the DOM document object model. So at that time your connected callback will be executed. Right. So you can imagine like whenever your component is rendering on the UI. So first constructor will execute then automatically connected callback will execute. And once your component is rendered successfully so rendered callback will be executed automatically. And these these methods are executed automatically. You don't need to do anything. You just need to define them in the JavaScript file. So if you define it this way so it will be executed automatically. Now it's up to you what type of code you will be writing in these life cycle hooks. Okay. So this is it for today. So these these are some important concepts. Okay. So Manjunath is asking can explain rendered callback with any use case for example. So basically sometimes what happens whenever your component is loaded and on load of that component if you want to notify any other component. Right. So that kind of operation you can do with the help of rendered callback. So on completed on completely whenever your component is completely rendered on the UI and basis on that if you want to perform any kind of operation. Right. Whether to notify any other component or to pass the value of that component into any other component or to show some UI some pop up any message. So that kind of thing you can do with the help of rendered callback. So right now I don't have any use case for disconnected callback because I also like never used this this disconnected callback in any of the scenario because it is it is very rare situation when we'll be using it. So but I will figure it out and if I find some solution. So in next session I will be explaining about it. So Mukhiya, so we cannot use it directly because that is the part of syntax. So Sri Lakshmi is asking want to add new button to list view of the application. So in list view I don't think we can add any component. So for list view I think you need to create a button and then I just need to check this question because I'm not sure whether on list view button we can add component. So I will be checking this. I'm sure like on quick action we can launch the component but on list view button I'm not sure we can. Okay so there is asking can you please explain life cycle hooks with real time example. So real time example is like if you are rendering any component and like as I took an example in my example as well. So here you can see in connected callback we have this set timeout and like initially if you want to show some spinner whenever your component is loading and if you want to show some spinner or loading kind of thing. So if you want to like delay for some seconds so you can do that with the help of connected callback. Right so with that connected callback what will happen this this this code will be running whatever code you will be writing here and the below code won't be executed whenever that time limit will reach so above will disappear and below will be available on the UI. So this way you can manage your loading and similarly once your component is completely loaded completely rendered on the UI and after that if you want to show some message you want to do any kind of operation so in that case you can use this rendered callback. Right so it depends on the requirement whenever you will be having real time requirement and if you see this kind of scenario like before showing the results if you want to do something or after completion of rendering if you want to do something so you can use these connected callback and rendered callback and one more example is like in Aura also we used if you want to fetch some data from Apex so those code also you can use in connected callback right so you can fetch that data and that will be available on the UI with the help of HTML so you don't need to call any method explicitly for that so these kind of automated process you can do with the help of these life cycle hooks method so Ashutosh is asking one more time to export explain how to export supplement JavaScript file so there are two scenarios if you have supplement JavaScript file in the same component if you have supplement JavaScript file in the same component so you will be using it like this you need to write import and then dot slash and then the JavaScript file name and if it is part of any other component like if you have two separate components and from one component you want to export JavaScript file into another component so you will be writing this C slash and then JavaScript file name so Ramya this healthy view and error view are the components in error component these are a child component that you need to define separately so from error component we are passing this data and in error view it will be receiving error and stack and healthy view is another component that you need to define so we are assuming like if there is any error so this is for testing purpose like if there is any error so it will be assigned if there is no error so this will be executed thank you Tejas for appreciating the first so Vishal I think with this life cycle you will be able to explain so just remember this life cycle flow and you will be able to explain and the meanings are available here yes vresh if you are applying for developer roles so back end development and front end development both are important no vresh we cannot use JavaScript for back end development for that we have apex and JavaScript is basically client side scripting language so whenever you have anything that you are implementing on front end so generally there we use JavaScript okay so this is it for today's session if you have any question you can ask I tried to answer all the questions so like next lightning web component session will happen next week because tomorrow same time we'll be having apion overview session so lots of folks are asking what is apion why to learn apion so Ankit will be explaining everything related to that in tomorrow session right so if you want to know you can join live otherwise you can watch the recording as well and later you can decide whether to learn that tool so if you are working professional and in your organization apion tool is used so that will be useful for you and if you are a beginner and you want to learn any local development tool other than Salesforce so apion is another option for you so Ankit Java and apex are different you can say if you know Java then easily you can understand apex but they are kind of different so Mukhiya Vedya Vedikran so you can track minor updates so Salesforce provides their release document so whenever there is a release so you can just go through that release document and there you will find whatever latest updates are available so if I show you those so here you can search so recent Salesforce release notes so recently summer 23 release notes are available so if you open it so you will be able to find whatever minor changes are done so this document will help you to know in which product what is what has changed right so here everything is available and for development if you expand this so here you can see we have lightning component visual force apex API packaging development environments platform development tool etc so everything is available if you expand lightning component so these are the changes which are done in recent release so this way you can go through this release notes and you will be able to understand what has changed so I hope this will help so Samyata so I will be sharing one document where a few exercises and project will be available so you can practice that at your own so Sri Lakshmi this this is a simple use case and if you do some Google so you will easily find that code so you can just have that code and paste it in your component yes we wish you can switch but you need to know backend development as well okay so I hope I answered every question and see you tomorrow with the new bootcamp overview session yeah I will be sharing admin sorry LWC project but it will be extension of that project which we did so admin and development we already did backend development for front end development I will give you some exercises okay thank you everyone see you tomorrow with the new bootcamp overview session thank you see ya bye