 Hello, everyone. I am Sanjay Gupta. I welcome you on Sanjay Gupta Tech School. So, today is part two of Lightning Web Component. So, yesterday I gave you a little bit insight about Lightning Web Component. So, today we will discuss a few more things. So, this is day 79 of the Salesforce Learning Bootcamp and I just welcome everybody, those who are watching it live. And again, like these live sessions I am doing so that if you have any doubt and you want to discuss, so you can ask questions, right? So, there is a playlist already available on my YouTube channel which is related to Lightning Web Component. So, what you can do, you can just go through that playlist and that playlist link is already available in this session tracker. So, people are asking like these sessions are same which are available in the playlist. So, it is kind of same but if you go through the playlist and if you have any doubt and that doubt you want to discuss with me live, so it will be fruitful for you. And if you don't have any knowledge related to Lightning Web Component and you just want to follow these live sessions, then also these live sessions will be fruitful for you, okay? So, moving forward, those who have joined any session on this YouTube channel for the first time and if you want to know about me, so this slide will let you know like what I am doing and what I have done so far. So, do consistent practice. I know like this year is very low in terms of hiring. So, utilize this time, do regular practice. If you want to become something in Salesforce ecosystem, you want to do some jobs. So, you need to learn a lot, right? And this week I am about to complete six months running this bootcamp and like we have completed so much and so much we need to complete as well. So, Salesforce is having lots of things to learn. So, until you have any job, so learn things so that whenever there will be an opportunity, so you can just explain whatever knowledge you have and you can get a job. So, in this session I will be explaining something to you related to Lightning Web Component Bundle and if you want to become part of community where you can discuss things. So, just join this telegram group. Lots of folks are connected and they are discussing their doubts, sharing information. So, this group will be fruitful for you because when there will be lots of opportunities available. So, in this group people will be sharing that information with you, right? So, this is week 23 and we are learning Lightning Web Component. So, there will be two more weeks dedicated for Lightning Web Component. So, whatever doubts you will be having, we will be discussing and from next month onwards like few more bootcamps I will be starting. So, soon I will be sharing that information with you, right? So, I found one more guy who is related to some other technology. So, that is Appian and it is very popular. So, we'll be having a bootcamp related to that. So, we'll share that information with you. So, as I told you, there will be lots of bootcamp available on this channel. So, just follow and write a review or feedback whatever you can. So, everything whatever I am doing it is available free of cost. So, before starting, I just want to share one information with you. So, the new bootcamp that we are going to start is based on Appian. So, Appian is basically a local development tool, right? So, if you want to explore this tool, what it is and you want to learn this job oriented course. So, there is a link which is a prerequisite link. So, if you go through this link, so you can learn about Appian community, what Appian is and like what kind of things we need to learn and here you can see all these sessions will be happening live on Sanjay Gupta Tech School YouTube channel. So, we'll be sharing all the insight related to Appian, how you will be using that tool. So, if someone is interested to learn this tool, so you can just follow the sheet. So, in the sheet where Salesforce, C and C++ related sessions are available. So, there only you will find Appian related sheet. So, you can just explore and if you are interested, you can join these sessions. Okay. So, moving forward, no Deepak, Appian is not related to Salesforce. Appian is totally separate technology. So, this is like Sanjay Gupta Tech School. It is not specific to Salesforce. So, I already told you I will be covering a lot of technology. That's why it is a tech school, right? So, I will be focusing on lots of technology so that you will be having lots of job opportunities in different and different technology. So, whatever is easy for you to understand, so you can just follow that. So, Appian, again I am repeating, Appian is not related to Salesforce. It is a different technology. Okay. So, now let's focus on Lightning Web Component Bundle. So, before implementing any Lightning Web Component, we need to understand its bundle. So, in yesterday's session, I showed you a comparison between Lightning Aura and Lightning Web Component. So, there was a table like in Lightning Aura Component, we have eight files, but in Lightning Web Component, we have four to five files. So, what those files are and what best practices we need to follow while creating those files. So, that we will be discussing in today's session, right? So, whenever you create any Lightning Web Component, so a folder is created automatically, right? And before moving forward, again I want to say if you have any kind of doubt, because this is important with respect to interviews as well. In interviews, many interviews ask these questions which are available here. So, just focus on this, like whatever I am going to explain and if you have any doubt, you can ask in the chat. So, to create a component, first create a folder that bundles your component files, right? So, you will be creating a component and its folder will be created automatically. So, here I want to show you like this is my visual studio code where lots of Lightning Web Components are available and if I open anyone, so here you can see three, four files are available. So, this is basically Lightning Web Component folder named as child. So, whatever component you will be creating, that component will be further known as a folder and in that folder, you will be having all the files. Okay. So, Archana is asking about pending integration sessions. So, maybe I will talk to Ankit as per his availability. We'll try to have a few more sessions on integration. So, here we have one more point. The folder and its files must have the same name, including capitalization and underscore. So, this is the best practice you need to follow. Right? So, if you have created a component named as my component. So, again here you need to focus like if you have multiple words in your component name. So, first word should be small and second word onwards. First letter should be capital and here are the files. You can see all the file names are starting with that component name. Right? So, this is best practice that you need to know. Right? So, moving forward. So, here you can see we have HTML, JS, .xml, CSS and SVG file. So, I'm going to explain each and every file in detail so that you can understand. And I can see a few questions like SVG can be used as static resources to yes and how search of Google real-time scenarios codes any concept. So, like lots of real-time scenario examples you will find in terms of blogs on Google. So, you just need to search like lightning web components, real scenarios or scenarios. So, you will find lots of examples here. So, you can just so here in these sessions you will be understanding the basic building blocks and through those blocks you will be able to understand those codes. Right? Then someone is asking what is test in the component. Yes. So, this is nice question but here if you see so this is for testing purpose. So, if you want to test whatever code you have implemented so this file is basically used for that purpose. Right? So, here you can see run test, debug test these options are available. So, in real-time I never used to be frank I never use this file but it is available to you so maybe you can explore and find some documentation related to that and you can explore but whenever we will be working on the project so generally we don't focus much on this but if it is available so it must be having some relevant. So, I will do some research on this and in one of the session like I will try to explain the particular use of this test whatever is available in this as file like it is .js. Okay? So, let's understand about the best practices for each particular file that we need to follow while implementing lightning web component. Yeah. So, for static resource like first provided one solution yeah we can import static resources directly as well. So, basically if we talk about LWC folder and file rules so these are important that you need to follow so just go through with all these points so your folder and files must begin with a lowercase letter must contain only alphanumeric or underscore character must be unique in the namespace right so it should be unique if you create same component like if you create multiple components with same name so you will get an error you cannot include white spaces cannot end with an underscore cannot contain two consecutive underscores and cannot contain a hyphen right. So, these are some things that you need to remember. Okay? So, Sai Venkatesh I am not sure about that particular file so to be frank I also need to research because I never use that file while creating lightning web components so I will do some research and will give you proper insight about that file. Okay? So, I hope you understood all these best practices because as a fresher initially you don't work on a real-time projects in the company so if you want to know all the best practices so this with these points you will be able to understand those and whenever you create any component so just follow all these best practices. Okay? Now next is camel case and kebab case right so this also we need to understand in detail so here you can see three points are mentioned so lightning web components match web standards wherever possible so the html standard requires that custom element names contain a hyphen so since all lightning web components have a namespace that's separated from the folder name by a hyphen component names meet the html standard so basically what html standard requires like whenever we are using any component so we need to use it like this so at bottom right corner you can see if your component name is visit and if you want to use that component so you need to write c hyphen visit right so this is basically known as kebab case okay so what what we need to do so if I move to next slide so here you will have proper explanation to this thing so however the salesforce platform doesn't allow hyphens in the component folder or file name so right now like in in previous to previous slide we saw we cannot use hyphen while creating any component so whenever you are creating any component you cannot use hyphen right so whatever component's name has more than one word like my component so you cannot name the folder and file name like my hyphen component so this we cannot do but if you want to use that component into any other component then you need to use this hyphen right so basically component names that you are providing they are following camel case so use camel case to name your component like this way my component and camel case component folder names map to kebab case so in kebab case we generally use this hyphen right so in markup to reference a component with a folder name my component you need to use c hyphen my hyphen component okay so whenever you are creating component names so in that case you need to use camel case and if you have created a component then if you want to use that component into another component so in that case you will be using kebab case right so mangesh there there is a way to test lightning web component so let me show you one thing if out of if you are curious so we have lightning component library so here you will find a documentation where you can learn about testing so if you go to this developer guide so here you have this thing right test lightning web components so these are the steps that you need to follow if you want to test your lightning web component right so you can just go through with these and you need to install just for this and with the help of this you can test it so all the steps documentation is written over here and with the help of this you will be able to test it i will try to cover as many points as i can because there is a lot which is available in salesforce official guide so i will try whatever i can and rest i think you can search on google so you will be having some more thing but i will i will create a proper base for you so that you know what lightning component is what are the best practices how we can create our beginner level lightning web components right so all these things i will be explaining so i'm just sharing this link in the chat so lwc test coverage is not mandated so it is optional thing so if you don't write test coverage for lwc so it is okay but if you are connecting any apex file with your lightning web component then for that apex class testing is mandated like test coverage should be there so right now for lightning web component for flows these testing requirements are not mandated so i just want to know is there any question related to camel case and kebab case so if you have understood so i can move forward so deepak there is only one answer to your question is practice so you just need to practice a lot so if you practice a lot then only you will be able to understand right so i know one youtube channel which is a sales force troop so that guy basically create some content on specific to lightning web component so you can find some resources there and there is one more folk which is whose name is sudhir kamat sfdc saga so these two folks are creating some content on lightning web component so you can you can search content on google and practice those things okay so you can follow those two people and there you will find lots of good stuff related to lightning web component right so i alone myself won't be able to deliver everything to you so you need to go through those people who are like having specific implementation scenarios there so yes kebab case is case sensitive and whole lightning web component is basically case sensitive so whenever you are implementing anything so be careful like it is case sensitive so html is case insensitive but rest of the things are case sensitive right so just just follow case sensitive nature so every ui component must have an html file and it will be starting with template and ending with slash template and so name should be same with your folder then dot html like this and this is the syntax right so whatever you write in your html file it will be rendered on the ui then when a component renders the template tag is replaced with the name of the component so it it actually replaces itself like this so for example in the browser console my component renders as my sorry c-my-component so where c is the default namespace so a few people are like thinking what namespace is so namespace is basically a location where all your components reside automatically by default right so namespace name is c right so whenever you use any component so you need to use this in aura also we use this namespace as c right then we have the html pacification mandates that tag for custom element components aren't self closing in other words custom element must include separate closing tag so in html a few elements or tags that we use for that we don't need to use closing tag but in lightning web component for each and every component you need to use closed tag as well there should be separate closed tag and you need to open that as well right so open and closed tag both are must so this was about html file best practices now we have javascript files so which is very much important and whatever business logic you want to implement in your lightning web component so that you will be writing in your javascript file right and javascript file contains all the business logic and whenever your component loads on the browser like it renders on the browser so this javascript code will be available on the client machine on the browser and if you want to perform any operation with the code that is available in that javascript file so you don't need to interact with server right so that's why response time is fast so the the code will be running on the client machine with the help of javascript so that's why it is very useful and you might be thinking like whether we'll be connecting apix with lightning web component so answer will be yes if you want to interact with your s objects so in that case you can connect your lightning web component with s objects right so javascript file like every component must have a javascript file if the component renders ui the javascript file defines the html element if the component is a service component or library the javascript file exports functionality for other components to use this is important second point is important so you can create javascript file as a service component as well so if you are creating a component as a service component like as a library component so in that case whatever functions you have implemented in javascript file you can export that functionality to other components right so later in this session i will discuss how we can create additional javascript files and how we can export them to other components so that is also possible here and javascript file is in lightning web components are esx module so whatever is available latest it is following that so by default everything declared in a module is local it's scope it scoped to the module right so this is brief about javascript file we have few more statements so to import a class function or variable declared in a module use the import statement right to allow other code to use a class function or variable declared in a module use the export statement right so whenever we implement any code so if i show you the javascript file so here you can see we have import statement we have export statement so import means like in lwc module some functionality is available we are importing now this component will be working as a module and in this component if you have created a javascript file and you want to export is it it's any function right if you want to export it's any function so you will be creating it as export and whatever function you have written so those function can be imported by any other lightning web component so that's why we are using import and export keyword here right so next is the javascript file follows the naming convention component.js such as my component.js so html file javascript file these are created automatically so for naming convention you don't need to think or worry much because whenever you are creating any component so it will be created automatically so this is a syntax of javascript file so i think this is very much straightforward whatever code you need to write you will be writing inside the class yes the book usually html javascript and dot xml files are created automatically and css file we need to create ourselves so css file is not created so let me just show you if i have any component where css file is missing so here you can see this component conditional rendering so here in this component we have html javascript and xml here we don't have any css file so what you need to do you need to right click click on new file and here you will be creating a new file so i need to write conditional rendering dot css so this way a new file will be created automatically and if you want to create new javascript files so again right click on this folder and you will be able to add new files here so this way your component bundle works so html javascript and dot xml these files will be available automatically rest of the files if you need you need to create them then the core module i think this thing we discussed yesterday as well so i'm just skipping first line then lightning element is a custom wrapper of the standard html element you need to extend lightning element to create a javascript class for a lightning web component you cannot extend any other class to create a lightning web component so this is part of the syntax because all the html related standards are already wrapped with this lightning element so you just need to extend this only and the javascript file can contain so it can contain public api via public properties and methods annotated with adrid api so in tomorrow's session i will be discussing more about this adrid api then we can have fields we can have event handlers right so these are basic things which are mentioned here so we'll be creating lots of variables lots of functions in javascript files so that you can understand how basically it works okay so next is configuration file so when i know there is no way to open this lightning web component in developer console so we have this vscode otherwise you have one more thing like a lightning studio if you install lightning studio there you can open these components otherwise you won't be able to open them in developer console raju generally it depends on the interview nature of the interview if it is verbal interview they won't be asking but if there is a requirement like you will be having some scenario and you need to implement then shortly they will ask you to write the code so it totally depends on the interviewer so next is our configuration file so we discussed about it yesterday as well so configuration file basically defines matter data values for the component including supported targets and the design configuration for lightning app builder and experience builder so every component must have a configuration file this this is the naming convention and it should be in your project folder right so this is our meta.xml okay so if you have this so initially like by default this is exposed as false so we need to convert it to true and then here we need to set the target right now here target is lightning page lightning home page so this component you will be able to use on lightning page lightning home page only so here we have example as well like if you want to place it on different pages so this way you can write home page record page app page but you can specify a single destination and if you want to add more so you can add like this target then if you type something so suggestions will be there and then this way you can close it so this way anytime you can modify your lightning web component once you modify any once you modify anything in the component so now you need to do one thing like you need to deploy the modified things so I just modified this meta.xml so I have two options either I can deploy this file only through this deploy source to org option if I click on it so whatever changes I have done it will be deployed automatically to the org and if you have done changes into multiple files so instead of deploying them separately you can right click on this folder and then you can select deploy source to org okay so this is the thing if you modify anything you need to deploy okay so your people are discussing in chat so that is very good so Deepak if you have any extension that you are using so please share with Vinay so that he can use as well okay so next is CSS file it is straightforward so it won't be available by default you need to create it so a component can include a CSS file use standard CSS syntax to style lightning web components to style a component create a style sheet in the component bundle with the same name as the component if the component is called my component the style sheet should be like my component.css so the way I created for you like few minutes back right so this way you will be able to write the code so I think I have one component so here we have this CSS file so here basically we are importing CSS library and here it is so this way you can write the code okay so basically here we created the library and in this in this component we are importing that library so this is also possible so this is external CSS that we are importing here in this so this is the syntax right next is svg file which is also important for you to understand so a component can include an svg resource to use a use as a custom icon in lightning app builder and experience builder so to include a include an svg resource as a custom icon for your component so you can add it to your components folder it must be named like similar way you are creating other files if the component is called my component so its name should be my component.svg and you can have only one svg for per folder so basically if you want to have custom icon then only generally we prefer it and for static resources like someone like first a shared one suggestion like we can have static resources imported so that that is i think easiest way to use the static resources then next is how we can create additional javascript files so this is also important so in aura component other than controller we have helper but here in this lightning web component if you want to create helper files and you want to reuse the code so this way you can create your component so here we have html file javascript file xml file then css file then we have dot js dot js right so these are additional javascript files okay so you need to use export function and variables in the javascript file so that they can be imported by the components main javascript file right so whenever you will be creating these javascript file you need to use export keyword before the methods or functions then here you can see how we can import javascript function from current folder so if you see this one so here in the same folder my component you have additional javascript file like some utils or some more utils so if you want to use the code which is written inside my like which is written inside some utils or some more utils so what you need to do you need to apply this you need to import you need to write import statement then this is the name of the function and from then dot slash some utils so if your folder sorry if your file is available in the same component then you need to import it like this and suppose your function or javascript file is available in any other lightning web component so in that case you will be using this c slash so c slash means in in the complete c namespace wherever this file is available so from that file this some function will be imported and you will be able to use it okay so psi vanquish like this is a complete folder so that folder will be modified and folders like files are part of folder so like everything will be having the modified date so generally that modified date will be available with folder itself okay so next is what is api version here this component will work if api changes with release yeah so that component will be working so right now here you can see the version is 55 and if you have the latest thing latest version so if you create new lightning form component so latest version will be there automatically and right now like greater than 20 versions are supported so that versions will be supported and if a particular version if you're using f and if that is not supported so you need to upgrade that so mangesh like we like if you add multiple html so that will be a problem because only one html would be able to render on the ui so html will be one and css will also be one but we can have more than one css but try to keep only one css file so deepak i will think upon this to create a git wrapper where i can provide all the codes actually i am having less time because i am preparing everything and having full-time job as well so we'll see if i able to create that otherwise we'll share the codes in the practice sheet we'll paste all the codes there so yeah this is nice question langaraju asked the good question how to differentiate main javascript and secondary javascript so this is very good question but for this i need to go back so if you want to identify the main javascript file so main javascript file will be having the same name as your component and additional javascript file will be having the different names so this way you will be able to identify uh yes when we can create a global css as well so i already showed this to you so if you see this component so here i am importing this css lib and the css lib is basically here css lib yeah this one so this is a support component and in this component we have only css and xml we don't have any html and javascript so it is global you can say external css this you can include in any component so here we have imported it like this if you want to import this css lib in in any other component so that is also possible so i hope i'm able to answer your question vinev yes so deepak answered it right i already answered it html should be one and rest of the file like matter.xml should also be one and javascript and css we can have multiple but try to keep only one css if you have lots of code then you can try to create another okay so now moving to one more thing that is namespace so you need to know about namespace so to reference your own component always code with the default namespace that is c so you see regardless of where the code is running in an orc and without or without a namespace in a managed or unmanaged package right so if you have created any component and if you want to use it into another component so here you can see we have this contact tile component so this is a custom component that is created and if you want to use this component into another component so you need to write it like this c-contact-tile so this way it can be referenced into another component okay so these are the basic things that you should know whenever you create any lightning web component bundle so this way we use external files okay so i hope i'm able to answer your basic questions those who are having and if you have more questions you can ask so this is it for today and tomorrow we'll cover a few more things so i'm keeping all the sessions short so that day by day you can learn something new and like self-study is very difficult so that's why i'm seeing a huge response on this bootcamp because this bootcamp is giving you a direction like daily you are having sessions so i'm there and you are watching the session so it gives you a proper schedule so i hope with with the six months you are able to maintain a schedule and in future also sessions will be happening every week so i will try to share all the knowledge which i have and i have few more folks those those who are working in industry they are ready to share their experiences so soon you will be having deployment related sessions qa related sessions so after two weeks like once lwc will be completed so we will be having those sessions so after lwc like most of the sessions will be delivered by other industry people but they will be delivering the content as per the format which i designed so they will be delivering the content in slow pace proper explanation demonstrations will be there so deepak i work as a trainer and developer and i'm working with an architect so i'm learning architect things as well so mangesh yeah this question is already asked so i will create something on this like what is the use of that test so we'll explain you uh yes archana i am searching someone who can explain mule soft unfortunately right now i am not able to have someone for mule soft but surely like soon i will be free with the session so i will hunt for experts so mule soft tableau so these are in my radar so soon i will be having someone who will be delivering content on the those as well okay so today's session was fruitful i can see lots of questions were there and people are asking basic questions and those who are joining and those who will be watching the recording so with the help of these questions they will be able to understand the basic building and these sessions are targeted to fresh audience those who have no experience at all so i hope you are enjoying these sessions and you are having proper basic knowledge to start with particular things and for experienced folks like if you have never worked on lwc but you know so these sessions will be a refresher so vv babu is asking the question so i think uh this these salary related questions if you can ask separately on telegram so i would be happy to answer i won't be able to say anything on this public platform because it depends on your skill set so i will first ask like what skill set you have accordingly i will guide you so i'm doing career counseling as well so if you need something so you can reach out to me on telegram and whenever you reach out so give your basic bio like what you did what experience you have what skill set you have so that it would be easy for me to review your profile and accordingly i will reply back so you can ask questions on linkedin telegram wherever you want and ask questions in dms so it will be easy for me to track yes motion after completion of these basic things i will be targeting on advanced things so it will take some time because like i am doing lots of stuff so once i will be free from session delivery so i just need to search those folks who are expert in different different areas so shortly i will do yes when a cpq is also good thing to learn uh yes amy sent we will be discussing about parent to child even communication child to parent even communication for sure so leotech this this thing i heard for the first time altrix i don't know what it is yeah cpq aksha cpq bootcamp yeah i am searching like ankit who delivered sessions on integration he is learning cpq so if he is ready then he will be delivering otherwise i will try to have someone from industry who is expert in cpq yes rao wankert we will be learning life cycle hooks as well in lwc sessions okay if you have any more questions please ask otherwise i am going to end this session and tomorrow we'll be discussing about decorators which are very much important in lwc and i will explain one proper lightning web component as well where we'll be having html css javascript related code so we'll discuss and if you will be having any doubt you can ask and as a prerequisite like on study sales force i have provided 25 videos so those are related to lightning web component if you want to be ahead from me so you can go through and in the session you can directly ask the questions right so everything is already available so i am just doing a refresher here so if you have not gone through you can join the live sessions if you have gone through you can join the live sessions to ask your doubts right so in both the ways these live sessions will be fruitful for you right so all these things which are available here and beyond this so right now here you can see 23 sessions are available but in these live sessions i will be covering few more things which are not available here yes akshay i am searching someone who can explain cpq because cpq is very vast and i don't have much expertise on that i know but i don't have much expertise so i will try to have someone who have created some content around that okay so this is it for today see you tomorrow same time with something new thank you