 Hello everyone. I am Sanjay Gupta. I welcome you on Sanjay Gupta Tech School. In this video, I'm going to demonstrate one more demo based on wire decorator. This time I'm going to wire Apex class method. So let's jump to Visual Studio Code. So first of all, we need to implement Apex class as the topic is we need to wire Apex method with the help of wire decorator. So I'm just expanding this class from here. So in my Visual Studio Code, my project Sanjay Gupta Tech School is already open. So like in every demonstration, I'm using this project. So inside that project, you can see here we have a classes folder and here all the pre-implemented classes are available. Those are already available in the org. Now, if I want to create new class, so I can simply right click and I can select create Apex class. So here I have already created a class named as contact controller. And in this class, I will be writing the code. So what I'm going to do, I'm going to call this Apex class method in lightning web component with the help of wire decorator. So public with sharing class contact controller. So public means it will be accessible publicly. Then with sharing means with sharing basically here are denoting record level security. So if you write with sharing, it means the user who will be accessing this class or running lightning web component. So the records will be accessed based on the sharing or access of that particular user. So if that user is having access to particular records, so those reports will be available, otherwise not. So here I'm going to implement a method. So before that, I'm using this annotation, which is at the rate or enable and inside bracket, I am writing cacheable equals to true. And then I need to define the method. So here you can see this whole syntax is available by default, like public static then string method name and then try and catch block. Right. So before method, I just wrote at the rate or enabled. So first you need to understand what is the meaning of at the rate or enable. So at the rate or enable is an annotation, which is basically used. If you want to call a method of apex class in lightning web component. So if you have already gone through lightning or a component. So in lightning or a component, also if you want to call apex class method. So before that method, you need to use or enable. So here in LWC also, if you want to call any apex class method in LWC, like lightning web component. So that method should be annotated with at the rate or enabled. Then we have cacheable equals to true. So if you write this, it basically helps you to caches the list of like particular object that you will be returning. So from here, I'm going to return list of content and method name will be get contacts. Right. So public static, then list of contact. So list will be returned and it will be caches on the client and method name is get contacts. And here I'm going to receive one string as a CC ID. So I will be fetching the account ID, like I will be getting the account ID and basis on that account ID. I will be fetching the contacts, all the related contacts. Right. So here you can use trycatch. If you expect like there will be any runtime exception, runtime error in the code you are writing. If you think like there is no, there will be no exception. So you can just remove this trycatch block as right. So here I'm going to write return and inside return. I'm going to write the query. So select account ID, ID, first name from contact where account ID equals to ACC ID. Right. So this is our SQL. So I am just fetching account ID, ID and first name from contact where account ID. So this account ID is available on contact record. So that account ID is equals to this ACC ID. So for example, if I'm passing particular account record ID to this ACC ID. So all the related contacts to that account ID will be fetched and they will be returned. And here I'm writing one more statement that is with security underscore enforced. Right. So I earlier explained you about with sharing. So with sharing works for record level security. Right. So if you write with sharing, it means record level security will apply. Now if you want to apply object and field level security as well. So you can write with security enforced. Okay. So this way I just implemented my contact controller, which is having a method named as get contacts. It will be receiving an account ID and through that account ID, all the related contacts will be fetched and they will be returned in form of a list of contact. So this is my apex class. Now I need to implement a component where I will be using this class. So now after implementation of class. You just need to deploy this from the source to all. So what you can do just after implementation of the class, you can just right click on that class and click on deploy source to all so that your class will be deployed. So it is showing some error. So whenever there is any error in your code. So what you can do, you can just go to problems and you can see the error messages will be available here. So what I forgot, I just forward to place a semicolon here. So now I'm just saving this code and I'm going to deploy it again. So you can see this time it is deployed successfully. There is no error. Okay. So whenever you will be having any errors in the code, so it will be available in this problem step. And in this output, if your deployment is successful, you will see the results here. Now I need to create one component lightning web component. So I'm going to right click on this LWC and clicking on create lightning web component. So I'm just going to name it as wire apex demo. So a lightning web component is created. So it is by default opening JavaScript file. So we need to implement HTML JavaScript and XML. So here first time going to implement JavaScript because we just need to import that method. So these are the basic instructions which will be available in each lightning web component. So I already explained you in my previous videos like LWC is a module and we are importing its lightning element functionality. Now we just need to import the apex class method as well. So what I need to do, I need to write import. Then here I need to put some identifier. So I'm putting get contacts, then from single quotes at the rate. Salesforce slash apex, then slash your name of the class. So name of classes contact controller. And inside this debt class, we have a method get contacts. So this way you can import a particular class method in your lightning web component. Now, whenever you want to use that method, so you can use this identification which I mentioned here. Now after this inside these curly basis, I will be writing the statements. So here I'm creating a property named as record ID. So I will be placing this lightning web component on account record page so that it can receive the record ID automatically. So I already explained you in my previous video like if you want to create a property and want to make it public so that that property can access value from outside. So you can just annotate it with at the rate API. And here you just need to import it. So this way this record ID is now public property which will be receiving the ID from record page automatically. Now we need to wire the apex method. So here I can use at the rate wire. And if you write at the rate wire so at the top you can see this wire is written automatically. You don't need to write it here. Okay, so at the rate wire then inside bracket you can write this identify get contacts. Because we need to wire this apex class method here. Now we need to pass the parameter. So parameter is ACC ID and I'm passing value with the help of record ID. Okay, so the record ID value will be passed to this ACC ID automatically. And after this whatever value will be returned. So those values will be returned into this context property. So this context is a property which is available with this wire decorator. So this way, if you want to wire your apex class method so you can use the statements like this. And whenever your component loads on the browser. So this wire will be executed automatically as it does with the adapter methods. So you don't need to call this method. It will be executed automatically. So this way I just implemented the JavaScript code. Now we need to implement HTML file as well. So in JavaScript the result will be available in this context. And what result will be available this list of content. So if your account is having let's suppose five contact records. So all those five contact records will be available with this context property. Now with the help of this property we will be displaying these on the UI. So here comes, sorry, here comes HTML file in the picture. Right. So here I am going to implement some code. So I'm going to use lightning card in this demo and I'm placing title as related context. So heading of this lightning card will be related context. And then I'm just putting a icon name. So this icon will be custom custom one for right. So you can search on component library regarding a different icon name. So if you search for lightning cards, so you will find a different different icon names as well. Now I'm going to use one HTML element that is UL UL stands for unordered list. Right. So here what I'm going to do. I'm going to use a class. And the class name is SDS hyphen M hyphen around hyphen. Sorry, underscore medium. So this is predefined class that I'm going to use so that some CSS will be applied. Now inside this unordered list. So basically unordered list. If you want to display some value. So we use list item li but before that I'm going to use a template. So that I can use a loop for each. Why I'm going to use a loop because my apex method will be returning more than one context and to render those contacts on the UI. I need a loop so that I can iterate on them. So here I'm writing context dot data. And after that I need to write for colon item equals to an inside double quotes. I'm writing content. Okay. So here I'm closing it. Now inside this template, I'm going to write list items. So in list item, first of all, we need to set a key. So key I'm setting as contact ID. And inside this list item, I'm going to display the value. So values are available in this contact and dot first name. So this way first name will be rendered on the UI for whatever number of contacts are related to particular account. Now let's understand this more clearly. So if I go to JavaScript, so in JavaScript, all the context will be available with this context property. Now this context property will be having two things inside it data and error. So the results, actual results will be available under data. And if there is any error, so that will go to error. So if you want to fair something through this context, so you need, you just need to write context dot data. And that is what we did here. So for each loop, we just wrote context dot data. So whatever data like data will be having a list. So that list value will be available here and one by one items will go to this contact. Right. And through that contact, we are just having ID as a key and the first name will be rendered on the UI. So this way this HTML file is implemented. So I'm just saving HTML file. I'm just saving JavaScript file. Now we need to implement XML file as well. So here I'm writing true. Then we need to set targets. So target I'm setting lightning record page because I'm going to place this on lightning record page. Right. So this way our lightning web component is implemented all three files. I just implemented and explained as well. Now it's time to place this component on the UI so that we can experience the results. So here I'm just right clicking on this component and deploy a source to work. So it is deployed successfully. So I'm coming here and I just need to add it account record page because we just implemented it for that purpose only. So if you scroll to bottom. So here you will find your component wire apex table. So I'm just dragging and dropping it here. Clicking on save and moving back. So here you can see it is showing two account. The courts ACC one zero one in ACC one zero one. So here you can see both first names are one zero one one zero one. So that is why it is showing same results. If I go to any other account record. Okay. It is not connected with any account. Yeah. Here. Sorry. Not connected with any contact. So here this account is connected with only one contact. So here you can see its first name is populated here. Right. Now if you want to have last name as well. So make sure first you have your field. Right now whenever you modify any of the file you just need to deploy it from source to all. So we just modified this apex class. So just right click and deploy source to all. Then in JavaScript we don't need to change anything in matter dot XML. We don't need to change anything in HTML. We need to change. So here I am just writing contact dot. Last name. Right. And I'm putting hyphen in between so that you can easily recognize. So first name will be displayed and then last name. So we just modified HTML. So we have two option either just deploy dot HTML or you can deploy a full component as well. So this time I'm going to deploy this HTML file only because we just modified that. Now if I refresh so you will see the change. So here you can see we have first name then hyphen and then we have last name. So in this case first name and last name both are same. So let's open any other record. So here you can see for one record first name last name is same and for another one first name and last name is different. So this way I hope you understood how we can call a big class method with the help of wire decorator. So with this I hope you understood completely use of wire decorator because in previous demonstration I also explained wire with adapter methods. And here in this demonstration you understood like how we can use wire with apex class methods.