 Hello everyone, I am Sanjay Gupta. I welcome you on Sanjay Gupta Tech School. In this video, I am going to discuss how you can decorate property or function with wire decorator. So this I also discussed in my previous video, one of the video. So like if you want to use wire service, so this is the syntax that I demoed in two different videos. So we need to import adapter ID from the module. So it can be predefined module or if you have implemented any Apex class so that method you can also import. And then whenever you want to use this wire decorator, so you need to write at the rate wire and then adapter ID. So this adapter ID will be the identification of the functionality that you want to execute. Then you need to provide the adapter configuration. So adapter configuration means like it can be like you are passing any record ID or you are defining certain fields. And then we have property or function. So this is the thing we are going to discuss now. So in my previous demonstrations, I just use the property. This time I will be comparing both like how to use property and if you want to use a function, so how you can do that. So if we see the last point, so property or function, so a private property or function that receives the stream of data from the wire service. So basically whenever you execute wire service, so the return the result will be available in this property or function. So if a property is decorated with at the rate wire, the results are returned to the properties, data property or error property. So whenever we create a property, so it has inbuilt two properties that one is data and another one is error. If a function is decorated with at the rate wire, the results are returned in an object with the data property and an error property. So now I will be demonstrating this to you like what if we use properties of what happens and if we use functions of what happens and how we can implement this. So jumping to Visual Studio Code where I just demonstrated the previous example. How to wire Apex method so here you can see this class is implemented contact controller which is having with sharing with sharing is for record. Applying record level security then at the rate or enable like we want to use this Apex class in LWC so we need this. Cacheable equals to true so that the returned list will be cached in the client. Then return type is list contact list of contact function name is get contacts and it will be receiving account ID and basis on that this SOQL is framed which will be returning the related contacts with that account ID. Then with security enforced will be like it will be automatically applying object and field level security. So code is written with try and catch so this is Apex class. Now. If I go to JavaScript so in this JavaScript here you can see this method get contacts is imported through this contact controller class and it is available in this get contacts and here that get contacts is annotated with at the rate wire. So this is wire service for Apex method and this is basically a property this contact is a property which will be having data or error. Right, so this context will be termed as property it will be having data and error and how to use it so if if I take you to the HTML file. So this way we are processing it contacts dot data. Right, and this is a loop so one by one each contact will be available in this contact and then we are able to fetch the fields API so that values can be displayed. Right, so this is Apex now I'm going to use one more statement that is important. Get record from lightning slash. You are a part API. Okay, so this you are a part API is a module adapter module and this get record will be considered as adapter ID. And now I'm going to use this as well. So here I'm going to write at the rate wire. Then get record. Right, and after this get record. We just need to pass a parameter so I'm just going to pass record ID. I'm just going to pass the codes dollar and then record ID. Then after comma I need to pass the fields. So in fields I'm passing account dot name. So field name I'm passing as a string. Right. Account name will be fast. And this record ID. I'm passing, which is through this property will be passed, and this properties declared as at the rate API so now if you are following all the videos so I think you, you know, like, if we use at the rate API so this record ID will be public, and it will be fetching the record ID automatically from the record page. So I'm just passing this record ID here with this wire, and I'm passing it here as well. So first wire is basically using the adapter get record and second is using get contacts method that is defined in the apex class. Right, and here also this record is a property, which will be having both data and error. Now I'm going to create a getter like get name. And here I'm going to write return statement so that I can use this report property as well. So I need to first of all I need to write this then dot report. Now you might be thinking why this and I think in previous one of the previous video I like explained this as well. So if you create any property in your JavaScript file, and if you want to use that property in that file only so you just need to use this along with that property. So this dot report dot data dot fields dot name dot value so this way you need to write it. So here you can see with the report we are writing dot data. So through data we will be able to fetch the values. Right and in this apex here I can just write it. Okay, so what I'm going to do in like from previous example I'm just going to have this. I'm just copying and pasting it here. So it will be displaying the name. Right so this getter property name is also name. So name will be displayed so account name will be displayed and then all the related contacts first name last name will be displayed. So this way, basically we can use the property so I just combined both adapter and apex method so that you understand how we can use both together along with the property annotated with like at the rate wire. Right. Now I'm going to show you the results on the UN then I will convert these properties into function so that you can then understand that as well. And before that I just need to deploy it from source to all. So I'm just right click on this component so make sure you deploy right component so that changes will be reflected. So the component is already placed. I'm just going to refresh the page. Okay, it is showing some error so this dot report dot data dot fields. Okay. One thing we need to apply. So whenever you use this thing report dot data. So you need to apply null check as well. So it may possible like this report dot data is null. It is not having any value. So what you can do if you go to HTML. So here, like for context dot data we are applying loop so loop will be checking it for null automatically, but for this I need to apply if condition so if true, and along with I just need to apply the condition. Okay, so this way, I just applied it and this template I'm just cutting and I'm going to place it here. Right, so what will happen this part is enclosed in this condition. So if record dot data is having something then only this will be rendered otherwise not and context dot data is already loop so null check will be applied automatically. Now I just saved this code I'm going to deploy this HTML file again. So this way like I hope now you are able to understand where to apply null check or we're not. So if I go here and do a refresh. This time you will be able to view the component so you can see it is showing a compound name in large text and then we have contact first name last name and contact first name last name. Right, so this way, both the properties are working fine. And now it's time to convert these properties into function. So if you want to implement a function. So how you will be doing that. So I'm just erasing it. Now here I'm writing wired contact, then error comma data. So this is basically function that is decorated with at the rate wire. Now here we can write if data. So if data is available, then we need to store that data into some variable. So here I'm writing context. So what I'm going to do, I'm going to store. So here I need to write this dot context. And here I can just write data. I need to create one more variable that is error. So here I can write this dot error equals to undefined. So if there is data like if this if condition is true. In that case data will be assigned into context and error will be undefined. Then you can write else if error if there are any error. So this dot error equals to error and this dot context equals to undefined. So this way you can write function. Okay, so if you want to do some logic here. So you can use this function function will be like decorated with at the rate wire. Right, so this way you can write. So here I think you now understood the result will be available in data is result is not available in the data. It means there is some error. So that will be available in this error. Now, we declared two more properties like context and error. So this these two properties we can just use on the UI. So what we can do. So here context is already available. Now if you want to check like whether error is available or not so you can apply this template here and simply you need to write error. So here also you just need to write context dot data is not required. Now why so because we already assigned the data into this context property right so earlier what was happening the actual return the value of wire was storing in the property itself. So that is why we use to write property dot data. Now here we segregated data and error separately and then we are checking whether data is available not if it is available then data is assigning into context property. So data is already assigned into context property. So we can directly use context here and one by one contact will go to this contact variable and then first name last name will be rendered. And here for error if you want to build some code so you can. So I just saved this code and I'm going to deploy it to org. So in this case also you will be able to view the same output. So it depends on you whether you decorate at the rate wire with property or you decorate at the rate wire with function. So you can see the same results are available here. So this way I just demonstrated you two different ways like how to decorate property with wire or how to decorate function with wire. And also I tried to have both apex method as well as adapter module so that you can see like how together we can implement both. So these are separately demonstrated in previous videos and also remember one thing these this wire service works automatically so whenever your component loads. So all the wire like wire decorators will be executing automatically and the results will be rendered on the UI if you have written some code in the HTML. So this way I hope you understood the difference between how we can decorate property with at the rate wire and how we can decorate function with at the rate wire.