[Music] hello and welcome to ui builder bytes today we're going to take a look at a custom component that i've developed locally and then we're going to deploy it into my instance to this page that we're looking at here and we're going to configure its events so that my custom component can emit an event and then we can respond to it with an event handler in ui builder all right here we've got my local component that i built i used the now cli to scaffold this component and then i've added just a few things to it so this is for the most part an out of the box component i imported the now button there and then i grabbed some now button code from the component playground on the developer portal and then i've also added an action handler for that button click and all i do in that action handler is i dispatch an event called event underscore fired uh and i give it a payload and then i'm logging to the console to do some troubleshooting that event is going to be what we're going to want to attach an event handler to in the in the ui builder now let's look at the now ui json file so this is going to be where i configure my component and how it's going to work in ui builder so i've got the ui builder property here that has the name of my component i just named it eventsdemo and then we've also got the the actions uh here where i have configured that event so this is where i'm going to deploy my component to the instance so i'm going to use deploy and i'm going to go ahead and force it because i have already done this once before to test it so it's going to attempt to deploy my component to the instance here it's going to delete the old component files and then create the new ones all right and now my component's been deployed to the instance and let's take a look at it in ui builder now that we've deployed the component to the instance i should be able to add it to my page in ui builder without doing anything else so let's go ahead and click on add component i believe i called it events demo so let's do that and this is what that component looks like it's just a button and i don't have any events available and the reason this is like this is because there is an issue with the cli where it's not taking the actions we defined in the now ui.json and creating the necessary records in servicenow to make those events work luckily it is fairly easy to make that work and so this is where we are going to do that so i'm going to pop back over here into the platform and i'm going to go sis ux event i think all right and so this is the table where all of my events are defined so we're just going to define a new event and i think we called that event fired um so we'll put that here and then the label we're gonna say event is fired the label is what's going to show up when i need to pick this event so i want it to be fairly unique so let's go ahead and submit that so that's there now i'm going to find my my component record under sis ux macro ponent so i'm going to look in that table and it is i think this events demo component so i do need to switch to its scope and then it has a dispatched event or that's what we want to give to it and it's going to be that event is fired that i just created so i think that should do it i'm gonna save and then we're gonna come back here and do a refresh reload the page and when i click on that component i should now have the opportunity to add an event handler to it all right i have that event is fired let's add an event handler uh and we're gonna do something easy how about we just link to a destination and we can just say actually how about let's just link to [Music] something that is near and dear to my heart which is the developer blog i'm going to add that i'm going to save this let's open and then we get the developer blog and now we can read about glide query all right well that was uh how to uh make your custom components work in ui builder with custom events and event handlers there will be an accompanying accompanying blog with this video which will also have uh kind of the rough steps steps we went to in this video thanks