 Hello, everyone. In this module, I'm going to demonstrate how you can create contact list component using data table and place it on account record page. So I'm jumping into developer console. So first I will be creating a contact controller that will be written in Apex. So that controller will be returning all the related context for particular account. Then I will be implementing lightning or a component. So clicking on file, new Apex class, naming it as contact controller. So in this class, I need to write the code and I'm going to implement a method public static list of contact method name is get contacts, and it will be receiving one parameter of type record ID. Right now I'm going to call this method in my lightning or a component. So I need to use at the rate or a enabled annotation. Then I'm using return statement. So in this return statement, I'm directly using SOQL. So SOQL always returns a list. So that list will be returned with these fields. So this SOQL will query ID first name, last name, email and phone number from contact where account ID is equals to this record ID. So all those records, all those contact records will be queried where account ID is equals to this record ID. So this way I created this contact controller which is written in Apex. So this Apex controller now I need to use in lightning or a component. So it's time to create lightning component. So clicking here and naming it as contact list. Now we need to place this lightning component on record page. So I'm enabling this checkbox and clicking on submit. So in this example, you will also understand like how we can fetch record ID of the record where this component is placed. So we need to create one attribute named as record ID for that. So I enabled that checkbox. So here you can see flexi page available for record home is available and force colon has record ID is also available. Right. So this is the interface which provides you record ID automatically in this lightning component. Now here I'm creating attributes. So aura attribute name equals to record ID type equals to ID. So this is the first attribute that I created. So name will be always this like record will be in small and I should be in capital and the deal should be in small. So this record ID attribute will be having the record ID of the record where this lightning component is placed automatically because of this force colon has record ID. Now I'm going to create one more attribute name equals to account and type is also equals to account. Then one more attribute name equals to context type equals to contact and one more name equals to columns and type equals to list this columns attribute I will be using while implementing data table. So we have four attributes record ID will be storing record ID account will be storing account related information. Contacts will be storing all contact related information and columns. This is a list that will be we will be using to display list of contacts and data table. Then our handler name equals to in it value equals to this and action equals to see dot my action. So this I already explained and demonstrated in previous modules. So this executes automatically because its name is in it so whenever your component loads. So this handler will be executed and this my action function will be called automatically. Now I'm using force colon record data. So it is a tag or you can say like lightning data service. So through this we need to pass the ID of particular record and that record related information will be stored automatically. So I am creating or ID as account record. Then we need to pass record ID so that is available in the record ID attribute. So we can use it like this. So we need to create expression so expression we already saw in the previous module how we can create expressions and or a component then target fields equals to V dot account. So basis on this record ID we are going to fetch account related information because this record ID will be having only account record ID because we are going to place this on account record page and that records information will be available in this account. And then layer layout type equals to full. So this way this force colon record data tag is implemented completely. Now it's time to implement another one. So it is lightning card. I can name equals to standard contact title equals to contact list for plus V dot account dot name, and I'm not closing it here. So it is closed here so I'm not using slash here because inside this lightning card I'm going to use lightning data table tab. Right so what we did here. So here we have a title which is going to display like contact list for this is a plain text and account name will be fast from this expression. Right. So V dot account dot name so here we fast account related information in this attribute and through dot we are fetching particular field that is named. Now, inside this lightning card so this is lightning card tag. So here, this is the beginning of this and this is the ending. Now here I'm writing lightning. Data table data equals to so data will be provided through V dot context. Right so V dot context contact contacts attribute is available here. So we are fetching that then columns equals to V dot columns. And next we have key field that will be ID. Right, so key field means like what will be the key for this lightning data table if you select particular row from that data table so this key field is basically for that. So we have hide checkbox column equals to false and closing this data table. So, lightning data table is having these four attributes one is data data will be available here then V dot columns so columns like we are, we need to map this context with this column so that we will do in the JavaScript controller. So after mapping columns will be created and whatever data is available in this context, they will be displayed in particular column. Then key field is ID and hide checkbox column so in data table checkboxes will be available. In this example like basic data table will be displayed later on in another module I will show you some more features related to data table. Right, so I have saved this code. Now it's time to create JavaScript controller. So in JavaScript controller, we need to implement this my action, because it will be executed automatically whenever this component will be loaded. And at the time of component load, we need to do some operations. So I am clicking on this controller. So here you can see this controller is open. So here my action is available and function name is already my action. So now I need to write component dot set V dot column so we need to set its mapping. So here I'm writing label colon first name field name colon first name and type colon text. Right, so this is basically Jason format so label of this column will be first name field name will be first name and type will be text so when we are using this V dot column column attribute here with this data like context. So from context first name will be field will be mapped automatically with the first name column and the values will be placed. So this way we need to implement it. Now I'm copying this pasting it and it will be last name field name will be last name. And here label will be phone field name will be phone and type will be phone. And here I'm putting semi column so this this thing is completed. Now what we need to do. So after this column mapping, we need to call this contact controller method that is get contacts, right. So before we write the code to jump here and here we need to write controller equals to contact controller. Right, so this I explained in the previous module, like if you want to access apex class method so you need to mention this statement like controller and name of the apex controller. Now here you can write the code so that you can call that particular method which is defined in contract controller method. Sorry, contact controller, apex class. So here you need to create one variable named as action, then component dot set, sorry, component dot get. C dot get contacts. So name of contact controller method is get contacts. So we need to use it here. Now, here in this method you can see we need to pass one attribute or one value that is record ID. So we need to set the parameters. So action dot set params. So in this module you will also learn how we can pass parameters from this auto component to apex controller. So record ID colon component dot get V dot record ID. So basically this record ID is the parameter that is mentioned here which will be receiving the value and which value. So we need to get the attribute that we created in the component. So here it is record ID and this record ID will be having automatically account record ID wherever this component is placed. Now we need to close this here you don't need to put any semicolon. You just need to close this. You can write action dot set callback this comma function data inside this you can write component dot set V dot contacts data dot get return value. So whatever return value will be available that you need to set in this context attribute. So with this you can do that. Now you need to write dollar a dot and q action and you need to pass action. So this way your auto components controller is also implemented. So we created three things. First we created this apex controller. Then we created view of auto component. Then we created JavaScript controller for the auto component. Now it's time to place this component on the record page. So I am moving to account and opening particular account record. So on this account here you can see contacts are not available. So let me open any account where contacts are associated. So here on this account two contacts are available. So what I am going to do I am going to create one more tab here on this record page and in that tab I will be placing that lightning or a component. So I am going to edit this page. So lightning record page will be open in the lightning app builder. And if you scroll down so here you will find your component. So here it is like contact list. Now what we need to do we need to create one tab and then inside that tab I will be placing this. So here I am adding one more tab naming it as contact list. So it is created. And now I am dragging and dropping it here. Right. So clicking on save. Moving back. So here you can see contact list for United Island guests Singapore. So this account name is displayed successfully, but it is not showing data table. So we need to check our code. Okay, so there's a mistake like here you can see attribute name is columns and I used only column. So that's why they are not mapping. So what you can do always you can copy this and you can use it like pasting its name. So in that case it will work fine. So I have tipped it and I'm doing a refresh. So this time you can see data table is available. Here we have check boxes for selection. Right. If you want to do some more custom work like after selection of this so you can do with the lightning data table and first name last name phone for the context which are associated with account with account are displayed here. And if I move to any account where contacts are not available. So in that case this list will be showing the headers only and detailed values won't be available because on this account no contact is available. So this way I hope you understood how we can create a contact list using lightning data table and how we can place that on record page. Thank you.