[Music] welcome back to the video series ui builder and in the last videos we learned about that how to play with the state and state parameters and how to stitch and get and set values of a state object in this video we gonna see a breadcrumb how to add a dynamic breadcrumb so i have milaf with me to help me out on this one so millap over to you yeah so uh this is we are trying to add the breadcrumb here but the thing is we are gonna learn a concept of data broker uh so basically in in ui builder or in the new now experience right the beauty of this framework is uh there are a lot of data brokers created uh which we can use to fetch the data from the server so you remember our old days of service portal where we used to write client record in this server side scripting this will eliminate all of this and we'll see it right now uh so for this particular video uh what we gonna do is we wanna bring the name of the catalog item which will be which will act as a caption for that label for that particular breadcrumb so akash do you can you create a new data broker there yeah and just select lookup record from that perfect so when you add a data broker it asks you what table it is this particular one so it says we can say catalog item here sometimes it behaves abruptly so i just need to select it and the record we are going to take it from the props so from the url so you can say prop dot society and you should see a result there perfect it means that we have configured it correctly so save this one yeah and we need to uh get this value so i'll save this one display value now let's add a breadcrumb and here so instead of specifying it we have to have a dynamic data binding uh i would say okay yeah correct let's do that result dot name dot dot display value save so basically uh the reason why i was saying this cannot be used because it needs a json object right uh and that's how you know we have to construct it so if you can just uh close this out create new one i just wanna okay yeah perfect edit edit this yeah see you have to construct like this so we have to say where it should go to as well for now for this video uh we'll just uh build this kind of structure uh using a script yeah right so uh let's cancel this so there are alternative ways okay to do this you can build using a state variable and then use it here or you can directly build it here using a script so just copy this so we have it handy and go back to the events oh sorry go back to the items and you select the script there on the right side no no on the right side of the config where we have this yes on the items okay here no no on the on the right hand side very oh yeah perfect so click on that or you have a dynamic binding there right you create you selected dynamic binding select yeah oh yeah okay this one okay so here we'll get all those information from just the api dot just give me a sec return on top of this one api dot context uh uh not context just in data dot lookup record one yeah dot oh oh what was that a name i mean it it's not that great okay so this this suggestion is not that great but uh i was was it display value yes yeah so now we have to return the json as it needs so copy the json what you uh put it here so i just put it in a let let name and my json is this yeah uh so you need to have the first portion as is so you can just declare the json with the first uh link as is yeah and remove all of this i'll just copy this one to build our data yeah yes that's correct just keep hash for now it's just that we'll link it to the link again after yeah okay or you can what you can do is you just put it there again control z yeah and just add it here in the label api dot whatever underscore name name yeah yeah correct project and uh if i have put it in a hash that's fine uh return that and why i always have its name incorrect let me correct this one okay so i'll can you can you can you okay that's okay i just wanted to say like format it i always like that i can do that again yeah go down just to make sure everything it looks fine yep everything okay because it should have been showing up so i'm worried as to why is it not showing up uh we might need to look into this one if it is getting us the correct value yeah that's true so definitely we have to see that uh yeah hold on a second we'll check that really quick uh let me see here we look oh yes we forgot result yeah everything else looks fine yeah save it because it should just show it here yeah perfect you see it here okay sounds good i guess we are done with this yeah so this is a quick way that how we can do that another way is that we can have another client script running from where we can hook it on state and we can use the states here but this is one quick way that this is better approach i would say because rather than creating a straight variable just looks playing with the state sometimes uh not good okay it sometime uh not work correctly so better is that we have direct scripts hooked up here wherever possible so that's quickly that how we can create a state how we can quickly create the breadcrumb value coming directly from our table that's it for this video folks perfect thank you guys thank you guys