all right welcome to inside the barrel um i don't know what episode we're on so we're going to stop keeping count of it but john and i are going to take you through being you know a technical consultant in the servicenow space a little bit behind the scenes getting our hands dirty on you know trying to to solve these problems for clients you know technical things in order to you know make your life easier um when you have to go and do it um so with that we'll just dive you know quickly in we have a really fun um packed schedule for you or maybe it's back who knows um but essentially what we're gonna do if you've seen our previous episodes we've been talking about that the now framework and the um you know a lot of the the transition that servicenow is going through on enabling developers to you know build their own components or widgets you know on their local machine and then deploy those things up and so um what today we're gonna do is our part three of deploying so we're gonna kind of take you you know fast track you through one and two um and then get you to a part where we walk through some code on what we're trying to do and then we're gonna you know deploy that and you know see what it looks like in the instance so hopefully john woke up his instance this morning um i did yes cool um so i think we could kind of go right into you know screen sharing unless you wanted to you know add anything else um no i think you did a good job on that one um yeah we can go we can jump right on in cool all right so i was just going to say i even have my terminal window ready to go yeah so good so just kind of a little recap if um you are coming into this for the first time the one thing we do is we install the snmc binary there is some docs on installing that snc binary which maybe i'll quickly find for john um how do you do the the version is it snc uh uh dash dash version is it just yes that's rude okay i think it is nope no i lied but you know what i want to say it's the ui component yeah that's probably it that's probably what it is yeah there we go yeah and you can get this on the store um i just let me see if we can quickly find this for people so they have it um store cli yeah maybe i'm terrible at googling um all right just take my word for it you can you can get this on the store yeah i would just type in like servicenow cli you know service out store there is a deprecated uh npm module one that they went with originally in like orlando um but as of like quebec and rome the official version 1.0 is in uh the servicenow store so yeah you'll be able to do that um great okay so then let's make sure so the first thing we want to do is make sure that you are logged into this instance so if you type in snc space ui dash component and then log in we will see we just log in it's not dash dash use it yeah i think it's just login what does that require oh there we go that's what i wanted okay so we want so you may want to do this off screen if you don't want your password to be shown but just for people you're going to type in host to change to the you know your dev instance um and then you'll do your username probably admin if it's a dev instance and then your your admin password but we'll try to prevent john from having to reset his password so something like that and then username your name did we decide we had to put the host in quotes i think we did i think we did for safety but i don't know if you actually need to i okay yeah i will find that right now then and then admin and then before i move this off screen you do that and then put in your password so let me get that over there do that real quick all right so it does come up and say connection to the url successful and credential saved um and then it probably still shows your password above yeah cool that's why we're definitely so now you can do that that login command so snc space ui component login and that should connect to it now is that just for this oh oh wait no never mind it's just it's just that one time sorry you may have to do that again off screen down but that's fine go ahead well i was just gonna say does that does it only work um for the time you have that uh uh terminal session open like if i close this am i does it uh disconnect that or whatever yeah as far as i know it's for this session there is that profile set um that you normally could do with the the cli but i haven't found the way that to get that to to properly remember that information so i've kind of just gone with this login this login route um so the next thing we want to do is uh can you type pwd like where are we um what did you say pwd it tells us where we're located on your computer so do we want a cd into like a development folder uh generally i keep it in i put these things in my documents because i have icloud sync going on so let's do it let's see is that within it should be there yeah well let's just make sure ls yeah and then what is the mkdir um uh yeah mk dr and then you know just name it something um i don't remember what what we're on so i'm gonna do i'm gonna do 10. okay and then let's cd into it and uh i sent you a link john but one of the things that i want to highlight is there is a the reference um guide for um for the now experience ui framework and i highly highly highly recommend just reading through that um just in general like it'll talk you through like how this is based on the react you know uh framework it'll tell you about the security behind it it'll give you a lot of scores like if you're ever like kind of stuck on you know what does state do or view do like this is where this reference guide is good for what it doesn't isn't great at is telling you like if you're stuck on how something works this this isn't the right place for that um you may end up in like react documentations or things like that but this is a really good starting point that i highly recommend you read um the the other section here that's so under like main concepts it talks about the react related concepts in here um and some of them are react and some of them are are not reactant but like state for example is here so it kind of walks you through how state works the other thing is is under recipes or sorry examples if you ever get stuck and you just want to see how some how they got it working if you all the way on the bottom yeah there's examples here's some examples that servicenow provides for you to kind of like copy and paste and walk through so they talk about what concepts they're covering and then you know what they're going to build so this is really really useful if like you're just like how do i do this thing let me look learn by example and so they give you under the setup it tells you follow the steps in the readme um in order to you know get this kind of working so um just wanted to give that shout out the documentation is probably constantly improving on here and um but the main concepts are probably um you know the core of what you want here so uh on that documentation let's go up to the cli or outside of the ui framework um and uh let's go to the com development flow i think it is yeah so what we're gonna do is we're gonna create a project so you're gonna follow a similar thing here see if we can't get everything on the same screen nice all right snc this would be like your company name of some sort now do i is this that piece that i have to use the x thing from my instance this is not the piece this is the you have to use the add sign for this one so this is technically building the the scaffolding for your npm module all of these components that you build are essentially like npm modules so um normally you would deploy these modules to like be a registry and normally the registry you have is related to like your organization or your company so normally this would be like cask in our case so right right but that's okay and so we'll do a simple report i think is what we we called this last time so yeah perfect so it should go and create so this is creating an online one um oh your your name can't contain capital letters so this is going to create an online one um and it should connect to that dev instance that we we set up earlier and it created the scope for us um so the scope of our project is you know as it says there so in that instance that scope will that should be created you're first going to want to uh cd into the folder john i think oh you're already there perfect so yeah now just run a npm install now tell me this does it remember certain things because i'm pretty sure that's not the actual uh that is not my uh instance number uh it should we'll find that out real quick when we deploy it [Laughter] well i want to say that's my that's the other one the other oh so that could be where that profile set comes in yeah um okay is that one online no not not right now and it's also rome and i think we had issues with rome yeah well thankfully this part won't take us very long so if we have to you know go back now we'll learn why it's important to to do the profile set yes yeah so so it sounds like if if we're guessing right here it's the that logging command allows you to develop against that instance so like if you ever needed to pull data from that instance whereas the profile set is for creation time to create on that that instance so we could we could still develop against one instance and when we deploy we can deploy it to whatever that x one is and be okay even though we developed on a different one the problem you're gonna run into is there's a lot of servicenow um templates or like fills in data related to your other instance so it's gonna yell at you saying like that scope doesn't exist or um it it should work right but if if it yells at us we'd probably have to do some transitions transitioning of work so but in our case it's okay um we also ran into we talked about you know on the last last call around like uh offline versus online right and so if you do start it offline it may be painful to try to to do it to port it to online so you may just end up in a case at least for now until they do a better transition or documentation on how to go from offline to online just like copying your code from one to the other right so um yeah just kind of keep that in mind if you start offline look at all this beautiful c code [Laughter] imagine if you had to like type all this out oh but this fills in you know a lot of that stuff within the folder right um yes you called it scaffolding or something this is what it's doing is creating your node modules that's essentially what what it's doing so this so in in there's what you're getting all is what yeah adding in yeah and so that's because part of servicenow's framework is referencing that data um so these are essentially open source plugins or modules that were developed to make your life easier so so rather than having to create that on every project very similar to like your java and maven you know dependency like thing this is is doing it um and because node is cross platform sometimes it actually has to build components for your specific platform right so this is what this is doing it's saying like hey um no needs to be built on your machine for your architecture so it's it's doing that for you here and then storing that in your node modules okay but maybe we should tell cass to buy you a better computer because it's taking a while i don't think this is a bad computer it's not a developer computer we're developing now oh oh so i need one of those one of those m1 32 gig macbooks huh yeah you need like 64 gigs of ram and like you know quad quad core i don't know that they it's whatever their m1 chip is now it used to be you could get that i9 and and burn yourself but uh now it's all m1s and whatnot and it's interesting i wonder if the m1 support all of the things that you would need to develop on right because a lot of that stuff has to be rebuilt for m1 so i remember like chrome wasn't supported out of the gate when they released the mac yeah just because google didn't have access to that you know m1 right so sure yeah so they had them so what's your plans for this weekend while we wait this weekend um boy i i'm not even sure i've thought that far you're like it's wednesday at 11. i was thinking so towards the end of this week it's supposed to get warmer um and and by that's relative obviously it's supposed to be like 87 today but uh by the end of the week we're supposed to be in the mid 90s and i was thinking maybe tomorrow or friday uh after work heading up to um there's a lake near us called bear lake heading up there for a couple hours it's really nice when you go after work because it's it's a little cooler there's a lot less people and it's it's more enjoyable because it's not necessarily as hot so you just sit out there on the beach let the kids play and and just relax so we might do that so is it called bear lake because there's bears or the lake is shaped like a bear uh there used to be bears in the area uh way back when i believe is why it got called bear lake but it's it's it's a really neat lake it's really blue um because of the lake itself um and it's really cold no it's not pollution but it's it's really cold too like probably even this time of year even though it's low it's probably still in the like upper 50s low 60s temperature wise okay no thanks not jumping in all right i'll take the bears instead of the lake um so yeah so it looks like it installed which is awesome so what we'll first do is we should be able to run the snc uh develop so so snc ui component develop and then i know you have to do a port because when your reports are being used so do dash dash port i think we're gonna use 4000 sure that works and it should run or compile don't mind any of those uh unpromised rejections that's servicenow has to improve this is what i'm worried about i'm pretty sure my x code should be different than that 9000 number but this is at least telling us we're connected to the one we logged into right right yes yeah that's good i just think i think you're right about the profile set that we're still some internal components reference that and we're gonna get we're gonna have a problem there [Laughter] and i wonder if like i remember last time we tried this it it did hang on this for a while i wonder if that's because of that few yeah where's the like fast forward button on life right now i know our magic oven oh look we're done yeah so let's um while it's running let's open another terminal and just kind of get it set up um for just in case right so let's create a new directory because or go cd into your your documents and then create a new directory uh let's see what are we on perfect all right cd into that and now we're going to do well i guess i wonder how to do that we need to do that profile set then yeah so let's let me find that exact command for you so all these commands i'm looking up are on that reference page i'm just like quickly going to doing it so it looks like it is snc configure profile set and i think you can name this profile actually so we should be able to do things so is it like it's all separate words snc configure profile set there's no dash yeah that is that is correct but it doesn't look like it the name allows us to name it based on that okay so is that the right instance that is the correct quebec instance yes cool press enter basic admin we want json i like ammo but it's just me okay so it looks like we're working um so so that's interesting so that probably saved because you logged in on it first right right you ran that login command well we were already logged in as far as the current session goes i suppose yeah so let's let's try um let's try creating a a new project in this one and see so snc you know ui dash component project and then dash dash name and then the at sign gotta be lower case and then simple report two super simple report super simple report let's do that and then description yeah let's see what what that does yeah so that's the correct scope now all right so that's well now you have to run npm install on this one so can we just close this guy over here so let's scroll up show me again if if you can what was the scope that this one created it oh it's probably a lot of it's way up there am i going to be in the future oh god oh no i was just going to say i'm pretty sure this was in the 9000s for that scope aren't those the same numbers so nine two eight nine three that is the incorrect where did it make it where did it show scroll down a little bit right right above that guy's head that's really weird yeah so that's not the right you going crazy john you're going crazy so is that the right scope i mean is that the right number for that should be this that's okay you wanted to create two projects that's fine so let's go to the one on the left that our proxy server is failing and let's just make sure our instance is up which i'm assuming you'll refresh that page so it's right here i mean and go to i think we could check the property there right like if um it may be working let's go to open up a tab and go to localhost 4000. it normally should say that it's compiling so i don't think you know fourth four thousand it will yeah it's not it's not because it hasn't so let's control see this and just try it again one more time yeah try changing the port all right that's fine that's the call sorry okay but while we wait for that then go to your instance you should be we should be able to find that property um [Music] so sis underscore properties dot list and in the value yeah we just type in that value x underscore maybe not um boom there we go so that one just piled blew it up i don't this is the wrong pretty sure that's the wrong project okay so now we should go to localhost 4000 should be good should be running our component that does nothing yay right that's totally fine um so let's um just quickly go into that so let's open that folder so that that's working in visual studio code oh and visual studio okay the 10 folder yes okay cool so let's go into source and then uh the simple report and then index and then just in that div on line seven let's just add you know hi yeah perfect save that and check your local post that should refresh for us yeah report cool so now what i think since we haven't demo deploying let's just deploy this to the instance and then we'll we'll uh we'll do that part first so you can control c that it's running now and then now we'll do uh sncu ui component space deploy okay and while that's doing that can we go to the visual studio code just to let people know it and then go into the now ui json so here is essentially where you want to make sure that you have a better label than we have and a better description um because this is going to be called my component on ui builder and this is also where you need to validate that your scope name is correct and that your component name so on line three is also correct what you can do is use that login command to so like let's say you create the project offline you'll use the login command to be able to validate that this is the right scope um so just as an fyi maybe when we have free time at the end we'll we'll go and try to break it so cool so that looks good it successfully deployed it so if you go into your instance now go into ui builder we should find a terribly named component we should find it to give it a second to load this page because it takes a bit um so oh man it wants us i don't think you have one created let's create one real quick press the plus button on the create experience in rome this is improved by the way so don't mind us uh can you change your scope back to global for now yeah and then click new we'll speed run this one and then title it anything and then the app shell oh yeah the app shell ui you're going to want to select the uh portal app shell and then the url it doesn't matter just anything super simple yeah nice and then and then on the right hand side where the admin panel is we're gonna go there we're gonna open up the document create a new document and name this you know super simple perfect then submit and then submit all right um should be good there cool so now go back to the other tab you can close this one and then refresh this page and your beautifulness should show up super simple exercise awesome cool create a page just name it home awesome create and shouldn't do this in global scopes but that's okay click done right awesome now we're gonna add a container so add a component which is okay it'll give you the option there i think you just click on it at this point on the left hand side because you selected where you want it it was right and then you could click the plus button of that one you should be able to find my component it'll have no icon it'll look ugly there it is awesome yeah and you could click the open but save it and then click the open button up there awesome so there we go cool so now we went from building it logging in deploying it so look at that we're backwards already so now let's now let's uh do some oven code here and kind of walk through the the fun stuff on how to how to have useful so i i sent you some some code the only thing i would paste that underneath it or actually before you paste it in or paste it in we just need to make sure line 11 is correct so the one that i gave you i didn't actually or i can let me modify it for you i'll make it even easier for you john i just added this code that i pasted we want we want true magic what's that number nine two what's that let's see that one nine two eight nine three two three that's nine eight nine three that uh can you go back to your index.js uh this one yep cool all right you should be able to completely copy the code that i gave you and we'll we'll walk people through it so they can see some cool stuff am i replacing everything on this yeah blow it all boom okay and then save it and let's go back to your terminal and we're gonna develop first so we can see it locally and then port 4000 oh wow it's probably going to yell at you yeah something's running on 8080p you can't use this port the one just for people's awareness is that's actually a proxy to your dev instance so if you went to localhost 3000 you'll see that it'll it'll give you a certificate issue but it'll show you that it's your dev instance also super cool yep 8081 is already in use so you're going to need to run that command again export and just to show people not crazy on it open a new tab and go localhost 3000. and so you'll see that it's trying to bring into service now it's so interesting so that is your your your instance kind of proxy through it so cool so eventually this will finish completely and something should change here too i think we have failed to compile cannot resolve oh so you haven't installed oh that's right we need to install uh something on terminal so you can close that or cancel that uh you're gonna need to npm install at servicenow that the name of that dat slash ui dash effect http so servicenow has some helper modules um can you spell npm correctly no i cannot spell and yeah servicenow has some you know helper modules that will make your life easier so one of them is this ui effect http there's documentation on the effect on what effect is in react we won't go into that but on the on that reference but essentially what this is enabling us to do is make http calls in an easy way so so essentially what we're going to try to demo here is to show you how to use state easily how to pull data from your instance locally if you ever needed to make calls to it how to use properties for your component so that you give the configure you get configuration um possible on ui builder and then how to use input from someone interacting with your component to change data in your state yeah we we talked a little bit about this last um last installment where you know you get all these uh hello world examples and i think even the counter example that servicenow has is great but it doesn't really you know do much there it doesn't explain how to you know get data into your component from your instance and do stuff with it that's i think that's you know i i was lamenting that that doesn't that doesn't help me when i'm trying to learn this do much you know sure i can make a counter great that but i i want i want better stuff and so we talked about it we're like you know let's make this do this and that and and then um dorian was like well let's have user input too and i'm like okay sure let's do that and then we ran into a whole lot of problems trying to get it to work and then dorian figured it out was like hey now we've got it working let's do this you know and so it was uh i just think it's a better a better way to show how something works when you can do something like this versus a hello world or a counter you know it's it's more interactive and uh i think it's it's a it's it's just better to get your feet wet being able to do something like this yep so let's refresh that and see what i've given you nothing of course what did you what did you break what well let's see what terminal said turtle probably told us terminal i thought came back and said compiled successfully so what did i do um maybe i did a typo on the component is x 2 is that the right number yeah oh is that the right number well let's make sure eight or nine two eight no i type it so go back to index.js nine two eight nine three nine take away the eight the first date yeah that's the only spot it is okay that's the only spot so close there we go good cool so uh we're gonna just click me first to show everyone what this does it made a call um and they made a call to the incident table um and then i just want to we'll do a full demo and then we'll go into the code okay so and then type in problem up there and then click me and then we made a call to the problem table so what this demonstrates this simple thing making calls to your instance managing state uh and even taking input from someone using a component so just um and these these three things should guide you towards you know building really cool stuff now that you you know how to to utilize this um well it's like it's like the core elements here i mean this is what on the the angular portal side i mean this is what you're doing you're always grabbing data and presenting it and you have the input you know i can imagine this being a drop down and and doing you know as a report goes you could have date ranges and all that good stuff but this is this is a very crucial first steps on getting you know to work the way you want versus the click me where it was just adding a number you know this this tells you how to get in there yeah so um let's also deploy it because i do want to show something as well and then we'll dive into the code sure uh and maybe let's change the name of it so that it is in that now ui.json and then maybe in the description as well and when he tries to deploy this it's actually going to give him an error but we'll talk about it and so it yelled at him saying this already exists um so in order to do the deploy this and override it we have to do a dash f or dash force just one dash or is it two if you do dash f it's fine yeah so this forces it to overwrite the current one that's good to know you don't want to have like 30 or 40 my components what's going to be interesting is what does that actually do on the side right these are two totally different components right so um we'll see how well it like handles what was currently there do you know anything about the versioning i guess is another question uh versioning is handled on source control right so on on this right well you know like if you think about from uh the old portal side where you have you know like a script include or whatever you have versions down below on a related list so these versions are there oh so just go back to your terminal so so what the component actually is is it's made up of those four tables right so the sys uib tool toolbox component the syst ux macro opponent like those lib components in the solar script so like those are actually tables in service now that you can go see that reference your new component does that make sense yeah so that's some of that is version but not all of that right cool so let's go to your ui builder and just hit refresh and you'll notice that it was magically replaced which is great like that's what we wanted um and now if you actually like click on the outside not the click me button but like click on that component the other thing i wanted to show is we added zero properties on the right so there's no configuration so we'll make sure we add some configuration there to show you that not only can you do input for the person interacting with it but you can also configure the component just like you could configure other ones so so does that overwrite does that not change so if you click uh like the plus button um underneath yeah like in the middle yeah click add let's add another container just for funness and then click plus and then now you should be able to find the super simple one oh i see okay so click that one and so how do you remove components um you can click those three dots and remove them yeah there we go okay cool all right so now that we got it deployed let's open that and just make sure that what our code did it works as well click me hey awesome yeah awesome cool so now let's go into the code and we'll talk about a few different things um so i didn't organize this code as well as i would have liked um so let's start with line 36 the view so the first thing is what this view is doing is it's the thing that's actually going to deplo uh return like your html so on line 56 it's doing that html uh work and so if you look at what that's doing is on line 58 it has some input box and then on line 59 it has a button and then line 60 is it returns some results and you'll notice that some of these values or the on click are referencing other things right so um so we're we're gonna what that's doing is online like 37 and 38 we're referencing things from the state or state properties so just kind of keep that in mind that what you're what we're doing here is in your view on line 36 we're passing in state and then we're saying hey pull out some of this information from the state and set it to variables that we could then use um after state the other thing we're passing in is update state and dispatch and that's because we want to update the state you know when some action happens right so for example on line 58 we're doing an on blur that's that calls the the function called pass input which is line 40 which will pass in what that value is it'll trim it and then it'll update the state so so it's not actually making a call on blur it's just storing your state as you go and you know if you ever are troubleshooting you can console log state a lot of places that's really helpful to understand the state of your your component because in react things don't execute in like a sequence they're event driven so the event here was this pass input or this on blur that is calling this pass input and then that event has an update state which is you know updating the state so um and then you know the other important one here is on line 59 is the button click right and so for button click um when that button is clicked it's going to call line 46 which says hey take in you know input table which remember we've updated state so we know that that's correct and then dispatch so dispatches call another event to incident fetch requested with these parameters so that's kind of like what this component is doing and you know obviously when we're doing dispatch there's some you know there's some things we wanted to understand about dispatching so the way dispatch works in line 49 is it's gonna look at your um your action handlers because we're passing an incident fetch requested with this data so if you go to line 71 you'll see we have an action handler for incident fetch um uh requested and it's saying call this function fetch incident effect right so again you know we're not sequencing we're doing events right so then if we scroll up to where that event fetch incident effect is it's saying go make it that http effect remember that node module we installed um to make the table api and we're going to pass in you know we're telling it that we have an object that we're passing in that has those data so that table that query parameters and then based on what how that the result of that effect whether it passed or gave like a 200 success action or like a 500 error we're going to call we're going to do another dispatch of incident fetch succeeded or incident fetch failed and so in the success after line 16 where it says incident fetch succeeded we're going to line 21 and the reason why is because if we scroll down to our action handler just to let let everyone know for our action handler on line 73 we have the succeeded which calls that that function handle fetch incident succeeded and so in succeeded we have um because this is a an action we have the the the object action and we also want to pass an update state because we want to update state based on this action so this action has a page load and then we say hey this payload has some results so this is that the 10 results that we're getting from our instant effect and then we are going to use some data with that right so we want to create some html out of that data so that we can then display it right so that's where results comes in so that uh that fetch incident succeeded is saying hey go update the state right to say a result is equal to this html that i just generated from this payload that i just received so so that's kind of at a high level what this thing is doing it's going from you know the simple storing this input data somewhere to updating the state after it stores that input to dispatching when the button is clicked to calling an http a call to then you know receiving that that data or that payload creating some html out of it updating the state and then displaying that information yeah and so this this kicks off all the questions in my mind i'm like oh man now that you know now that we've got something happening where we're talking getting data and presenting it i start getting curious and i'm like okay well now why do things do the way they they do them you know i'm not used to react i'm used to angular and i know how those things work but like one of my first questions is going back to what you were saying about the on blur isn't really doing anything but setting the value um of uh in uh input table is is it re does does react require that something to happen some sort of event to cause that to set like do you have to have that there would it would it not just uh automatically set input table just anyways does it not work that way yeah it doesn't yeah you you really because this is event driven everything needs to have some sort of event right so like the that input table if you look at line 38 where that's being referenced it's saying that the state has this value of input table right originally like there's some initial state for it and when that value you just put in that you're saying because data is uh you can't just mutate data in react it is data is immutable you have to take the action to update that that value okay so um yeah and so i do think people are going to struggle a little bit because like uh oh yeah yeah just because like angular is much easier where you know you have your ng model and it just it's just updated you know as if you type something in that updates the ng model real time right there's no event other than you typing to cause it to happen right um and so yeah this this is going to be struggle i already see myself having issues just because i'm not used to the way these things are built i'm used to the way angular does it um and so this is going to take me some time to do that another question that came to mind and it might be a two-fold question i don't know but i was thinking about this section here and we're using the api to to do the calls um do you know and you may not and that's okay right now with with like the angular way of doing widgets and so forth you have the server side script where you can run actual server side code or call to a script include to do stuff like that is that available through the react system or are we bound by the only being able to use the api whether or not you're bound by it i don't know but whether or not i would recommend using just the api i would recommend just using the api yeah um yeah that would be my recommendation um i haven't seen examples where you could just use glide record right in here um and and so i would probably like stick to using just the api but okay you know the more i dive into this the more i find stuff so i don't actually know if you could call glide record directly here okay i i just wonder because you know sometimes i offload a lot of scripting to like a you know script include and call it through the server side um so you would build components right you could build components that their entire job is just to you know do server side processing right sure just as like this create http effect is actually from this module called at servicenow slash ui effect http i envision like you being able to create other modules like that that abstract the api part right so that you get these functions that are just you know easy to use for you okay now that makes sense and and it does really i mean it it opens up the flexibility it's just you know i'm at such an infant stage here that it's like so overwhelming on what needs to be done and and whatnot now another thing i think we should talk about too is in our setting up the list items we um we map it to um kind of create the uh iterators or at least the the you know the multiple pieces we're going to get back and then we kind of convert it here to some html um i know when we were doing this originally this is what we found to be the way to to do item right a list of items um do we know at this point like there's not really a way to iterate through here like you know with angular you have ng repeat we have to do it this way and map it out to to deal with it right so again this would be an example where you may create a function that you know abstracts the map part and you call that function and it handles it in a different way right so from what i know from a reaction standpoint when you want to iterate through something you use map that's just kind of the route you go um cool so let's uh scroll down um so we talked about action handlers and then so we didn't really talk about initial state here so on line 82 you know that's where in our view we're able to pull something needs to exist in the initial state if you're planning on saving that data or manipulating that data you'll get an error if input table didn't exist for example or result didn't exist in the initial state right um you got to set them up to use them the other thing is around properties so the difference between properties and state so properties are the things that are going to be configurable on this the servicenow ui builder whereas state is just internal to your component so kind of keep that in mind when you're you're developing this like is the initial state where is this is just like an internal variable or do you need this this uh property to be exposed so that you can configure it um and so in order for that to work i think there's actually a few other things so to show like notice that properties didn't show up for us when we deployed our component so here on the right hand side it didn't show up and that is because we didn't configure something for it and where you go is go into your ui now dash ui json and so inside here i'm going to give you some more um more fun more fun things for you some more oven code some more oven code for you so this one took me a very long time to find so i'm super happy to be able to share that so you don't have to go through it so you so essentially we're we're setting properties and the property exists there and it and it works but the the problem is is we're not telling the component when we deploy it um you know what oh and by the way that goes underneath the line three like you could put it online after line three you mean like here yeah exactly and then just make sure it has a yeah perfect so like essentially what this is so what we just pasted is one we're defining what our actions are so that someone could see those things um and we're not even going into events but and then properties like we're also defining that these are the configuration items that will show up on the on the server so so if you save this and then redeploy that should that should kind of work for us yeah and so the thing that we didn't really talk about is exposing events um so like let's say you know we're firing off of these events or these actions that are that are happening but we're not allowing this like service now to do anything on those things right so kind of keep that in mind that um we're not actually defining events that the system could then you know potentially use and you'll see that on other ones like when um when the button is clicked like do some event right or configure some event right now we're hard coding an event to say when the button is clicked it has to do this right but if you wanted to allow the ui builder or the person putting the component on the in the agent workspace or the portal you can allow them the flex stability to do something with that uh with that event does that make sense sean uh yes i probably need to see it in action to uh yeah so after you deploy it better let's uh just uh we'll quickly discuss it so if you refresh and so let's click on it and see now you'll see on the right-hand side hey we we now have our property show up um and if you notice if you remove that table to and type in like problem like it's it's actually looking at your instance right yeah yeah yeah so just kind of so that's how you modify that config side of things and then we we talked about how you modify it with your data by pulling it into your view um and so on the right hand side the events tab yep notice there's no events here but let's add another component here like let's let's just add the list um component just to kind of show you john um like uh yes yeah let's click add type in list or another container perfect that's any one of them now on the right hand side there's a lot more config this is a very complex one and then click events so you'll notice here that wait they allow you to say hey how do you want to handle the event rather than us handling the event so like that's that's kind of the you know a little bit of advance but the idea is give the developer on the ui builder like you're essentially able to create more reusable components in this world whereas like your widgets in service portal you're building a widget and then that widget you only have the like options parameters right to you know make it configurable um but this allows you to create something like a component and allow the person when they place the widget uh or the component on the page allow them to configure it so does that kind of make sense on the differences they're done yeah yeah no that's that's really interesting i i because i'm thinking you know as i compare the two obviously that's way more flexibility available to the to the you know low code i guess if you will or um no code solution right because they can just drop it on here and be like oh well you know actually i want to be able to do something when they click on a row right versus where that's kind of there's not a the most you're going to get is it's always assumed when you click on a row it's going to go somewhere right so all you may get is where it goes to be able to change but it's always going to be it goes somewhere it doesn't just or it doesn't allow you to make that different right yeah and some of the differences like if you save this like you save our page now and then open it if you click on any of those rec and then go to open because you didn't configure any of those event handlers you click on any of those nothing will happen right right so so that's i mean it's good and bad right and widgets it's like it's nice because you'll know that it'll just work for the out-of-the-box ones but like maybe i want this change to open up a related thing right or something like that i don't know but um so kind of and another thing because you remember you changed that uh property to problem if you click click me you'll notice before uh it did incidents but now it does problems yeah and that's widget options kind of have that that same thing i mean you can set the default and it'll do it this way and then you can once it's filled in it'll do it the other way but that i do like that you can actually set that you know um easy easily enough here right yep that's that's very handy um and uh no i mean i i definitely see the the benefits of moving towards this um obviously i'm still a little shy of it because it's when i just don't know it um yeah but you know that's that's how i was when i first started portal i was like oh my gosh i don't know what i'm doing here this is overwhelming it just takes time you know yeah i think there's like you need to understand the basic reaction like there's got to be some class you take that's react focused and then there's like some class you take that's servicenow focus because servicenow is it's it's doing things a little bit differently right like the update state right they they the properties here like they it's react under this the hood but servicenow is trying to make it easier on you but because they're trying to make it easier on you like it's going to be different than you're just stack overflow searching right and and see i think that's kind of the same failings with current portal right you have angular but then you have the way service now does angular a lot of times though the translation is not difficult um you know you you really kind of just split things up and know where each part of it is and it works fine and i'm sad that it or i'm sad to see that it's kind of the same way here too where they've taken it and then it's servicenow's version of it where you know there isn't that direct look at stack overflow and just paste it in and it works right now you have to do a little bit of abstraction or a little bit of uh um conversion to make it match how servicenow does it that's always been kind of a sore spot with me is that it's not just direct right yeah you know it would be hard to make it direct just because like react changes so fast right like they need to like put out like just like angular right the angular that portal's using is like four years old 10 years old like well so we're what is it version 1.7 and they're on version something in the double digits yeah yeah so you know that's expected though they can't they can't just keep implementing the new versions right because you've got and this it's even the same with like font awesome right you've got an older version of font awesome you can't just throw in the newest stuff without a lot of regression testing because if you put in the new version of angular what does that break for everyone that builds stuff you know on an older version yeah where's the you'd have to have some sort of conversion layer or something like that and then you know there's all your processing it's i understand why you can't just keep going with the new version but um i wish there was something in between where you could at least move you know or where it would move faster than it does yeah all right let's uh you want to stop screen sharing and we'll kind of close it off because we're a little over sure yeah yeah so so today just kind of to recap we you know got you logged into the instance right using that ui component login we did a profile set as well just because after that just to make sure because i thought the numbers weren't matching correctly yeah we created an online project we out of the box just developed on it we then made some code changes to it um and we deployed it multiple times right yeah we we touched on properties so like configuring those properties in from the ui builder we talked about state and initial state we talked about events or dispatching events that are are like your on clicks or things like that we didn't talk about event handlers from like configuring those in service now so i think that's like a another advanced one we could do a whole talk on um but that should get and then we talked about like you know making calls to your your instance so um we should be able to you should be able to create components after this right like just you should be able to create a super simple report right yeah yeah yeah i mean getting into like pulling in dependencies of like d3 chart or like you know your favorite node like what's cool is because this is built with npm in mind or like the node um framework in mind like you could pull in you know d3 and be able to start using d3 commands like you know right away um or you know high charts right like there shouldn't be anything blocking you from you know hey there's some awesome module that makes your life easier put that in your your your package.json install it and then like you know run with it so you know that brings up another point i was taught you know this actually came up earlier today where in consulting you'll find clients are very shy about having external calls to libraries right because you can do a lot of uh cd and calls right so if i want d3 i call the cd in well there are some clients that don't don't like that and they want it to be localized so now you've got to take d3 and figure out how to convert it to you know your ui scripts or whatever inside service now make sure everything calls correctly where this um you know if you're just doing an npm install it's all done for you it's all there it's all brought in and wrapped up nice and pretty with a bow on it where portal not so much and i can definitely see some benefits there you know versus how we have to do things now yeah yeah there is um it is kind of interesting that i wonder because you're actually deploying the code of like all those node modules for you um to your instance i i i believe i i could be wrong um so i wonder how servicenow handles that like if your the plugin that you make is doing external calls like you may not just be you may not be saved from from you know looking through d3s node modules right and and and making those changes yourself so interesting it is it is definitely something to consider i wonder how servicenow is addressing that um uh because i can totally see that being an issue um but you are right you are deploying that node module that you get from the internet packaging it and then storing that state so that doesn't change right your cdn can't change right like that code will always work that way but the question is is if that code you chose has like a bug where it or makes a call right like then you're you're you're potentially making that call every time so yeah a week later they come out with some huge security patch and you're like oh you're like the good thing is you should just be able to npm install right yeah deploy and be done you know unless you're like a week out of your project already you're done it's it's it's in prod and you're on something else now yeah yeah yeah but you know that risk runs everywhere so i don't know that it's much different it's just easier to fix now you know because yeah you can just re reinstall it and deploy again cool now this has been a great one i i love these three episodes um i think this has been a great learning experience for me getting my feet wet into the react components this has been really fun yeah i'm not a react expert either me either i wonder it would be fun to like bring on a react you know native or react you know expert and and see what they think of service now but uh i'm worried they may just like trash talk it or they may be like oh this is awesome like it's super easy like you just learned these other helpers like you're done so it would be interesting to know cool all right well you know thanks if any of you enjoyed these podcasts we try to keep them you know every two weeks or so we try to do them on wednesdays um we may do one next week to catch up because we're a little behind you know um and yeah if anyone has any thoughts like like let us know we're happy to dive into some of the technical stuff yeah yeah there's always good topics to discuss for sure