[Music] hey guys welcome back to ui builder video series and uh in our past uh video series uh we have seen that how we can add our evam data broker and then how we can connect that even data broker to a uib data set to show our components in a grid and list layout and even is a composite data broker we have also seen that how we can add our own pagination controls on the grid layout that we are seeing on front end and how we can connect that pagination with our data broker to change the data dynamically so you see that guys uh here is something missing that when i'm showing this catalog item or the list of catalog items i'm not able to see the pictures for some of the catalog items so how i can do that see right now what we are doing is we are getting the values from our data broker and we are just directly showing it what if if i have a feature that can transform this data that what i am getting from evm data source and that data i can transform and then that transform data i want to show it here so in uib builder there is something known as transform data broker that understand transform data broker is nothing it's the same concept like we are having in our platform is transform map let's see how we can work with the transform data broker so i'll create a new data source instance and instead of selecting the outer box one that what servicenow has provided we will create our own data resource and once we click on new it will ask that which type of data resource we want to create and there is this that we want that is transform okay so as soon as i click on that one it will again take me back to my platform i'll say filter catalog item without pictures and then in the properties so what i am going to do is i am selecting this property this property is structure of data that i need to pass now in the script and here's the fun part in the script we gonna transform our incoming data and we gonna provide the outgoing data how we need to do that as i have already written that script here i'll just uh copy paste here and in the script what i'm doing is that i'm getting this whole json object from my data source and putting inside it in input and under that i have catalog item dot items object and on this items object i am doing a iteration so using map using es6 components i'm changing the value what and basically what i'm doing is that i'm getting the society of item and checking if in my access attachment table if i have any kind of pictures for this catalog item if yes then return the item okay so this is what i'm doing in a nutshell so i'll save it [Music] there is one more step that we need to do so what servicenow has done is that because this uh data broker is too powerful they have applied an acl for that otherwise anyone can call it so what i need to do is i need to create a acl for this data broker by which our system to allow the access of this and data broker so for that i need to copy the ssid so for that i need to add an acl and i'll again go back into my access control list i click on new is here and i need to select a special type of in acr that is ux data broker and my operation is execute that i just want the execute permission and here's the fun part that instead of selecting the table here uh you will see a small icon you click on this change mode now instead of giving you a drop down it is just a normal text box and you need to paste the cis id of the data broker transform data broker that we have created and you also need to give the rules that you want to do in our case i'm just giving the admin rule and submit that's the mean fun object that we need to do now what next i need to do is that once i click on this data broker so i need to do click on global and select your transform data broker i'll click on this one i'll add this one so i need to add this catalog item data source here from my input and that is at data come on and theta dot event or data composite vpw and as soon as i do that it is showing with this nice output only the catalog item which are having the images okay so if you want you can add a generic image to all data elements otherwise uh right now in our example what we are doing is we are just filtering the catalog item which are having the pictures attached to them now once we done so i need to save this one and this output i need to map this output to my catalog item data set now so in a data set instead of mapping it to my evm data source i need to select it as dot filter one [Music] picture dot output and save it [Music] once it is done i'll again come back here i will hot refresh it and now it should show only those catalog items which are having pictures associated with them so still now it is not showing us the pictures so let's see what's the issue let's go back to our data source uh evm data source definition and under that i'll open this view config bundle and i'll open my view config one of the issue might be that we are not getting the picture here i'll select the picture here save it now i need to hard refresh it and now it should give me the picture as well great it is still not giving me i again hard refresh this one [Music] but what we have done is we have already went into our catalog item and we have bring out this picture from our table but what could be the next action is that if we are not seeing it then i can select my template and let's see if in a template i have mapped that one or not so that picture i am mapping with this image url and here's the mistake that i'm getting it from related sc item or something i didn't need to remove this one save it as soon as you have saved it so you need to go back into your cat item a evam data source that you have clicked and you have to refresh it [Music] sometimes it might sense it as an error and one of the work around for that is that if it shows you something like that error and it didn't vent just uh remove one of the data element and then paste it again and here in this image url we should see our image so once we are seeing it here so i'll come back here on my catalog page refresh it and now we are able to see our catalog item with our pictures so you see that how we are doing uh our transform a data broker that only show that uh catalog item which are having associated pictures with them and in this video we also saw that that how we can uh do kind of debugging in our evam data broker that whatever data we are getting and how we can quickly uh see what where our thing might go wrong so that's it folks uh in this video we will come up with more advanced components and later on thank you