[Music] hello and welcome to this episode of ui builder bytes uh it's been a while but in this episode uh we are going to take a look at declarative actions in a workspace and specifically how you can add a button to your list component that will then be able to interact with events within ui builder so there was a great post and video put out recently by rnode who is everyone's favorite chrome browser extension developer and he put something out around how to add a declarative action or a button to a form and then have it do something in ui builder and so i had a situation this week where somebody was asking how they do that with a list and you know after playing with a little bit we got it to work so what i'm going to do here is we're going to kind of recreate that in a list this isn't something that i've practiced very much so we may run into some issues and i'm i'm going to try to keep everything in the video so that it's helpful to people that are looking to do something like this so let's go ahead and open up ui builder and we can see what we're going to do so i think i'm going to create a new uib page i've got a new use case that i've been playing with that i'm using for some training called fleet vehicle management so this use case is basically your company has a whole bunch of vehicles that people drive and you have to maintain them it's actually really similar to an itsm use case but it's always been one of my favorite use cases so we're going to start with just a blank page and we're going to call this vehicle list i'm not going to use a page template i want to keep this demo as simple as possible so we will hit done we've got a page here so let's add a container and then i think on this page all we're going to do is add a list component so let's use the list component so obviously with the list component we get all sorts of crazy things here but one of the things that we're going to be able to do is add a button up here that then does something in ui builder so i think for our use case we will want to like just pop open a modal with a message on it or something if you hit the button and so you know there are ways to add ui actions and do things on the back on the back end but sometimes you want a button that shows up in your form or in your list that then can interact with something happening in ui builder so maybe you have like a modal that pops up or something else and you want to interact with that so what we're going to do is we're going to configure the ui builder side of things first and we will start by adding a modal and uh let's just do a quick alert modal um so header and body copy so let's say uh brad's modal and then we will say that we're surprised got it uh let's say success and i think that's a fine size for a modal so let's go ahead and save this and now what we're going to do is we're going to create a handled event for my page so handled events are really useful it's just an event that i define on my page so we're going to call it let's call it list list open modal there are some naming conventions for these this is kind of where i'm going with this one so let's hit add all right so now we have this handled event and now it shows up up here so i'm still to get here i clicked on body and then in the events panel for the body you know container it's the only thing that comes with the page you have all of these events so there's things like you know the page is ready this is if you want something to happen on page page load you can fire an event right here so for ours we are going to open a modal open our close modal dialogue we're going to say open we're going to pick the modal which is our alert modal all right and i don't need to pass any display options so let's go ahead and hit add so the nice thing about this page event mapping is you can imagine if maybe if you had an event uh where you were going to add like four event handlers to it and then you were going to want to do that multiple times on the page um that that could be kind of rough so doing that as a handled event on the page makes that a little easier so you know if we were going to do four different things on this open modal event i could just you know write that once and then call this event from other events so that's or or call it from a script or wherever so that's one of the nice things about these page events all right so we have this all done uh this is about all we should have to do from within ui builder and here is where it gets a little more interesting so we're going to click back into the platform side of things and i'm going to start by typing in list here and what we're going to want to do is create a list action so this is under workspace experience this is a list action and this is going to create us a declarative action assignment and and but but associated with a list so let's go ahead and hit new so action label uh we're gonna call this uh open vehicle modal and then the action name is a lowercase dash naming convention so that's what you should be following uh we're going to make this a ux client action uxf client action and then we are going to create a new client action for that uh the key is going to be uh we're just gonna call it open vehicle modal and then the label uh the naming convention is all caps and underscores then we have to tell it what this is applicable to so if we want to look at some of the options here there's all sorts of places where you can put these actions so a vtb if you've got an evam inside of a specific field form list playbooks so you have different options we're going for list and you'll you you may have noticed in there there's also a related list we're not going to use that but you can you know change and specify between the two of them so that's it i'm going to hit submit and then instead of global this is going to be on our vehicle table which is this one i don't think we need any of this other stuff so i'm going to hit submit we're going to go ux action config and i'm just gonna go to the table name here all right so what we're gonna do here is uh we're gonna create a new action config and so what this action config do this is a thing that you don't have to do every time uh you just have to do this one time uh per experience so we're going to call this um fleet vehicle management config i'm going to save it and then what you do have to do for every action is that you then have to link your action to a config and you're going to do that through list actions here so this is a mini to mini uh and so this is my action configuration and then remember we click we created that declarative action assignment and open vehicle modal is what what we called that so i'm going to hit submit and we got our list action here it also showed up in our declarative action assignments list this will show basically all of the different actions in one list and then the other thing i need to do is grab the sys id of this actions configuration this is again a thing you will only have to do once and then i'm going to find my experience record so my fleet vehicle management experience record is right here and then it actually comes with an action config id ux page property but i have to give it since i created a new one i have to give it the right sys id so what i like to do is say are they different they are different so let's get rid of that one and now i have my ux page property so we created an action assignment within the action assignment we created an action payload definition then we created a new ux actions configuration because this is the first action i'm creating for this workspace or for this experience but i would not have to do that in the future and then i added to the related list of that action i added the specific action that i'm creating and then i updated this action config id so that that's not a thing that you have to do again this will be embedded in a community article and we'll have the steps in there but but yeah so that's the action config so let's go ahead and pause here and go back and refresh see if my button shows up on the list uh what if we open it here uh what oh this is why it doesn't all right you know what i added this list and i did not configure it so we're gonna this is uh brad working real time figuring things out so we're gonna make that vehicle and then the title is gonna be all vehicles and look at that when we change the table our button did show up here so i'm going to save i will refresh i should get a couple of vehicles in the list and then i have my button it's not going to do anything yet because i haven't really told it what to do what i want it to do so what i want it to do is i want that button when it gets clicked i want it to fire this event this list open modal event so i'm going to grab the name of that event and then we're going to do kind of our last our last thing here which is to do the add-on event mapping so i'm going to there may be a way to get this without the table name but i'm just going to stick it in there this is the six sis ux add-on event mapping list uh and so we are going to create a new add-on event mapping uh we're gonna call this uh open vehicle modal and then this is an important part the source element id uh since this is going on a list that's actually the the name of my list so it's going to be list underscore one so we're going to call this list underscore one source declarative action is going to be open vehicle modal and then parent macro opponent is the actual page that this is showing up on so it's going to be called vehicle list and then target event it's going to pull all of the page events from my page so i should have a list open modal right so this is this is really kind of the secret sauce the magic is this record this is how i'm connecting that button to an event in uib so let's submit and i have had some caching issues when doing this in the past so let's go ahead and see if we do a hard refresh here that was a command shift r let's see if that works so it should open the modal it did not now let's see if we got any errors no those look like normal things so what i'm going to do here is i'm going to actually run a cache.due because sometimes i have found that that helps all right so i cleared my cache i logged out and logged back in and let's see if this is going to work and then let's see if it works now after we did it did all right so that does work uh i had to uh what i ended up doing was um doing a cache.due and then logging out and logging back in i have done this before without having to do a cache.due so i'm not quite sure if that was the answer or not um but if you are running into that issue that may be what what solves it for you so let's hit success [Music]