 Hello everyone. I'm Sanjay Gupta. I welcome you on Sanjay Gupta Tech School. In this video, I'm going to discuss about decorators. Those are available in Lightning Web Component. So we have three decorators that we can use in JavaScript file of LWC. So decorators are often used in JavaScript to modify the behavior of a property or function. We have three decorators named as Adlerate API, Adlerate Track and Adlerate Wire. So let's understand use of individual decorator with the help of examples. So first I'm going to discuss Adlerate API. So if you declare any property in JavaScript and you want to make that property public because by default whatever property you declare, property means variables. So whatever property you declare in JavaScript, so those are local. Local means those properties can be used in the HTML file of the same component where JavaScript file is available. Now, if you are placing your Lightning Web Component on a page, let's say for example, you are placing your Lightning Web Component on the account record page. Now, if you want to get the account record ID automatically in the Lightning Web Component, so what you will do, you will use Adlerate API with the property name so that that property can fetch data from outside Lightning Web Component. So if you want to make a field or property public, so you need to use Adlerate API decorator, then HTML markup can access the component's public property. So if you make any property public with the help of Adlerate API, so those properties you can still use in HTML markup. Then all properties, all public properties are reactive. So reactive means the framework observed the property for change. When property changes value, then the framework reacts and renders the component. So it means if you change the value of that property, so that changed value will be rendered on the UI. And field and property are interchangeable terms. So sometimes we say like property equivalence to fields or variable. So these are interchangeable terms. So don't get confused with these words. So this is the example. So if you declare a property, for example, here we have declared a property as message. So message is annotated with Adlerate API. So this will become a public property. So now message can fetch the value from outside Lightning Web Component. And this value is a private property. So this property we can use inside this Lightning Web Component only. It cannot interact outside Lightning Web Component. So generally, if you want to fetch ID of particular records, so we create record ID property as public using Adlerate API. So that is mostly usable for like, for that purpose, generally we prefer Adlerate API. So that record ID property can become public and we can fetch the ID of particular record outside of LWC. Then next is Adlerate Track. So it observes changes to the properties of an object or to the element of an array. So framework renders the component when changes occurs. Third is Adlerate Wire and it is also used frequently. So generally, whenever you want to interact with your data that is available in your Salesforce Orb. So Adlerate Wire provides a way to get and bind data from a Salesforce Orb. 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. So objects passed to a components are read only. To mutate the data, a component should make a shallow copy of the objects if it wants to mutate. So now we need to understand the syntax of wire so that you understand like how we can use Adlerate Wire decorator. So if you want to use this Adlerate Wire decorator, so there are two ways. Like one is to use wire service for predefined modules and second is to use this decorator for Apex class methods. So the syntax here imports adapter module which are predefined and from that adapter module we will be importing adapter ID. And with the help of Adlerate Wire, we need to pass adapter ID and adapter config. So adapter ID is basically the identifier of the wire adapter. Then adapter module, this is the identifier of the module that contains the wire adapter function in the format name space slash module name. So you need to follow this format. Then adapter config is an object, so a configuration object specific to the wire adapter. Configuration object property values can be either string or reference to objects and fields imported from Adlerate Salesforce slash schema. So when I will be discussing an example, then you will be able to understand this. So next we have property or function. So basically a private property or function that receives the stream of data from the wire service. So you can use either property or you can use function. So if you use a property that is decorated with Adlerate Wire, so the results are returned to the properties data property or error property. So these two will be automatically available with that property. And if a function is decorated with Adlerate Wire, the results are returned in an object with a data property and an error property, right? So this we will discuss in detail while I will be implementing these with the help of some code. So right now if I summarize so adapter ID is basically an identifier, then adapter module will be containing certain functions that you can import. And adapter configuration will be an object and you can reference certain objects and fields that you can import. And property or function will be storing the returned result in form of data and error, right? Now, this is the example one. So here, so I will be explaining two examples. In first example, you will see like I am going to import the predefined adapter module. So here, I'm importing UI record API, right? And prior to that, you can you can see like I'm importing LWC module. And if you are using API and wire decorator, so you need to import them as well, along with lightning element functionality, right? If you use Adlerate Track decorator, so you need to import that as well. So here in this code, I'm using Adlerate API so that that's why I imported API functionality and I'm using Adlerate wire decorator as well. So I imported that from LWC module. Then in second line, I imported get record. So this is adapter ID, right? And from lightning slash UI record API. So this UI record API is a module. So we are importing it and this get record we will be using to get the record from Salesforce or and here in third line, I'm importing account dot name. So this is imported with the help of Adlerate Salesforce slash schema slash account dot name. So account name will be imported and it will be identified with this identifier ID that is account underscore name underscore field. Then we have this class record and this is extending lightning element. Then here I have created one property named as record ID, which is unnoticed as Adlerate API. So this will become a public property. Then this Adlerate wire decorator is used. Here we are passing get record. So you can see get record will be considered as adapter ID that we are passing inside Adlerate wire, right? So get record comma. So which record we need to get. So we need to pass record ID with this syntax and then we need to pass the field. So this records these fields we need to fetch and those returned results will be available in this record. So this record is basically a property because it is not having any curly basis or any other code. So this will be a property. If you use any curly basis and other code, so that will be treated as a function, right? So here I already explained the difference between property and function. So this property like record will be having two things. So you can write record dot data and record dot error because this property will be having two internal property. One is data property and one is error property, right? So this way you can use Adlerate wire decorator to use the predefined modules of Salesforce. Then if we go further, so we have another example where you can see I have implemented a class contact controller and inside this class a function get contacts is defined and this is receiving account ID as a parameter and it is returning a list of contact, right? Then SOQL is fetching some fields of contact where account ID is equals to ACC ID, right? Now here you can see how we can import that function in LWC. So you need to write Adlerate Salesforce slash Apex slash contact controller dot get contacts. So this contact controller is the name of the class and get contacts is the function and that we are importing in this get contacts. So this get contacts will be adapter ID and this is the module now. So this is a custom function that we defined in Apex class. Then below you can see Salesforce less Apex. We are importing refresh Apex and through UI record API we are importing update record. So in previous example we imported get record. In this example we are importing update record. So this way this UI record API is a module which have different functionalities. Then here we have record ID public property because we are using Adlerate API then this Adlerate wire. So again we are passing get records then we are passing the ID and the returned result will be available in this context property which is further having data and error properties. So this way you can use Adlerate wire decorator to work with predefined modules and you can use it for Apex class functions as well. So these are three decorators Adlerate API, Adlerate wire and Adlerate track.