 Hello, everyone. I'm Sanjay Gupta. I welcome you on Sanjay Gupta Tech School. In this video, I'm going to discuss about question answers related to LWC. So first question is, what is LWC? So LWC stands for Lightning WAP Component. LWC is an implementation of the W3C's WAP component standards. So W3C basically stands for World Wide WAP Consorium. It supports the part of the WAP components that works in browser and adds parts supported by Salesforce as well. Quick component development because developer has to use only HTML, CSS and JavaScript. So these three files we need to manage while implementing LWC. Next is Lightning WAP component files. So if you are implementing any Lightning WAP components or what files should be there. So we will be having HTML file, JavaScript, CSS, and one more file that will be .xml file. In this file, we need to write the components configuration like where you want to use your component and other supported stuff. So here test is the name of the component and further it is having extensions. What is LWC module? LWC uses modules to bundle core functionality and make it accessible to the JavaScript in your components file. The core module for Lightning WAP component is LWC. Begin the module with the import statement and specify the functionality of the module that your component uses. So for example, when we implement any Lightning WAP component, so we write import, then in curly basis we write Lightning Element from LWC. So here LWC is the module and Lightning Element is the functionality that we are going to import. What is the use of XML file? So this file defines components configuration like where developer can use the Lightning WAP component. So in this file, by default, this is exposed option is false. But if you want to use your component outside like in your org or somewhere like home page, record page, app page or screen flow. So in that case, you need to change that false to true. So this expose should be true and then you need to define the targets. So here two targets for demo purpose available like home page, record page. So it means if you write these two statements, so your Lightning WAP component can be placed on home page or record page. Can Aura component contain Lightning WAP component? So answer will be yes. Can Lightning WAP component contain Aura component? Answer will be no. Can a Lightning WAP component call another Lightning WAP component? So answer will be yes. We can have parent child relationship while implementing Lightning WAP component. What is the difference between camel case and kebab case? So LWC match WAP standards wherever possible. The HTML standard requires that custom element names contain a hyphen. Since all LWC have a namespace that's separated from the folder name by a hyphen, component names meet the HTML standard. For example, the markup for the Lightning WAP component with the folder name widget in the default namespace C is C hyphen widget. So this way we write a markup in the Lightning WAP component. So this is basically kebab case notation. So however, the Salesforce platform doesn't allow hyphen in the component folder or file names. So when you create any Lightning WAP component, so the name of that component should not be having any hyphen. So it always follows the camel case. So what if a component's name has more than one word like my component? So you can't name the folder and file my hyphen component. So it is wrong, but we do have a handy solution. So use camel case to name your component like my component. So here first word is small and second word, first letter is capital. If we have one more word, so its first letter will be capital. So camel case component folder names map to kebab case and markup. In markup to reference a component with a folder name my component use C then hyphen my hyphen component. So this is the difference between kebab case and camel case notation. What is decorator? Decorators are often used in JavaScript to modify the behavior of a property or function. So we can use three decorators at the rate API, at the rate track, at the rate wire. So at the rate track, basically in initial days of lightning web component used for declaring any property as private. But right now, if you don't use at the rate track, then also you can declare a property. Whereas at the rate API is for public property and at the rate wire we use to call some functionality that is predefined. Or if you want to call any apex class method so you can use. So now let's understand them in detail. So what is the use of at the rate API decorator? So it marks a field or property as public HTML markup can access the components public property. All public properties are reactive. So reactive means the framework observed the property for change. When property changes value that the framework reacts and renders the component. What is the use of at the rate track decorator? So it observes changes to the properties of an object or to the elements of an array framework render the component when changes occurs. What is the use of at the rate wire decorator? So it provides a way to get and bind data from a Salesforce org. Now how to implement conditional rendering in HTML if you are implementing lightning web component. So you need to write template then if Poland true equals to and then this is a property which will be declared in JavaScript file. And if it is true then this true block will be evaluated and rendered on the UI. The next template is having if false and same property or details visible. So if it is false then only it will be rendered. So anyhow, if we are using the same property for true and false so either it will be true or false. So accordingly the result will be rendered on the UI. How to render list in HTML. So you need to use four column each and this context is a property. So this is a list which will be having more than one context then one by one contact will be available in this contact variable. So for item is for that. Then we have list item which will be displaying contact name and contact title. And here for list item we need to define the key. So here ID we are defining as the key. How to write expression in component. So here you can see we have both HTML and JavaScript file. So in HTML we have this item name as a property which is enclosed in curly base. So you just need to write the property name and it should be enclosed in the curly basis and you need to declare the properties in the JavaScript. So if we compare this with aura, so in lightning aura we declare attributes in HTML and then we set the values in the JavaScript and then we render them with the help of components markup. So but here property means attribute or variable. So this property we declare in the JavaScript and we can use it in HTML. And at the rate API is denoting like this item name is a public property. It can be accessed outside the LWC. How to call controller function in component. So here you can see in HTML suppose lightning input markup is used. So here type is checkbox label is show details. And we have an event that is on change. So on change is calling handle change. So this way we call the functions that is defined in JavaScript. So below you can see JavaScript code which is having handle change function defined and inside that block you can write the code. What is the use of at the rate or I enabled which is having cashable equals to true in parenthesis. So I enabled annotation exposes the method to lightning components and caches the return the list to the sorry on the client. What is life cycle hooks. So lightning web components provides methods that allow you to hook your code up to critical events in a component's life cycle. So these events include when a component is so basically constructive will work when a component is created connected callback will execute whenever your component is added to the DOM. DOM means document object model. Then when your component rendered in the browser surrendered callback will be executed. There are any errors or error callback. If you remove your component from the DOM so disconnected callback will be executed. What is life cycle flow. So first of all, so here we have two things like parent and child component. So if you have paid parent child relationship so first parent constructor will be called then public property value of parent updated. Then parent inserted into the DOM. Then connected callback called on parent then parent rendered then constructor called on child proper public property value of child updated. Then child inserted into the DOM then connected callback called on child child rendered then rendered callback called on child and then rendered callback called on parent. Life cycle flow that you need to remember if it is asked in the interview. Next question is what are three ways to work with Salesforce data. So we have three different ways. So first is we can use lightning based lightning components built on lightning data service. So these are lightning record form lightning record view form lightning record edit form. Next we have use lightning data service wire adapters and functions. So here we use lightning slash then UI then asterisk will be replaced with particular functionality. So maybe like lightning slash UI record API like that. So this module we need to import and then we can we can use this predefined module and its functionality. And if it is not working and you want to use apex so that is also possible to interact with your Salesforce data. Now what is lightning data service. So lightning data service manages data for changes to a record are reflected in all the technologies built on it. Whereas data from apex is not managed you must refresh the data. So when you use lightning data service so you don't need to write any apex code. But if you want to customize the predefined implementation then anyhow you need to write apex code. So lightning data service does a lot of work to make code perform well. So it loads report data progressively caches results on the client invalidates cash entries when dependent Salesforce data and matter data changes. Optimizes server calls by bulkifying the D doping requests. Now base component comparison so we have lightning record form lightning record view form lightning record edit form. So features like create record so we can do with lightning record form and lightning record edit form we cannot do it through lightning record view form. Then add it same then view record we can do with lightning record form and lightning record view form. This cannot be achieved through lightning record edit form. Then read only mode is also available with first two layout type is available with only lightning record form multi column layout is available with all of three. Custom layout for field is available for record view form and record edit form custom rendering of record data is also available with the record view form and record edit form. What is wire service so the wire service provisions and immutable stream of data to the component. Each value in the stream is a newer version of the value that precedes it. Objects passed to the component are lead only to mutate the data a component should make a shallow copy of the objects if it wants to mutate. Now wire service index so this is very simple you need to import adapter ID from adapter module. Then you need to write at the rate wire then you need to pass adapter ID and the adapter configuration, then you need to use either property or function. So everything is written over here so what is adapter ID, it is an identifier. The identifier of the wire adapter, then adapter module so the identifier of the module that contains the wire function in the format name space or module name. So this adapter module can be a apex function or it can be a predefined module. So anything you can use here. Then what is adapter conflict so it is an object so a configuration object specific to the wire adapter. Configuration object property value can be either string or references to object and fields imported from at the rate Salesforce slash schema. Then lastly we have property or function so a private property or function that receives a stream of data from the wire service. So the whenever wire service execute so the returned information or data will be available in this property or function. If a property is decorated with at the rate wire, the results are returned to the properties data property or error property. If a function is decorated with at the rate wire, the results are returned in an object with a data property and an error property. Why to import references to Salesforce objects and fields. So when you use a wire adapter in a lightning slash us to escape a model, we strongly recommend importing references to object and fields. So Salesforce verifies that the objects and fields exist prevents objects and fields from being deleted and cascades any renamed objects and fields into your components source code. It also ensures that dependent objects and fields are included in chainset and packages. If a component isn't aware of which object it's using use string instead of imported references use get object info to return the objects fields. All wire adapters in the lightning us to escape your module respect object crud rules field level security and sharing. If a user doesn't have access to a field it isn't included in the response. Now how to import references to Salesforce object and fields those are available here. So you need to write import then position object this is identified then from the net rate Salesforce slash he must last position underscore underscore C. So this way this custom object is imported then account is standard. Then custom object and custom field then standard objects standard field, then relationship field then like through relationship field also you can import particular field. How to get current record ID in lightning web component. So you need to create a property named as record ID and decorate it with Azure API decorator. So if you decorate it with Azure API decorator so that property will become public and public properties can interact outside lightning web component. How can we deploy lightning web components so we can do it through chain set and migration tools gear set co part or other migration tools. Communicate with events and LWC so lightning web components dispatch standard DOM events. So components can also create and dispatch custom events. You can use events to communicate up the component containment hierarchy. Create and dispatch events in a components JavaScript file to create an event use the custom event constructor to dispatch an event. Call the event target dot dispatch event method to listen and even use components HTML template to handle events define methods in the components JavaScript class right so if you want to use events and LWC so these things you need to remember. What is the use of lightning message service so to communicate between components within a single lightning page or across multiple pages. Use lightning message service to communicate over a lightning message channel. The advantage over pops up module is that masses channels aren't restricted to a single page. Any component in a lightning experience application that listens for events on a masses channel updates when it receives a message. It works between lightning web components or components and VF pages in any tab or in any pop up window in lightning experience. Use of pop-up module so in containers that doesn't support lightning masses serving use the pop-up module in a published subscribe pattern one component publishes an event other components subscribe to receive and handle the event. Every component that subscribes to the event receives the event the pop-up module restricts events to a single page where we can use lightning web components so we can distribute components on app exchange. We can use components on lightning app builder flows experience builder utility bar create component for outlook and Gmail integrations quick actions standalone or apps visual force pages custom tabs. So these were some question and answers related to LWC there can be more questions. If I found some more questions I will be creating one more video for the remaining questions. Thank you.