 Hello, hi everyone. I am Sanjay Gupta. I welcome you on Sanjay Gupta Tech School. Today we are going to have day 83 of this Salesforce bootcamp. And right now, currently in this bootcamp, we are learning Salesforce Lightning WAP component development. Right? So this is part six of Lightning WAP component topic. And today I will be completing like how we can access Salesforce data in Lightning WAP component. So yesterday we completed one point related to that and today we will be completing two more points. Right? So before starting the session, I once again welcome everybody, those who have joined life and those who are watching the recording. So I welcome to them as well. Okay. So let's jump on to the slides. So basically if you're watching this video and you are the first time visitor on this channel and if you want to know about the instructor, so this is about me. And the slide tells you everything, whatever I am doing for the community and about my experiences moving forward. So this is my advice to everybody, those who are learning Salesforce or any other thing that you are doing in life. So consistency is the key. And if you are consistent enough, then you can achieve anything in life. Right? So in Salesforce, like I, if you're following this bootcamp, so I would say be consistent, follow all the sessions, do regular practice. So nowadays in Lightning WAP component sessions, I'm explaining all the concepts and like all the implementation I'm leaving for you so that you can watch all the videos and you can implement all the code stuff and you can practice that at your own. So I hope those who are following the bootcamp, they are doing those things. Moving forward, so you can scan this QR code. So this is Salesforce Self Help Group on Telegram where lots of beginners are connected and on daily basis, whatever doubts they are having, they are discussing each other. So we are in week 25. So like this week, I will be having a couple of sessions. So one session I took yesterday and one session I'm going to deliver today and we'll see like a few more topics I will be delivering in the next week. And then here you can see in week 27, we will be having sessions related to deployment. And next month in three different weeks, we'll be having sessions related to QA as well. Right. So I think Faisal, your question is already answered with this slide. So we'll be having QA related sessions. So total six sessions will be there. And in those six sessions, you will get to know everything about the QA role that is available in Salesforce ecosystem. Okay. So do follow Sanjay Gupta Tech School on YouTube, LinkedIn, Instagram, Telegram and all the links are available in the video description. And on Telegram right now, a giveaway event is going on. So if you take participate in that event, so you can win Udemy course voucher. So do check Telegram channel. So there you will find a giveaway event so that you can attempt. So one more thing, please share a review or feedback about the bootcamp. I can see lots of people are sharing their reviews, but if you have not shared a review, like if you have attended this bootcamp sessions. So please share a review or feedback about the bootcamp so that I can have some motivation. And if you have any suggestion, so I can take that as well. Okay. So now we need to understand the wire service. Okay. So in previous session, what I explained to you, like we have three different ways to connect with Salesforce data. So one was lightning data service that we discussed yesterday. And in that lightning data service, we used three different base lightning components right now. This is this is something different that we have in place. And here, like you if you if you need to understand like how wire service works. So we just need to understand the functionality of it. And then I will be explaining you example briefly. 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. Objects passed to a component are read only to mutate the data. A component should make a shallow copy of the objects. It wants to mutate. So basically whatever data you are fetching. So that will be available in form of read only. You won't be able to modify that if you want to modify that data. So you just need to clone it. You need to make a copy and then you will be able to modify that. Right. So basically if you want to implement wire service, so you need to follow the syntax. Right. So we need to understand this syntax properly. And basically if you want to implement wire service. So first of all, you need to import and adapter module. So the adapter module that we are going to import that we need to write with the import statement and whatever module you are importing. So you just need to specify the adapter ID as well. So in the top line, you can see this import statement is written. So import then in curly basis, you will be writing adapter ID and then from and then adapter module. So later in the slides, we'll see the examples of this implementation as well so that it will be very easy for you to understand. Now after importing below in the code like these instructions, you will be writing in the JavaScript file. So in JavaScript file somewhere, you need to write at the rate wire. So at the rate wire, I hope you all know it is a decorator that we need to use with this wire service. Then we need to pass adapter ID and adapter configuration. Right. So adapter ID is that we are importing above, which is related to the particular adapter module. And the adapter configuration means if you need to pass some data as a parameter. So those data you will be passing as adapter configuration. And once we execute this code, so if there is some data that is returned through that wire service, so that returned data, we can process with the help of property or function. Right. Now, if you if you want to understand these things in detail, so we have adapter ID. So adapter ID is basically the identifier of the wire adapter, then adapter module. So it is basically the identifier of the module that contains the wire adapter function. So basically in this module, adapter functions are available. And you just need to import that function and that function basically later on will be so that data will be stored in this property. And immediately if you want to process that data, so we can implement the function as well. So this is wire service syntax that we need to implement if you want to interact with the Salesforce data. Right. So here the advantage is we can use predefined functions. Those are part of the adapter modules. Okay. So I am moving forward. Okay. So as of now, we have discussed this topic like how we can how we'll be implementing wire service with the help of the syntax. So I hope everybody understood this. Right. So now moving forward. So we have one more thing and that is also important. So for timing, I am just removing my video so that you can go through with this slide properly. So basically now we need to understand why to import references to Salesforce object and fields. Right. So before explaining this, I just want to take you to the example. So just just see like how we can import reference to Salesforce object and fields. So basically here you will see lots of import statements are available. So this is also related to wire service. So basically this you need to understand so that if anytime you want to utilize object API or field API, so how you can import them. So you need to understand this. So basically we need to write import then this identifier position object. It can be anything then from and then Salesforce slash schema slash and then object API. So this is custom object API. Then in the next line we have like custom sorry standard object API. Then we have fields. Right. How we can import the fields and then we have relationship like from position we are jumping to hire manager hiring manager. Underscore underscore our dot name underscore underscore C. So this way different different object API field API and referenced field API you can fetch. Right. Now why this is important. So I am moving back to the slide and in this slide you will understand why to import references to Salesforce object and fields. So it is very much important to understand like why we need to import references to Salesforce object and fields. Why we cannot use them directly. Okay. So basically if you if you are importing references to Salesforce object and fields. So whenever you use a wire service adapter in a lightning UI API module. So basically this is the module. So here you can see lightning slash UI asterisk API. So this is the module which which we will be importing and asterisk means here we can use any particular name which is related to. Particular module. So we have lots of modules that we will be importing while using this wire adapter. So we strongly recommend importing references to object and fields. Now why why this is important. So basically Salesforce verifies that the object and fields exist prevents objects and objects and fields from being deleted and cascades. Any renamed objects and fields into your components source code. Right. So this verification is done if you are importing object and field references. Right. There are there are APIs if you are referencing here in the lightning component. So Salesforce basically verifies these things. It also ensures that dependent object and fields are included in change set and packages. If you are deploying your lightning back component and your object and fields are not deployed already in the target org. So this also will be ensured whenever you are doing deployment. Then importing references to object and fields ensures that your code works even when object and field names changes. So if you are changing object and field names so automatically those updated references will be imported in your lightning component. If a component isn't aware of which object it is using use string instead of imported reference. Right. So if you are not sure which object will be using so in that case you can use string so you can use get object info to return the object fields. All wire adapters in the lightning UI stress KPI module respect object crud rules fee level security and sharing. So this will be applied automatically. If you don't have access and you are accessing the lightning web component but if you don't have access to your object or fee level security so you won't be able to access those things. So if a user doesn't have access to a field it isn't included in the response. So these are the things that you need to keep in mind while why why to import references to Salesforce object and fields. Right. So we have two different ways. First is to import Salesforce object and fields. Second is to use them directly in form of string. Right. So if we go further. So here with these examples you will be able to understand how we are going to use these two methods. So here you can see import account name through wire adapters configuration object. So what is happening here. So this this example is important. Here we are using wire adapter. So in the second line if you focus. So here we have import get record from lightning slash UI record API. So this UI record API is basically module adapter module and we are using this get record. So this is get record is the adapter ID. Right. Then we are importing account name field reference and here in JavaScript we have declared a record ID. So this record ID is basically a property which is public property and below you can see we have wire decorator. So here we are using this adapter ID and this is adapter configuration. This is basically adapter configuration where we are passing record ID and field. So record ID means which record we want to fetch and field means which field we want to fetch and this is basically property. So whatever data is being fetched that data will be stored in this record property. Okay. So this is the example how you can use wire adapter. Okay. So if you have any question any doubt so you can ask those questions in the chat so that I can answer your queries. And I just want to go back so that I can relate it with the syntax. So you can see the syntax import statement we have adapter ID from adapter module. So basically here this get record is adapter ID and this UI record API is adapter module. And if we go back so we have at the rate wire then we need to use adapter ID and adapter configuration. So if I move forward. So here you can see we have at the rate wire then this get record is adapter ID and this curly business is having all the adapter configuration. And then we were having property or function. So first see like this is the property. So in upcoming slides I will be demoing you how we can use functions as well. Right. So I hope this way you are able to understand the syntax and example as well. So if you have any doubt you can ask in the chat. So in the meantime I'm going to explain you another example. So here we are not importing field reference. So here we have imported this account dot name but in the next example we are not importing. Whereas we are using it in single quotes like account dot name. Right. Rest of the code is same. So here we are using account dot name and we removed import statement. In previous example import statement is available and here we are using this ID like this identifier. Okay. So the differences I already explained you. So these are the differences if you use reference. So whatever changes you will be doing those will be applied to the component. If you are deploying then also it will be beneficial. Right. But if you are using this string so it is not directly connected with your schema. Right. So if you are deploying this component so no dependency will be checked. If you are updating your field name so no dependency will be checked. So if we compare both the examples so which one is better. So the previous one is better. You need to import particular field that you want to use and you can utilize it. But we have both the options. So as per the requirement you can use the particular way. So if we don't have access it should throw some so I don't think it will throw an error. If you don't have access so you want to be able to view that data. Yes. Grisa we can use two decorators in the same component and these these decorators like address wire decorator will be executed automatically. So on load of the component it works automatically. So Rajiv is asking we imported an object how to use that. So Rajiv I think we imported here and in yesterday's example I showed it. So let me go back. So let me pick yesterday's example. So here you can see we are importing this account object API in this account object. So this way you can assign it into a property and that property you can use so that property we are using here. Okay. So this way like if you import any object API so you can use an identifier and with the help of that identifier you can store it into a property and then you can use it. Yes Manoj using wire we can update the record as well. So right now we are using get record. You can you can have update record create record as well. So Nagendra is asking to implement an example lively. This this these codes are having only JavaScript file. So in upcoming example I think we'll be having HTML as well. So I'm going to explain it by implementing in the visual studio code. Right. So this is my HTML. So I'm going to implement it in the HTML file. And in the next slide I'm having JavaScript. So I'm going to use it. Okay. So now I'm going to explain these examples to you. So basically what is the title? What is the title of this? So let me just show you that. So basically now what I'm going to show you in the syntax we saw we have two things property or function. So with the current example you will get to know how we can use property or how you can use function with this wire decorator. Okay. So this is the first example which says decorate a property with at the rate wire. So here you can see we have a complete HTML code. So in this HTML we are using lightning card which will be giving the base to the component. Then we are using template if true. So if it is true like contact dot data, if it is having some data. So name, title, phone, email, these will be displayed. So this is simple HTML. Right. Now if we come here, so you can see at the top we have import statements. So I think these you can relate. Then we have a constant fields where I am setting contact dot name, title, phone and email. So these fields I'm setting here. So I'm using strings directly. I'm not importing their references. So I'm using strings directly. If you want to import these field references, so that is also okay. Then here we have a public property record ID then at the rate wire. So we are passing get record then record ID and then all the fields and the result will be available into this contact. So this contact is a property. Now what I'm going to do with this contact. I'm going to return all the fields individually. So these are getters. These are getters. So contact will be having all the data. So you will write this dot contact dot data dot fields dot name dot value. Right. So name, title, phone, email, these are fields and their values will be returned through this getter. And here you can see we are using name, title, phone, email. Right. So this way this code is implemented. So if you implement this in your visual studio code. So here with the help of colors, I think you are able to better identify this. Right. And this is our JavaScript code. So here also we have different colors so you will be able to relate and you need to deploy this code and this component you will be placing on the contact record page. If you place it on contact record page, so you will be having name, title, phone and email displayed on a component. Right. So I leave this example to you like just implement this and place this component on the contact record page and then you will be able to verify like how it will be showing the results. So I hope at least this you can do. So all the code is available in front of you. So you can just pause the video and you can implement the code and then you can test it. So this was the example for property. Now we have another example. So in this example, I will show you how we can decorate a function. Right. Right. So basically here you can see we have same code and we are having record. So this record is a property. If it is having some data, so name will be displayed. Okay. Now how we can implement a function. So initial code is same. Then we have properties like record ID, record, then error, then we have at the rate wire get record, then we have we are passing values like record ID fields. Then this is the function. So this is basically function here. We are using wired account name can be anything. Then it is receiving error comma data. So we are checking if data is having something. So this part will be true. So data will be assigned into this record or undefined will be assigned into error. If it is false, then error will be true. So error will be assigned into error and undefined will be assigned into record. So basically this record property will be having some data. Now what we need to do we are implementing getters. So here we are writing record dot field dot name dot value. Right. So this way if you want to implement a function, so that is also possible. So I gave you both the examples like how to implement property. So in property you just need to write a name. It will be having all the data. And if you implement a function, so this error data will be separate out and you will be able to use it like this. And I hope everybody knows why we are using this because record is a property. And if you use a property in your JavaScript file, so you just need to use this keyword so that it can reference it. Okay. Now so this is about wire adapter where we don't need to use any apex code. So all predefined adapter modules are available that you will be able to use. So I just demoed you how we can use get record. So there are other modules available. So with this way I hope you are able to understand the wire adapter and as per your need you can do some googling or you can search some article and now with the help of this explanation you will be able to understand how wire adapter basically works. So first method is lightning data service that uses base lightning component. Second was wire adapter. Now third is wire apex method. So in this we need to write apex code so that we can interact with Salesforce data. So it is very simple. You need to write apex class. So I think in our first or second session related to lightning web component we also discussed it. So it is having sharing, with sharing enabled. So with sharing means like record level security will be applied and with security enforced means object and field level security will be applied. And we are querying ID name, title, phone, email from contact. Ten records we are querying and the list of contact will be returned. Whenever you want to link your apex method with lightning web component. So you need to write either it or I enabled and cacheable equals to true. So here you can see we have a HTML file. So it is having lightning card and then we have this template. So now if you want to apply if else condition in lightning web component. So this is the latest release like you can use LWC colon if. So in previous example you might have noticed I am using if colon true. So this is now older version. Instead of this if colon true what you can use you can write LWC colon if. So if this is true like contact dot context dot data if it is having something. So this is a loop for each. So one by one context dot data will go into this contact variable and through that contact name will display on the UI. Right. So if you have more than one data in your like context dot data list so you can implement a loop as well. Now this is the JavaScript code. So in this JavaScript code we are using we are calling this method like this. So contact control is the name of the class get contact list is the method and here we are using one identifier. So generally whatever your method name is we write that name here but if you want to use different name you can. And here we are using at the right wire so you just need to pass that ID whatever identification you are using here and the data which we are fetching will be stored in this context property and that context property we are using here and in context the data will be available into this data attribute so you need to write context dot data and then you will be able to fetch all the things. Right. So this is a simple way like if you need to write apex code then you can fetch that data with the help of at the rate wire. So for wire adapter adapter modules also we use at the rate wire and for these apex also we use this at the rate wire and the benefit is basically these works automatically whenever your component loads so at the rate wire will be executed automatically. Now I can see one question from Nagendra so he is asking like when to use these wire at the rate wire and when to use imperative method like my requirement is I don't want to interact with salesforce data on lot of the component in still whenever I will be clicking on a button then only my apex method should call right so that is basically known as imperatively like call apex method imperatively so imperative call if you want to make so that is also possible in salesforce so here you can see one example like if you click on a button then only your details will be displayed so here we are using same apex class that we saw in the previous example so apex code is same we are having get context list method and it will it will be returning 10 records now here we have a little bit change so we are having a button and the label of that button is load context and if you click on that button so handle load function will be executed and rest of the code is same here we are writing context instead of context dot data so I think it is processed there yep so here you can see in the line number 3 we are importing that method with the help of import statement then context and error these two properties are declared then this is handle load so on click of this button handle load function will be executed and that handle load function is defined here so in this handle load we need to call that method get contact list so here we are not using any at the rate wire so wire decorator is not used here because right now we are doing imperative call so in case of imperative call you just need to click on a button and then only it will start its execution and here we are seeing like if there is result so that result will be stored in the context if there is any error so error will be stored in this error right so this way you can do imperative call ok so this is all about like how to interact with Salesforce data so I hope you are you have understood all the ways through which we can interact with Salesforce data so I explained you three different ways first is lightning data service second is wire adapter and third is apex now if you have any question you can ask in the chat so that I will be answering and next lightning web component session I will be taking next week if I found something more that I can share with you and next week this lightning web component thing will be completed will be starting deployment related sessions so I can see few questions so can you please share the LWC project yeah I will so this is pending with me like lightning web component scenarios for practice and project so in like this weekend I will try to work on that so that I can give you something for practice so Venkatesh deployment related sessions will be starting next to next week with respect to Salesforce and independent DevOps bootcamp will be starting from next month yes Ramakrishna so in deployment we will try to cover everything so let's see how those sessions will go so we will try to cover chain set we will try to cover VS code deployment and deployment and workbench so lots of things are planned and deployment related sessions will be delivered by one of my friend he's also working in reputed IT company so he's having good experience on deployment so he will be explaining everything so I will be there in those sessions so we both will be driving those sessions okay so Mano's I think this question is related to community so I won't be able to answer this question right now I also need to check so this is a good question on imperative call can be muted data so I think so because it is not related to wire so in wire we cannot mutate the data but I think in case of imperative call we can okay so I think I answered all the questions so thank you so much for joining today's session and we'll be having one more like a few more sessions next week so do follow and after few hours like appian related session will be there so that will be day one so if you want to understand how appian works so you can follow that bootcamp as well okay thank you everyone