all right welcome to inside the barrel episode let's go with 12 i don't know where uh john and i talk take you through some of the technical uh technical parts and behind the scenes of you know working in consulting on the server style platform the last few episodes we've been talking about the ui the now ui framework and you know using react for it and building these reusable web components and so we wanted to throw in a bonus one we gave an action-packed one last time this one's going to be a little shorter because we're going to show you taking we talked about custom event handling so we're just going to take you through how you would potentially do a custom event handling and we're going to take you through loading a a new another service now component or another component of yours so um so you can get some standardization going um so yeah let's let's jump right into it um that's what you want to do john yeah let's do it so if you want to screen share are you screen sharing john or masquerading uh do you want to i i have no preference yeah let's i mean let's let's change it up i will screen share yeah let's do this so you guys get any rain out there as of late uh well i didn't i did not um it maybe in the evening it like showed up but um let's see man he totally threw an audible for me so all right we should be good all right so like we get to see my my beautiful um screen and we're gonna throw this over here so and we'll get this bigger so we can see what's going on that work nice we'll move this over here so that's not in the way all right so um this is our you know famous uh little little module we've been building um and pretty much the a couple things that we added here um so the first one is on how do you include a component um so what we've done is we imported a another component that exists right so if you let me bring up servicenow's documentation on this and bring back my full screen the servicenow guide let's rub that back i don't know how you do this so well um so if you are uh on servicenow's um website there is this this like component section and and pretty much what this means is these are all the components um that are available that somebody else already built that you can bring into your system so like you don't have to build the button right every single time um you can just import the button right so so what we're doing here is we're importing this so that it's now usable as a component in order to actually import it you do need to npm install it so you'll notice in my package json i will have 21 no button did i see it yeah the now button right so you do see that someone you know had it and so to do that you would do npm install at servicenow now button and if you had published your your component to you know mpm you'd be able to use a component from a different project um so this is mostly good distribution model for servicenow like if you're like internal you may need to have either an internal i don't even know if they support private npm packages um they may be able to but you would really want to make sure your components super generic if you're gonna you know publish this thing so you'll notice that it installed it and thus now enables me to be able to import it so once you once you've imported it you then can just pretty much call it like is if it was something that would exist right so now button and you know that button supports certain things right so in this case this button is just going to fire an event um and you know what this will look like now if i do my development profile t i haven't choose this in a while anymore see it's not all fun and games when you're on the hot seat yeah yeah all right i gotta i gotta make sure that my profile is set up gosh then i gotta do it off screen yep no let's all see your password i gotta remember what's my dev instance got so many of them oh right login dev what else do i need to do username admin password now i gotta get this password so speaking of passwords what's your favorite password app i know we had this discussion the other day i'm a bit warden fan um i used to be a lastpass but i totally switched to bit warden um mostly because it's only like a dollar a month if you pay for the premium and you don't even need to pay for it so pretty much when lastpass had that weird thing where you have to pay for mobile or desktop i like abandoned yeah i i totally can understand that for me i am still using lastpass because i can do family vault where i can have so many accounts for the family which is quite helpful because no one in this house seems to be able to remember yeah yeah and so i'm always like dad what's my password i have no idea you are in charge of your own passwords yeah i do think that it supports family now i don't know if bo doesn't always have family um but i think it does so let's see if my local host is coming up not yet i wonder if that's that same issue that you had where mine was 43 000 unless you've got something running on 4000. now no i'm thinking that sometimes this proxy server just like fails um for the first time when trying to run it i don't want to ditch it yet oh okay ditched it sometimes running this this one the first time let's hopefully it's just a first time thing yeah there you go yeah it's weird sometimes the first one like struggles but cool so this is building all these beautiful modules and [Music] [Applause] after it's done compiling it should like us oh probably shouldn't have requested it while doing it that's okay come on buddy i think you need a new computer you should tell cass to get you a new mac yes um i actually have it was denied yeah but um i'm really cool and i want to buy like one of those new macbooks and i'll just you know figure that out when that happens all right let's see if i can you could you could get into uh um what are they called those little uh you know the little uh mac computers the mac minis or the yeah mac mini you can get one of those for fairly cheap even the new m1s you can get those fairly cheap yeah i think i think that's nice i mean it doesn't it's nice because it's like portable-ish right as long as you have a screen somewhere uh hey you can get those uh have you seen those usb portable screens everybody's getting these days the portable ones yeah i do have one that's like actually nice it's just a screen yeah it's it's not it doesn't replace what i currently have but it is definitely nice um someone should tell service now that their styling is greater than 500 kilobytes and babel doesn't like that how can you have such a huge style guy all right so we're up right and so notice this is that button right and you can see the difference between our two buttons right we just used the html button and that kind of came with it like no styling but this one you know allows you to you know uh stylize it and all your buttons would look the same so that's kind of the beauty of this you know uh import bringing in reusable components like a button yeah yeah um so the next thing we're gonna do so that was um that was pretty much it for the importing a component so any of those components on those guides you should be able to import the next thing we're going to talk about is this this button like when it is clicked it's gonna it's gonna fire um some it's gonna fire some things off um and so yeah oh you need to add the on click to that button try to think what did i do here like if you remove the on click from the original button the button click function uh oh yeah well that uh you can basically just switch it right uh yes yeah um i think what i did though i was i'm trying to think like what did i do for this uh situation because so fire right there yeah so this is this is what's gonna fire an event right um and yeah okay cool so so servicenow has some of these out of the box action handlers um that you could potentially utilize um so rather than us you know how we had to create this like on blur pass input and then we had to you know define what this um like this action was servicenow has some you know built-in ones that say hey if the now button is clicked this action is clicked like we're going to go and fire off this fire event right so let me stop you right there real quick for a question if i have multiple now buttons how do i unique them because right now it says now button click but you know if i have multiple now buttons would that fire anytime any one of them are clicked yeah that's that's a that's a good question um i'm not gonna lie i i copied this from from brad and from servicenow's demo to show this right because remember i was just trying to show this unique event handling right this is a good question i i'm more focused on like how does this part work in servicenow that's fine maybe yeah maybe we'll have to have another bonus episode yeah you're ruining my bonus episode um so yeah the goal here is we're trying to create a custom event handler in service now um and so we have this button when that button is clicked right this now button is clicked we're gonna fire this event and all this event is going to do is going to dispatch this event with this event payload and also tell us that you know i've been clicked right so so when i click if i inspect console here so we know that it works because that i haven't clicked shows up right so i've deployed this already but if you just did a a deploy what you have to do is actually on the the ui builder side in the platform define that that custom handler so if i go to ui builder just to kind of show an example maybe servicenow will give us some super fast devin since it's one day to do they need would that be an interesting business model i think as a developer i would pay for a higher performing dev instance if i use it every day did you get cash to pay for it because i don't know that i would pay for it personally yeah i mean really you're right it's probably too much all right so this um event category right is essentially what we want to to be able to configure right so it's saying i'm in global so let's go back to google where it says i should be in global but the idea is we want our our component to have you know custom events right so if you looked at yours john you would see that that one isn't there for you right like it would be empty for it for you um so what that what that means is actually let me just deploy it so we can go through that whole process together um that way we can see that it's blank while that's deploying so where we have to go is there's a thing called ux events in the [Music] in here and you have to define whatever you dispatch so whatever this code is dispatching you have to define that ux event here right so remember how servicenow i said had a couple out of the box ones right like there's there's some ones that already exist on here that you that i was reusing in that one example but so on this event fired right you um switch to the right scope and you just need to make sure that the event name matches this exactly and the label it doesn't matter the label is what's going to show up on in the ui builder so like let's delete this just to show how this is done we're going to refresh this because i've probably deployed already and so you notice here there's no events configured john so no events are available here right but if i go and create a new event event fire 2 just to make sure you can see it's been fired you'll know you'll know that it still won't show but that's okay because we haven't attached it yet [Music] it still won't show but you then go to [Music] component definitions and then you go to the component that you're like in our case it's this one so we go to our scoped app our simple report and on the bottom here there is this dispatched events so now i put in event fired and i save this now if i refresh this you'll see that that event fire2 is here um so that so that doesn't so then the next question is is how do we get the payload out of this right so we fired the event we're able to do it but now it's like we want to make sure that we can um actually do something with it and you'll notice here when you delete things you have to be careful like this is left over from you know before and so like i don't even know what table that relationship is but um i'm just going to delete this component real quick [Music] so that we can [Music] just show it let's create a new one so here's our component here's our event so our events firing but if if you just you know if i click save and i open this you'll see here if you try to you know do this it's not going to actually do anything um you know other than that i've been clicked right but we want to know like we want to do something with that data sometimes right maybe sure inspired events is going to you know pass some information later so this is where you would add a new event here and this is what's this is where you change from being your customized built widgets to being able to allow the developer to configure um what the component or the widget is doing um so this is kind of taking these those parameter options to the next level right so you're creating generic parameter options and then have the widget do certain things based on these things so we haven't really talked about ui builder in any of ours yet but what we essentially have to do is create a client script so the client script is gonna say you know uh go get this uh you know when when something is fired or when this is called essentially go get that event payload right so it has the ability to call event event.payload and then the name of that and if you remember that's the name of this event payload as well so what we could do is you know set state to something right if you did have some state or you wanted to do something with the state right you can you know set the state in this case i just want to show that we can retrieve that data so if we see the first thing you do is create that client script and then you go to add a new event handler and you find that the client script is there and then you click add so now what we should see is when i click that button and something in the console log should show i cannot believe this worked so that's essentially how when you build a component if you wanted to pass information from this this payload after this event is dispatched you can do so and then you store it on the client side and then you manipulate it or you set the state or you do things like that on the on the ui builder side of things and that's and that's really the that's it for the bonus great we showed um essentially the the now button right so um you know importing other components and then we showed you know what that component looks like and how it's you know being utilized and the guide shows you that and then when you dispatch an event essentially how can you catch that on the servicenow side by going to the ux events right you creating the event name that matches and then you go into your component and you configure the the dispatched events for that component so i'll stop sharing so that seems like a lot seems like a lot of back and forth yeah like you're yeah you're over in code you're back over in the platform again you know i know we've said this a number of times but it feels like this is it's a it's a totally different paradigm than current portal work right because really there you know if i bring it through s and utils and work inside vs code i'm in one place almost exclusively 99 of the time um that's where i'm at and uh so again it's just one of those things you'd have to get used to when you start building out ui components and and working um you know that stuff versus the portal yeah i do think it's really in its embassy for sure like i i think so when you deploy your component for example it's deploying the like the actual records on the table right so there should be some format or some way in the future for you to define that in your component and then when you deploy it those things are there right because servicenow does that for you like they they somehow are able to also when you install this deploy that record um i just haven't seen how you can do that via the code yet so it looks like we're just in this like early stage right of like eventually it's going to get there where you pretty much just work on built like you have a team dedicated to building components and then you have a team dedicated to building portal experiences utilizing those those components so it shouldn't be every day that you need to build a new component right it should be that you use these core foundational things and it's like plug and play and then configure so okay so so i agree i do hope that you have this division that you're able to complete all of your work in you know one one area right sure yeah yeah makes sense well cool that was kind of neat um seeing how you can grab those components and is that a component library like can anyone add to it or does it have to go through some system to get approved and added or whatever yeah that's that's a good question so servicenow's github actually owns all of those components um and so like they own the the out of the like the ones that are available today there there is an approval process on the npm side but there's nothing stopping you and i from going to a git repo building a component and then deploying it to the store it just wouldn't be at servicenow slash right it would be at cask and then you know the name of this component like if we said that the now button sucked right then we wanted a better one like we could you know create our own component and you know deploy that and use that in all of our uh all of our uis um so okay that's good to know for those out there who are comp uh contemplating building components the framework and it's awesome and it's powerful and it's definitely you know the 10-year looking in the future right to be able to build web components because this isn't just react specific right you can swap in whatever you know um library for web web components you want in the future um it's just you know at some point almost all of the core components would be built and then the goal is just for you on ui builder to like configure them in such a way and so that's the biggest shift that i'll see in the next years is less people building custom widgets and people more building beautiful experiences through the similar components yeah and you know this this reminds me and i'm going to say the word and you're going to gasp but it reminds me a lot of sharepoint development um and so when i used to do sharepoint it was kind of the same way there was a lot of components already built into the system but you could customize and do all kinds of new experiences with those so yeah cool well if you like this content feel free to continue to subscribe we wanted to make sure we got this bonus one out here i think this would complete our series of you know ui components um i think we'll do a another one on ui builder so actually using these components i think is kind of the next step um and how to you know quickly build experiences so you know thanks again you know have a great day