[Music] hey guys welcome back to ui builder video series where we are creating our own new undertake porter in latest now experience so till now what we have understood is that how we can create a data broker how we can refresh the data broker without refreshing the screen and some of the base component but from this point onwards we gonna talk about some of the advanced components so the very first component that we're gonna talk about is evan so evam is the full form is entity view action mapper and the use case is pretty simple so uh if you see that till now all the data brokers all the components that we are having are those things are used to show only a same type of data so if i want to show the incident list i can only show the incident list if i want to show the task list then i will utilize the same structure of the task table so in a way if i want to have a composite or i'll say complex object where i want to show that complex object so let's say in a complex object i can have incident record as well as my catalog items and data from any other table and i want to show that in either a list or a card layout so for that either i have to do it myself i have to create a custom component but in service now what uh they have provided as uh a configuration method is evan so basically even is the area where we can write and utilize our complex and composite object that we can display either as a card layout or our either as a list layout ah we first need to understand what are the four processes we need to take so uh we will talk about uh those things later on uh in adapt that how event work how evm has those things configured but in this session what we are going to see that is how we can configure evap for a very quick configuration for our panatec portal so here's what we're gonna do so you see that on this get item page on my pan attack so what we want is that if we have provided any kind of ssid then it should show that catalog item if we have not provided any kind of society so it means if there is no society or society is minus one then we want to uh show all the catalog items so how we need to do that so we will utilize uh evm components but before that a simple configuration we need to do that we have to first select on get item we have to click on our component visibility and here you see that we have again uh different stuff which is a height component we have not used it previously but in this one what we will use it to hide or show the component so instead of binding it with dynamic data we gonna write a script and i am going to return if api dot context dot props dot cis id if there is nothing then just return it it will return me that true and false i'll save it so now what we need to do is uh we need to play with the evap to fetch that whole data source so what we how we can do that is uh basically this is the only component for which we have to go back from our ui builder to platform so i will come here in my platform and click evam so here first we need to give the event definition so let's quickly go ahead and create an even definition so what we will call it as catalog items list but you can name it anything what you want and there are some certain simple configuration is sort order ascending and descending so right now let's select it as ascending and save it once we are done with that so we will see some of the related list here so uh even full form is entity so entity view action mapper so the very thing is when we talk about entity ntp is nothing it's kind of from where i want to get my data so this data source is that so i will click on create and link i will call it as that any name i'll again call it as catalog item list and here i will select table catalog item if i want to have any condition i can do it i'll say only show the catalog items which are true sort by either created or updated we will leave it by plan create and update and we will click on submit so once we are done with our data source so basically the next step is view config bundle so this is basically used to map this data source to this view one so i will click on this create a link again i'll give it some name i'll name it as catalog items list and again submit it so once it is done so uh we have not done any kind of configuration inside this because that will come later so as soon as i click on this one this will present me a view config so basically in this view config what i need to do is i will map my data source to a particular view so right now in our data source we have only one table okay but we can have multiple n number of data source and i can connect that n number of data source to n number of views and we i can also provide the conditions i can use any composite or complex condition so right now for this one we just gonna stick with the simple one so i'll give it as name as catalog item list active true order let's say 100 table is catalog item now i can provide condition and rule so basically rule will specify which user rule is supposed to utilize this uh evam uh view configuration and then condition so in condition i'll say active is true so now because it's the base condition that we want to map okay and now in the table fields i can select what all the table fields i want name short description icon and then i can see let's see image then let's go ahead inside the category inside this category i want to have a description and i want to have a title and okay i also want to have category just to show and apart from category okay inside category as well let's see something known as sc catalog if we have this let's bring this catalog and save it and in this one custom field i can provide any kind of custom fields if i want and we have everything let's bring out if we have something other stuff i don't see any other field required but in future if we require we can just get it that's not an issue so once we are done with this uh configuration finding all the table fields that we want and all the condition the next step that we need to took is we need to map these fields to this so basically what we need to do is that click on create and link we can create any kind of action label some of them are outer box some of them are not so let's take an example if you want to create a action label on a phone number field that we want a phone icon and i should start calling someone on skype or teams or any other any other connecting source we can do that but right now here what we want to have is navigation so i'll call the action name as navigation and we gonna utilize that so we need to just remember it and here i can implement the section as a server side or uxf client action ux effects is nothing it's a now experience so i'll specify the client action so out of box i have the client action navigation i'll take that one and i'll click on submit so that's it folks so uh till now we have done uh one level of configuration we have defined our data source and also we have defined its view mapping once we are so in the next one what we gonna see is that how we can create our view template so till next time thank you you