 Hi everyone. I am Sanjay Gupta. I welcome you on Sanjay Gupta Tech School. So today we are going to have day 82 of the Salesforce Learning Bootcamp. So today also we are going to discuss about Lightning Web Component and this is part 5 of Lightning Web Component. So till so far I have explained you lots of concepts related to Lightning Web Component. So this week also I will be exploring some new concepts in front of you so that you can practice and learn those things. Okay so let me start the session. So first of all I just welcome everybody those who are watching this session live and welcome to those as well who are watching the recording. So moving forward if you are watching this session for the first time on this channel and if you want to know who is your instructor so you can go through with this slide. So here everything is written about me right. So just go through this and be consistent because consistency is the key. So please do regular practice if you want to really learn Salesforce and Salesforce learning is very big and you need to learn different different modules and it will take lots of time. So consistency matters a lot if you want to become a good Salesforce developer or if you want to go with any role. So if you want to become part of a community where lots of beginners are connected those who are trying to make their career in Salesforce ecosystem. So I just created this telegram group so that they can discuss all their doubts. So if you have not joined this telegram group so you can join and become part of that community. So this is updated bootcamp timeline. So here you can see we will be having two more weeks for LWC. So right now we are in week 25 so I will be delivering couple of sessions this week and next week I will be completing all the sessions related to LWC. After that deployment related session will happen and then if you are curious to know like what happens in QA how we can ramp ourselves as a QA resource and everything whatever you want to know about quality analyst role. So one of my friend who is working as a QA in an organization so he will be delivering his experience like what QA does what you need to learn if you want to become a good QA. So all those things will be explained by him in week 28 29 and 30 and after these QA sessions I will be having sessions on business analyst role. Right and side by side with these QA session I am going to start one more bootcamp that will be related to Salesforce Omni Studio. Right so within two weeks time so maybe like by the end of this month or beginning of next month you will see one more like different bootcamp that will be based on Salesforce Omni Studio and Omni Studio is very demanding nowadays if you talk about Salesforce industry clouds right. So these are the updates for upcoming weeks now moving forward if you want to receive all the session reminders or you want to receive all bootcamp updates. So just follow Sanjay Gupta Tech School on YouTube, LinkedIn, Instagram, Telegram and all the links are available in this video description. So you can follow it from there also and please share a review or feedback about the bootcamps whatever is going on. So right now Salesforce bootcamp is going on. We are having like this is 82 session like date 82 today I am conducting apart from that I am running C and C++ bootcamp and this week like you will be having first session of Appian bootcamp. And as I told you soon like within two three weeks we are going to start Omni Studio bootcamp as well. Right. So I hope with this with these bootcamps you are day by day growing your knowledge and learning new stuff and few folks are asking about cybersecurity things as well like what happened to cybersecurity. So there was less audience. So that's why we stopped those sessions. But Sumit is working hard to relaunch cybersecurity bootcamp with a different way and he is working on DevOps as well. So let's see he will be available for cybersecurity or DevOps. So accordingly one more bootcamp from next month will be starting. Okay. So with this note jumping on today's topic. So today we are going to discuss about work with Salesforce data. Right. So in this session you will understand three things like three different options with which we can interact with Salesforce data. So in depth I will be explaining only one topic that is lightning data service and the rest of the two things like wire adapter and apex I will be explaining tomorrow. So first of all we need to understand like how we can interact with Salesforce data. If you are working on lightning web component right because this is very much important if you are working on lightning web component. So you need to know how you can interact with Salesforce data. Right. So here you can see lots of steps are written. So basically we have three different ways. First one is lightning data service. Second one is wire adapter and third one is apex. So basically lightning data service is the easiest way to use a base lightning components. So I will be talking about what all base lightning components available in Salesforce that we can use as part of lightning data service. But if you want to apply more flexibility so you can use a lightning data service wire adapter directly. So for these wire adapters you don't need to use lightning base components. Right. So lightning data service has two options. Either you can use lightning base components and otherwise you can use wire adapters as well. Okay. So today we'll be discussing like how we can use base lightning components on lightning data service and wire adapter. I will be explaining tomorrow. Then each wire adapter basically provides different data and metadata that we'll be discussing later on tomorrow. The wire service provisions the data and metadata to your component. So this is about second thing that is wire adapter. Okay. And third is apex. So if lightning data service is not enough then you can connect your apex code with lightning components lightning web components. Okay. So there are three different ways to connect your lightning web component with Salesforce data. So first is lightning data service with the help of base lightning components. Second is lightning data service using wire adapters and third is apex class. Right. So I hope with this explanation whenever any interviewer ask you so you will be able to explain these points properly. So moving forward if you want to if you really want to know what base lightning components are and how we can use lightning data service wire adapter and function. So here you can see base lightning components are like lightning record form lightning record view form and lightning record edit form. So these are basically base components. So we have to use these in our HTML file. Right. So these these three lightning base sorry base lightning components we need to use in an in our HTML file. And if you are using all these three options all these three components so you don't need to write apex code. Right. Without writing apex code you will be able to fetch your data. You will be able to create records. You will be able to edit the records. Right. So this is the first option. Now if you come to the second option which is use lightning data service wire adapter and functions. Right. So this is another option and here you don't need to use base lightning components. Instead you will be importing predefined modules. Okay. So all the modules are available under this lightning namespace. So you will be importing them and with the help of those modules you will be able to interact with Salesforce data. And lastly we have apex class. So if lightning data service base lightning components and wire adapter and functions are not not helpful in interacting with Salesforce data. In that case what you can do you can write apex code and that apex code you can connect with your lightning component. Okay. So I hope with this explanation you are able to understand the difference between these three options which are available. Right. So as per the requirement you will be using any of the option that is useful. Now let's move ahead. So now I'm going to show you like how we can use lightning data service. So in today's session I will be focusing on lightning data service with the help of base lightning components only. Right. So basically lightning data service manages data for changes to a record are reflected in all the technologies built on it. So whereas data from apex is not managed you must refresh the data. So this is the advantage of using lightning data service. So whenever actual data changes so automatically lightning data service will be fetching the refreshed data. But this is not so with the apex if you are using then lightning data service does a lot of work to make code perform well. So this is very important for you to understand all these four points. So basically here like if we talk about lightning data service advantages. So in the list there is first one which says loads record data progressively. Right. Second is caches results on the client. So I think with the with the statement you are able to understand the advantages of lightning data service. The next in the list we have invalidates cache entries when dependent Salesforce data and metadata changes. And fourth one is optimizes server calls by bulkifying the do the doping request. So if we have multiple requests to fetch the data so they will be clubbed together and like bulkified server calls will be there. So these are the advantages if you are using lightning data service. And generally we prefer lightning data service because for this we don't need to write any apex code and it is very easy to write and use. So with this diagram you can just relate. So on top we have a lightning web component so end user basically interacts with the lightning web component with the help of browser. Then lightning web component basically passes instructions to like lightning web component will be having lightning data service implemented. So with the help of lightning data service instructions will go to the user interface API. So this user interface API will reside with server and with the help of this UI API we will be able to access the data from database. And whatever data we are going to access that will be that will be made available to lightning web components. So you can see all the arrows are bidirectional. Okay, so we can push the data into database and we can fetch the data from database with the help of this lightning data service. So now we need to understand how we can work with records using base components and it is very easy actually. It is very easy to understand, right? So now I'm going to show you everything with examples. So we'll be discussing lots of examples now one by one. So remember I'm going to discuss about how we can work with the records using base components. So lightning data service is having three base components and those three base components are available in front of you with the help of this table. So if you focus on this table, so here we have a comparison between lightning base components. Okay, so we have three base components. First one is lightning record form, then lightning record view form, then lightning record edit form. Okay, and on left hand side we have certain features. So if we see all the features, so here first one is create record. So create record feature is available with lightning record form and lightning record edit form. So with the help of this table, I am sure you are able to understand how these features are available with particular base component. Okay, so if we talk about edit record, so it is also available with record form and record edit form, then view record is available with record form and record view form. So some are available with lightning record form like create, edit, view, all are available with lightning record form. But with lightning record view form and lightning record edit form, few are available and few are not available. And if we go down, so these three things, not three, two things, custom layout for fields and custom rendering of record data. These two options are available with lightning record view form and edit form. These are not available with lightning record form, right? So these are base components. So whatever settings are available, you need to use them as is because they are standard. Okay, so we are going to discuss all three base components with the help of example and they are straightforward. So I will be explaining all the examples to you and whenever you have time, so you can practice those examples in your system so that you can understand how with the help of lightning data service we can interact with Salesforce data. And again, like I think this we already discussed, so I am just skipping this slide. So now first one that we need to understand is load a record, how we can fetch the data, right? How we can fetch the data. So this I am going to discuss with you with the help of this example. So here you can see we need to display a record using lightning record form. Okay, so with all the examples, if you go with the heading, so you will be able to understand which base component we are using. So here we are using lightning record form. So this is the syntax. So it is similar to HTML element, right? So this is a base component, which is lightning specific. So lightning record form and here we are passing record ID, we are passing object API name, we are passing fields and record ID object API name and fields. These are properties. So I am sure everybody knows who are following this bootcamp. These properties will be available in the JavaScript file, right? So what you need to do, this code you will be implementing in your HTML file. So I am going to explain you one example, right? I will be implementing one example in Visual Studio Code so that I can show you how it will run. So I am just copying this code. And in Visual Studio Code, like in this demo LWC, I am going to paste this, right? So I think now it is more readable to you. Okay, it is more readable to you. Now we need JavaScript file. So here is the JavaScript file. So in this JavaScript file, you can see we have created a record ID, right? We have created a record ID property, which is having at the rate API. We have object API name, which is also having at the rate API. So these two are public properties. So basically this component, we will be placing on the record page. So from that record page, this record ID and object API name will be fetched automatically into these two properties and fields. We are defining here account ID, name, title, phone and email, right? So with this note, I am just copying this code and I am going to paste it in the JavaScript file. Okay, so this is available here. Now I am going to save it. I am going to save HTML. If I open XML, so here you can see it is available for home page and record page. So this way you will be implementing your component, right? So once your component is implemented, so here you can see these fields are basically specific to contact. So I will be placing this component on contact record page so that these field will be having some data, right? So whatever fields you are specifying, accordingly you need to place that component on particular record page. Okay, so object API and record ID will be fetched automatically. And basis on that, this lightning record form will show the data on the UI. Okay, now I am going to deploy this. So deploy source to org and I have not opened the org. So I am going to open it. So if you have not opened the org and you want to open the org which is connected with your VS code. So here at the bottom, you can see this open org option is available. So you just need to click on it and your org will be opened automatically. Okay, so I think there is some issues. Okay, so right now this org is not getting opened. So let me try to open it manually. So I am just typing login.salesforce.com and let me just check which org it is. Okay, so let me just try to authorize an org. So we have a bootcamp org. So I am going to connect that right now. So basically it is opening here in the different browser. So I am going to authorize it. So I just need to pass the verification code. So I am going to put it just be with me. So I am going to type the verification code. So it is being verified. Yep, so here we have NetNewOrg which is connected with our Visual Studio code. Okay, let's check whether it is available here or not. So I am just opening the... Okay, so I just need to open the contact. So I am going to open sales application. So under the sales application on contacts, I am going to place that component. So I am going to open the contact. Here I am going to edit this page. Here you can see demo LWC is available and I am going to place it here. And I am going to save it. It is asking for activation. So right now I am making it as org default. You can activate it for specific application as well. So now I am moving back. So here on the top right corner, you will see that component. So here you can see this is the component which we placed right now. And it is having a contact name, title, phone number and email. And all these details are already available on this contact. So on this contact record page, if you want a small component, where you want to show specific details. So for this purpose, you will be able to use that component which we implemented here. So this we created using lightning record form. And here we are passing record ID, object API and fields. And you can see these are public properties and which are having values automatically if you place this component on the record page. So fields are basically specific to contact. That is why we placed it on contact record page. So if you modify these fields, so you can place it this component on that particular object as per the fields you will be specifying. Okay. So I hope with this example and demonstration, you are able to understand it. And anytime if you see any question, you can just paste it in the comment section or in the chat, in the live chat. I hope with this note, you are able to understand this example. Now we have one more example. So I'm going to copy it and pasting it in the visual studio code so that it will be more readable. Okay. So here you can see this code is available. So this is another example. And here we are using lightning record view form. Okay. Here we are using lightning record view form. So record ID, we are assigning property object API. So here we are specifying this API directly, that is account. So right now this component is specific to account. You cannot place it on any of the record page, right? Then here we have div is having classes. So these are predefined classes, CSS classes, right? Then we have lightning output field, field name is name, phone. So these are API names. Then we have industry, annual revenue. So all these are API names, right? So this way custom UI we have created with the help of lightning record view form. So this is also possible. So if you want to create, if you want to display a record with a custom field layout. So in previous example, layout was coming automatically in this lightning record form. Layout will come automatically. But in this, you can create a custom layout. Okay. So here what is happening? We are specifying like your page will be divided into two columns. So in one of two, these name and phone will be available. In another one of two, this industry and annual revenue will be available. Okay. So this way your code will work, right? Now we have JavaScript code as well. So you just need to implement this. So I think we just need a record ID. We just need record ID. So from here, you can remove these two statements. So we just need record ID and basis on that record ID. Particular record will be viewed. Object API is already available. Field APIs are already available. So that's why from JavaScript, we just need to have record ID. So this component you need to place on account record page. If you place it on account record page, so it will work and accordingly your UI will be visible. Okay. So I leave this on you and I hope you will be able to implement this. So I'm just showing you whole code so that you can implement it yourself. Right. So now I'm going to show you slides one more time so that if you're watching the recording or you are implementing with the help of this video so that you can pause it and you can have the complete code in front of you. And don't just copy paste. Just try to write all the code yourself so that you can go through what exactly things are implemented in the code. Okay. So this is the example. This is the second example. So it is for also load a record. And here we are using lightning record view form. This is the JavaScript file that you need to implement. Then next is editor record. So this is also simple and to add it a record with fields from a layout using lightning record form. So again, lightning record form we are using. So lightning record form we used for load a record. Now we are using it for editor record. So it can be used for both the purposes load as well as edit. So here you can see lightning record form. We have record ID. So this is a property public property then object API name. This is again public property then two column mode will be added and layout type is compact compact means whatever fields are available in your compact layout. Those field will be displayed with this layout. Okay with this lightning record form your compact layout whatever compact layout is available that will display. And if we go forward so here you will see JavaScript file. So in JavaScript we have two properties record ID and object API name and this component is generic. You can place it on any of the object any of the objects record page because here you can see record ID and object API both are dynamic. So it will be received from the UI when you will be placing this component on the record page. Both are public properties. Right. So this way if your record page is having compact layout whatever fields are there they will be available with this layout in edit mode and in two columns. So just try to implement this code with the help of VS code. So this is the HTML code. This is the JavaScript file then drag it. Sorry deploy it to your org and then place it on different different objects record pages. You will see the same component will be working for different different objects record pages. Okay. Next we have one more thing that is so in previous example what is happening we are using layout. Now if you want to use specific fields with lightning record form so that can also be done. So here we have lightning record form object API name record ID then we have fields. So here we can pass the fields. So what you need to do you just need to create fields. So here we have different way to fetch the fields. So we are not writing fields API directly. Instead we are fetching them from the schema. Right. So all field APIs we are fetching from the schema. So what is the benefit of fetching these fields from schema and using it because if you are trying to change the API or label of these fields so if they are referenced here so there will be an error message displayed. Like if you are trying to update anything in these fields so these fields are referenced here so you want to be able to modify them but in place of these reference if you don't import them and if you use those API directly in form of string so in that case if you modify your field API then no error will come. So this is the best way to use the fields referenced in lightning web component right and whatever field you are like importing so here you just need to use a particular name and identifier it can be anything right and whatever you write here on top so the same name you need to use below so here we are creating fields list where we are passing account field name field title field phone field and email field right so this way these fields collection is created and if you go back so here we are using these fields. Okay so this is another way to fetch the field if I take you back to the first example that we discussed so here you can see we are using field API directly in form of string so on back end if you modify your field API so this code will break okay this code will break so every time don't use these field APIs directly instead you can import them like this and then you can use them and if you modify something on the field so if code like there are chances code will break so you won't be able to modify that particular field okay so this is another example so again this is the HTML code that you need to implement and this is the JavaScript code that you need to implement and then you will be able to test it okay and these fields are also related to contact so you will be placing this component on contact record page okay so I hope with this you are able to understand whatever I have explained so far so these are very easy and here you can see anywhere we have not used any apex code so everything we are doing with the help of lightning data service base lightning components so if you move forward next we have lightning record edit form right so if you want to create a custom layout using lightning record edit form so earlier we saw lightning record view form where we can see the data but we cannot edit the same code we modified with the help of lightning record edit form so we have object API we have record ID then the code is same for name title phone email then here we have a submit button as well right so this also you can implement so whatever changes you will be doing if you click on this submit button so automatically you are saved in your your edited information will be saved okay so this code you need to implement and in the next slide you will see the JavaScript code so here you can see we have record ID and object API as a public property so these public properties we are basically using here on top but if we talk about the field so these fields are also specific to contact but if these field APIs are available on any other object so you can place this component on that particular record page as well okay so this is another example that I discussed with you so I hope you will be implementing it as part of practice now third is create a record so what we did so far we understood how we can load a record load means we can query second we saw how we can edit the record so whatever object field you are using so those will be available in the component and you will be able to modify those field values and whenever you save that change so it will reflect actual record as well in the or then last we have create a record so in create a record like we again have two options one is lightning record form and second one is lightning record edit form so in case of creation so we won't be using lightning sorry we won't be using record ID so here you can see only we have two things object API name and fields we don't have record ID so if you don't have record ID with lightning record form so whatever form will be available through that you will be able to create new records okay and here we have one event as well that is on success and with this event we have we have this function connected handle account created so if you create a record if you create a record so this function will be executed automatically and if you want to perform any operation so you can write the code in this function so here you can see three fields I have imported account so first I imported object API then two fields account name and website and one event that is platform show toast event that I imported now if we go down so here you can see in this property account object I am assigning account object that I imported then in my fields this is again a property where I am assigning name field and website field those I have imported above above and so this account object and my fields we are using here account object and my fields we are using here so we are setting values in the JavaScript and this is handle account created so what will happen whenever your account record will be created so on success if it is successfully created so this function will run and it will dispatch an event and it will be creating a new toast event and this is the title and message and variant so this is a syntax title you can set as per your convenience then whatever message like success message and the text will be displayed automatically variant we are assigning as success so green toast message will be available whenever record is created okay so this way these two files you need to create in lightning web component and with the help of those you will be able to test it out and this is another one so if you want to create a record with custom field layout so for that again you can use it so this we also saw in view and edit now if you want to create a record so again lightning record edit form object API name then on success then we have divs so we have one of two so in this diff we have lightning input field so right now these are input fields these are not output fields and here we are using name field and website field so these are properties okay so these properties are defined here name field and website field so these are connected with your actual field so whenever you will be filling something so through these name fields your data will be stored in your actual name and website field on account object account record okay so this way you can create you can write this code and if you implement this you will be able to execute so here in the second div we don't have any lightning input field so if you want more fields you can create them and accordingly you just need to modify this code so just just try to put some more fields other than name and website here so that you just need to modify your HTML as well as your JavaScript code and you will be able to understand and whenever account is created so we are calling handle account created so here you can put that code this dispatch event code you can put as is here as well so whenever your record is created so your toast message will be displayed so Rajiv if you want to add those logics so similar to this like you need to add those with the help with the help of these events so we have on success now if you want to see more so what you can do you can go here in your lightning component library and here you can search for those so we have lightning record edit form so if you open it so here you will see everything so this is Salesforce official document and here you will find different different events so here you can see it is showing for on success I am checking for other events as well if they are demonstrated yeah so here you can see we have no here we don't have any other event so above I think they just explained theoretically and you just need to implement them practically so they just showed on success right so we have on save as well which is not shown here let me just open this record form yeah so here you can see we have one on submit so Rajiv I am going to answer your question you are saying like if you want to apply some conditions so here you can see we have this on submit so on submit you are calling this function and this way your logic you can define so on submit if you want to apply something so you can just write it here okay so this way like I just gave you some introduction so that you can understand how we can use these lightning base lightning components so all these are available here lightning edit form lightning record form lightning record view form so you can open you can search them in this lightning component library and detailed explanation is available here so this is source of truth so whenever I need to implement these so I just take help from these because here theoretical explanation and all the examples are given so you can you can just open these and you can practice from here as well okay so for your reference purpose I am just sharing this link with you so that you can also go through this okay so with this note I am just ending today's session here only so tomorrow I will be exploring in front of you lightning data service wire adapter and apex so apex wire adapter so kind of we already discussed in the beginning but right now we are talking working with Salesforce data in detail so tomorrow I will be focusing more on those two things right so I hope with that explanation or exploration you will be able to understand how we can use them right and I am showing you all the resources as well because if you want to become hardcore developers so you just need to refer to the Salesforce official documents as well where all the descriptions related to topics and examples are available okay so thank you so much for joining today's session see you tomorrow same time with new topics thank you everyone bye