[Music] hey guys welcome back to ui builder video series so in the last video we understood that how we can create our even component to display the card layout uh so till now what we have done is we have created our evm definition and inside that we have created a data source we have config the data source and we have also config one view that what all the fields we want to have okay now the important configuration that we gonna do in this video is this view template that how where we will show these fields data onto that particular card layout okay so what i need to do is i need to create a new view template so how can i do is either i can go it here and i can create any of the view template okay i can utilize the outer box one or i can create a new one here so we gonna create a new one so either we can do it from here or i can go into view configuration and inside my view configuration i can say search for my catalog [Music] item list and then i click on it it's the same place okay it's the same way please so i will click on new i'll call it as cat item template that is taking time yes get item get log item template and here we need to provide a template file so right now it's a very uh big json file i will quickly explain some of the components in that json so what we will do is we will just submit it and we will open it in the next app open record oh my god i need to save it so if there is one example that they have given that is this component aesthetic value and then mapping and then action mapping so i will just quickly explain so in this template what we are saying is that which component of now builder we want to use to show the data that we are getting from data our evam data source so basically this is the name of this component that what i want to use and then in this component there are certain configurations very first thing is static value so static values specify that what all the static field okay whatever i have having in this now called evm record component will gonna take those static values so basically these are the fixed values that i want to have so what i'm saying is highlighted header icon key of this component will gonna take this value okay it's fixed so i again i'll repeat with the subtitle icon subtitle icon property of now uh card even record will gonna take this value so we have something otherwise aspect as well that translatable so this is something true and false if i want to translate it so like this detail label one in that email address i want to translate it based on users selected user's preferred language and then this is the static one that where we define the static values this these values now if i want to have a dynamic mappings that will come under this my mappings object block where i'm saying the property like let's say text header label will come for this now component event record component from our data source with department dot name so yes in evan we have dot walking so in title label property i'm gonna mark my name field which is i'm getting from my evm data source so this is how we can have dynamic mapping and other one is action mapping so basically it's used for what all the actions i have binded there so i can have mean action click action and any other uh different actions as well so what we are going to do is that uh we are going to utilize the same kind of json okay that uh in our example we are again going to utilize the same thing but i have already customized my example for uh for the uh for our mapping component so what i'm gonna do is i'm gonna just copy and paste it and we're gonna just have a quickly view that most of the static values are same instead of clock outline i have put it as document outline then moderate color nfl so aesthetic values most of the things are from here some of the mapping that what we have done is that highlighted text level that is category.title then uh we have text header label catalog then image url from related sdk item picture then short description the name icon price and then my mapping is from my navigation so that's it folks for this uh template one what i'll do is i'll just update it so once i update it then the next step that we need to take is that we need to bind this evm data source to our catalog but that we gonna see in next video that how we how we can do that so that's it folks for this video till next time thank you