hello today we are going to take a look at the entity view action mapper uh which is a new application in quebec uh we're going to call it evam for short we're going to look at creating an evam data resource in ui builder so let's go ahead and look at configuring an evam definition so i'm going to go to evam definitions and then click new and i'm going to name this record and so my app is called simple to do so we're just going to call this simple to do and i'm going to change the sort order so let's save that and then i've got a couple of related lists that we're going to use on this so the first one is this data source so i'm going to create a link and this is where i'm telling my evam definition where to get its data from and this is going to be from my simple to do table i could create multiple data sources but for this use case we only have the one i'm going to give it a condition where i want the user to be me so we're going to look up to do's for the logged in user and i'm going to sort by due date instead of created so let's submit that's all we have to do with the data source you could add multiple data sources they don't have to be related at all that's the the power of evam here uh you know normally i could you know report on the task table and get a lot of extended tables but we don't even need to do that um here so i could add you know maybe i have a totally different to do app or you know this to do app is not extended from task i could add some tasks to this as well and then in this next step is where i tell you know i tell my evam okay you have your data here's how you map and display that data so i'm going to create and li and link a view config bundle so we're going to call this simple to do vcb for view config bundle let's submit that and open it up and i've got that and this is where i can add multiple view configs so a view config is going to say let's call this simple to do vc and we'll point this at my simple to do table so again my i can have multiple data sources coming in and the view config is going to look at a single piece of data and say you know does it meet these conditions and if it does apply this view to it so you know if i had records coming in from different tables i could have multiple view configs that would say oh this is an incident let's show the incident like this or hey this is a to do let's show it like this for our use case we only have to do's coming in so i'm not even going to add conditions here the other important thing here is to add our fields so this is we're going to tell our view template you know here are the fields that we want you to to use so we've got name due date state and then i'm going to use a couple of things off the user table and one of them is the avatar so this is the you know the user's picture and then the other one is the name and i'm going to use all of these things in my view template so let's save this guy and we're going to create and link an action so i'm going to want to we're going to display this data as cards in ui builder and i'm going to want to be able to click on a card and go somewhere so we're going to call this navigation uh navigation i spelled that right and uh this is going to be uh shown in ui builder uh whenever you see uxf and and servicenow here we're talking about the user experience framework which also could be called now experience framework so whenever you see uxf we're probably talking about ui builder the client action i want is navigation there are a number of other client actions in there that you can take a look at so we're going to submit that and then one last thing i need to do is i need to specify a view template so this is where you will do your mapping so let's call this simple whoop to do vt so this is probably the most complex part of this because we're going to have to specify this uh view template in uh and json but the nice thing is uh it gives me a template for my json that i can use uh so again this is where we are the template is what tells my evam how to do its mapping so the m and v in evam stands for for mapping so we're going to map the data that we get in to a place on our card and i already have this due to the magic of a demo so you can see in here we've got some values like detail label one detail label two these are going to be on the bottom corners of the card uh we have a title and then we're using that username and user avatar here so we're using all of these values from that fields list field that we selected earlier so i'm going to hit submit and we're going to save that and this should be good to go so we are ready to hop over to ui builder and use this in an evam data resource all right so the first thing that i am going to do before i actually use this in an evm data resource i am going to add a handled event to my page because that's how we're going to make the navigation work and to do that this is documented but it is not the most obvious thing in the world i have body selected here so this is where we are in my page content tree uh and if i go over to events uh the events for body uh look uh look a little um you know there's a little more here than other places you might to click on and i want to create a handled event so this handled event is going to be called uh open to do because that's what we're going to do with it and it's going to have a payload uh let's just call it sysid and we'll give it a label sure let's hit add all right so we've added that handled event and we now have another page event mapping up here so i have open to do i already had page ready so i could do something when the page is ready but we're going to add an event handler now so when this handled event is consumed or fired we want to link to a destination and i already have a page for to do's and we are going to link this uh by saying that payload.sys id so remember assist id was the was the name of the one of our parts of the payload that we want to add so i'm going to hit ok and we will go ahead and hit add so now we know when this open to do handled event is fired it's going to link to this new page so now we're ready to go ahead and add our evam to the page i'm going to go ahead and save because i like to save early and often so let's add an evam data resource i'm going to grab my evam i think it's this guy uh and one of my favorite parts of ui builder is this preview pane where i can see the data i'm getting back real time here this looks correct i think that's right you have some options here like you can handle paging and which page you want your data set to start at filtering but right now we're just going to grab all of the data here so the next thing i'm going to do is add a new component and this is going to be a data set component and let's give ourselves some more room here so i have my data set component in the config here we're going to just call this my to do's and then for the data we are going to grab my data evam data resource right now it is showing as a list i want let's start this as cards and then i'm going to get rid of this toggle and then i also want to hide that filter so these are all properties on my component and all this data looks right uh these are the five to-do's i have it's showing my avatar and my name it's showing the due date and the state so i think this has all happened correctly the one last thing we need to do is i want to be able to click on these and go somewhere so i'm going to configure this declarative action event mapping so i'm going to click on this if i had not created that handled event on the page it would tell me hey you need a handled event before you can do this so we know based on navigation which is what i uh what i set up in that event definition we're going to let's call this new event mapping and we're going to call this open to do and then the sys id is going to be the payload dot sys id so let's hit save done i think i think this is going to work let's hit save and then let's test it let's do how about make a video and then make a video this was the right uh the right one and that was configuring an evam definition and then consuming it inside of ui builder