 Hello, everyone. I'm Sanjay Gupta. I welcome you on Sanjay Gupta Tech School. In this video, I'm going to demonstrate the use of Adlerate wire decorator. So in this video, I will be demonstrating the use of wire decorator with Lightning Data Service wire adapter. And in upcoming video, I will be discussing how you can use wire decorator with your Apex class method. So let's understand this concept with importing references to fields. So jumping to Visual Studio Code. So here I have already created a Lightning Web component named as wire adapter demo. So this is HTML file and this is JavaScript file. So first I'm going to implement HTML file. So in HTML file, basically I will be displaying two fields of account that is name and phone. And for that purpose, I'm going to create two column grid so that you understand like how we define SLDS classes, how we can use. So first of all, I'm going to use a dev and using a class SLDS grid. Now inside this dev, like this dev will be creating a grid and inside this dev, I will be dividing that grid into two parts. So having one more dev then class equals to SLDS-column and SLDS-size underscore one-of-2. And then I'm closing the dev. Now inside this dev, I'm using lightning formatted text value equals to and here I'm using a property name. This I will be declaring in the JavaScript file. And here also I'm going to apply a class which is SLDS-text-heading-large. So this way this first block is created. Now I'm just copying this block and pasting it. So here I'm just changing it to two-of-two. So this will be the first column of grid and this will be the second column of the grid. Now here I am going to display phone value. So this way HTML file is created and I'm saving this code. Now I need values in these name and phone property. So for this purpose I will be implementing the JavaScript code. So jumping to JavaScript file. So here I'm going to import a module. So that module will give me two functionality that is get record and get field value. And module name is UI record API. So lightning slash UI record API. So this UI record API is a module. So you can see through this pop up and through this module I am just importing get record and get field value. So these are two functions. So get record will be getting the record if we pass the record ID and get field value can pass the value of particular field. So this way this import statement is written over here. Now as I said you like we will be importing references to fields. So now I'm going to write that statement. So I'm writing import name field from then at the rate Salesforce slash schema slash account dot name. Right. So this way account dot name will be imported and its reference will be available into this name field identifier. Now I'm just copying the statement and pasting it and changing it to phone. And here also I'm writing phone. So two fields I just imported. So actually I'm importing the references and they will be represented with name field and phone field respectively. Right. Now inside this class wrapper adapter demo. I'm going to create property named as a record ID and it is annotated as at the rate API. So whenever we use at the rate API decorator so we need to import it here as well. So this I already demoed in my previous explanation. Now why I am creating this record ID as public property because I will be placing this component on account record page. And I just want that account record ID will be available automatically into this record ID property. Right. Now I'm going to use wire decorator. So at the rate wire. So at the rate wire then we need to pass the adapter. So I'm passing adapter ideas to get record and then inside curly basis. I need to pass record ID. Then colon then inside single quotes you need to write dollar record ID. Then after closing single quotes you need to place comma and then fields and in square bracket you need to write the field name. So here we already imported field reference in name field. So I'm placing it here and phone field. So after comma I'm placing it as well. Right. So here you can see this at the rate wire is written like this. Now we need to write one more statement here. So this is basically a property. So this record is a property. Right. So this at the rate wire will be executing this get record get record will be working on this record ID. And it will be fetching values of these two fields. And every information will be available into this record property. So this way how you write at the rate wire in your lightning web component. Right. Now after this if you want to show the values of name and phone field. So you need to create two more properties named as name and phone. Right. So now I'm going to create them using getter. So this block will be for name and another block will be for phone. So this is another type of property. So we can have two types of property one, which is similar to variable where we can store some value and that value will be rendered on the HTML if we use that property on HTML file. And this property like get getter name and phone. So these properties are like function like property. So here if you want to do some calculation and then you want to return the result of that calculation. So you can write them like this. So these are known as getter property. Now here I need to write the statement. So I'm writing return. Now one more thing I will be writing record this dot record dot data. So what is happening? This record property is declared in this JavaScript file. So if you declare any property in JavaScript and in that JavaScript file itself if you use that property for other calculation. So you need to use this dot. Right. This means this property is available in this file itself. Then this record will be having two things. It will be having data and error. Right. So this is a comment. So it is showing like this record will be having data and error. So we are focusing on data part. Then I'm writing a question mark. So basically I'm using a ternary operator. So before question mark, if I write this dot record dot data. So it means I'm checking whether there is some value available in this record dot data or not. If yes. So I can fetch the value. So what I'm going to write get field value this dot record dot data comma. And then I need to write name field. So I'm just copying and pasting it here. So this is a syntax of this get field value function. And after Poland, I'm writing the single quotes and then semicolon. So this way, this part is the condition this dot record data. If this condition is true, then this part will be evaluated, which is written after question mark. Otherwise, this single quote will execute, which is written after colon sign. So this is basically known as ternary operator. And return will be returning this value to HTML. So here you can see we used this name property. So it will be displayed with the help of lightning formatted text. Right. Now we need to copy this statement and I'm just pasting it over here. And here we need to change this name to. Phone field. Right. So this way, I hope you understood like how we can import references to fields. So here above I imported references of two fields. Name and phone. And those are identified using name field and phone field. And that those I'm using here. So here in this statement I used and here also I used that. Okay. So this way, this code is implemented completely. Now, if I go to matter dot XML, so here you can see is exposed. I already set us true and target I'm using as lightning underscore underscore record page. So I will be placing this component on account report page because these fields name and phone are related to account. If you want to use any other object. So what you can do, you can just change the field API is accordingly. And you can place this component on that particular object as well. Right. So now I'm going to deploy this component from source to work. So it is being deployed. So it is deployed successfully now jumping to the org. So I am going to open the sales application. So here list of account records are available. So I'm going to open any of the record. And then I need to click on this gear icon top right corner then edit page. And then I need to place that lightning web component on the record page. So if I go to bottom to custom section. So here why adapter demo component is available. So I'm just placing it. And here you can see it is showing account name and phone number in two grids. Left side account name and right side phone number. So I'm just saving this page so that on UI you can see how it will look like. So it is saved. I'm moving back. So here you can see account name is available. And at right hand side account phone number is available. And their size is large because we use lightning formatted text. And here class we applied SLDS text heading underscore large. And SLDS is Salesforce lightning design system. So this way I hope you understood like how we can use at grid wire decorator. So now let's jump to another part. So now I'm going to demonstrate you like how we can use objects field through string. So you might be thinking can we use this, this account dot name and account dot phone directly instead of writing these and they may be question like what, what will be the difference then. Right. So let me first implement that. So I'm just commenting these two statements. And I'm going to write. API is directly with the help of string. So I'm writing account dot name and account dot phone. Right. So this way what will happen. We don't need to import the references of APIs because we are directly passing them. And here also I need to write it like this account dot name and account dot phone. So this way also you can use the API names. So I'm just saving this code and deploying it to org. And if I refresh, so you will see no change. Same output will be available. You can see there's no change. Same output is rendering right now. So now you might be thinking like what is the difference between this. This statement like importing reference and using strings directly. So that I will be discussing in my next video. Next video in detail. So I just explained you two different ways like how we can use. API through references by importing them and how we can use API names directly using this string. Right. Now one more thing I need to demo you like here we are using this return statement, which is quite complicated. Like we are using this ternary operator. So you might be thinking like can we simplify this? So answer will be yes, we can. So you can use the statement like this. This dot record dot data dot fields dot name dot value. So this way also you can write this statement. So here we are using get value get field value function in place of this. You can use this statement. Right. But here we are not checking whether this data is having something or not. So that we will be doing on the UI site like an HTML. So here I am just copying it and pasting it here as well and making it a comment. Right. So this way also you can just return the data. And if I go here. So what you need to do here you need to apply a condition. Sorry, not there. We need to use template and then if Poland true equals to and here you need to write record dot data and this template we need to close at the end. Right. So what will happen? This this is a conditional rendering. So if record dot data is having something then only this block will be rendered otherwise not. And this wire will work automatically whenever component loads. So whatever result will be returned into record. So we are returning it from this. So if it is having some data then only that HTML part will be rendered otherwise not. So this way also you can return values of particular field to the HTML file. So I am just deploying it from source to or and here I'm going to refresh the page. So you can see. Okay. So it is showing both place. It is showing account acc 101 acc 101 at both the places. So why it is showing so because here instead of phone I just place name I just copy pasted and didn't modify it. So now I modified it and again I'm going to deploy it. So if I refresh the page so now you will see account name and phone both. So you can see account name and phone both are available here. Right. So this way I hope you understood like how different features we can use to perform the same operation. Now one more thing like you might be thinking can we do. One thing like can we create a collection where the these fields we can store and we can use that collection directly here. So answer will be yes, you can do that. So what you can do you can create a constant property like fields name can be anything. So here you can write these. So I'm writing account dot name then comma account dot phone and here in place of this I can use this constant. Right. So what is happening this content this constant is collecting all the field APIs and here I'm passing it directly. So this is also possible. And if you are importing field references into this name field and phone field. So these you can write here directly in place of these strings. Right. So this way these are different ways to import. Sorry. These are different ways to use these field APIs so that you can get the data from Salesforce or and I hope this way you understood the use of at the rate wire decorator and here this UI record API is module and we are importing get record and get field value functionality. So get record will be getting the record and get field value will be getting the field field value and without get field value also you can get the value of particular field and this name and phone is data property and wire will be working automatically whenever component loads and API is denoting like this record ID is a public property. So this is all about wire decorator. Thank you.