welcome to another episode of inside the barrel um where essentially john and i normally take you through behind the scenes of developing at a consulting firm on the servicenow platform today um we have another special guest the same guest as last time because she loved us so much ashley you can give another little intro about yourself ashley and then today we're gonna talk about building components and so we're building off of our last episode where we kind of got the developer set up so john's going to walk us through you know how we could build a simple uh react component and then hopefully we'll get it deployed if not we'll just preview it locally for for everyone to kind of get started sounds good um i'm ashley snyder i'm a senior developer at virginia tech um you guys may know me you've heard of me from the sn deaf slack or my blog um ashleyson.com where i kind of just explore different things and interesting things in the servicenow platform awesome and you know john um so let's let's just jump right into it john like let's sure yeah let's see what we can do so maybe we'll start with like a a screen share of um visual studio code like should we just jump right into visual studio code yeah i think we set up a project last time i forgot how far we got i know we discussed a couple different things so i think the my pdi cleaned out since the last time we met it reclaimed itself so i have a brand new instance um i am connected to it through um like i i was able to get connected to it through the s and c or the cli um so we are connected that way so we'll create a new project then real quick and we'll kind of take a little step back from that one but so if you want to screen share so here's visual studio cool and so let's um do you want to open terminal up here like do you do you normally run it you could run it through visual studio um yeah i've always created the project in terminal first and then pulled up that index file in digital studio or an editor i think it's easy that's not okay yeah go go for that switch over to terminal uh sure real real quick for that yeah all right okay i'm ready awesome uh so can you just uh ls where we're at i just want to make sure is this okay do you want a cd somewhere else but not discord backups oh it doesn't like that huh and then let's make a directory because you probably have a bunch of stuff sure itv perfect yeah i think you have to be in an empty directory or the when you try to create that project it's going to give you an error yep and then cd into it awesome and then just type clear so we can get rid of all the other stuff above awesome okay so now i think it was the command and you know someone correct me if i'm wrong snc uh ui dash component uh and then yeah did you get the um the extension set up or i don't know if it's still set up from last time yeah do uh snc help yeah and i don't know if it's single or okay oh let's see what you got yeah we got it cool okay cool so then we can do snc space uh ui dash component and then we could do dash dash help just so we can see what those are it's probably gonna yell at us because it needs it doesn't like help or doesn't happen maybe it's i just don't remember it off the top of my head okay yeah okay so it's project yeah and i think we need to pass a few things for that um yeah we have to pass the name the script and you can pass the description if you want but definitely the name um so like hyphen hyphen name and then since are you well did we connect to the instance remember that last time when we weren't connected we had yeah we're we're connected right now well at least i was just a minute ago okay so i think you'd like put in like the name of your scope like your application scope that you want this to be like at you know my org or at whatever oh you can't do global john so do like an at sign and then name it like itv yeah and then slash and then we're gonna name this so the project we'll work on is we're just gonna try to build a simple report so just name it simple report hopefully it likes camel case probably doesn't but that's okay and then i think that's that's all you need yeah i think so i don't think it needs the description it's just like a nice to have yeah what is it yellow that is oh yeah you gotta now you have that oh instead of the underscore i think you need a hyphen yeah i was close it's picky ugh what now cannot find an active oh come on i was just so i think you need to do that what is it um so you configured uh profile streams yeah i think it's just the configure profile or there's a login method i don't know i don't actually remember what's the what's the way you connect to it because i think you've already said it right so this is just going to reset yeah i did set it um um let's see how do we see our profiles oh you can view it okay just do configure after it so you mean profile configure snc configure and then view space view hopefully it doesn't print out okay maybe take away view i'm just looking at it like it says you can view it so press enter profile set view or remove connection profiles okay configure profile list hey what do you know okay it's there and so it should have when executing that project one it should have been able to connect to that one is your yeah your devices is up right john like it's uh let me make sure uh maybe it logged me out nope i'm still active and logged into it so let's try running that project command again and we'll just do dash dash offline for now uh let's see what was it and then dash dash offline that way we can just figure that out later scope mate okay that's fine so go back up and then add a dash dash scope and just name this the scope the same as the the name the at sign starting at the at sign um i don't think you need to do that part you did okay dude oh my gosh you're doing great doing great there we go and then it starts with x huh all right yeah that's probably fine all right okay so now open this folder in visual studio code so i think we can that's all right let me switch over oh just let you know i always run npm install after creating a project too to get any dependencies sometimes when i don't i get all these weird errors when i try to run it locally or deploy it i have to go back and run it so what is it uh npm install or mpmi if you want to be late just install yeah we could probably do stuff while it's running in the nvs code let me switch let me switch over all right so now we're into that folder there so i need to kind of dig in here i think it's underneath the um src folder and then underneath simple report i know there's like there's like a ton of index.js in here um i think it's that index.js in the simple report directory yeah perfect all right and it finished running or no not yet it's still good all right what do we want to do here yeah so we got our basic template here um you just want to do i mean so we're wanting to create a report in here or uh yeah we can create a report in here sure okay uh i mean just to make it just to put something in there for now we can go ahead and throw like a a header like for that report name or i don't know if we want to grab that report name i think it really depends on if we want that to change or not so you mean here yeah yeah you can like hard code something in there if you want which can be changed yes it is we're doing incidents that sounds good perfect and uh to view that like um how would you view this uh as you're going as you're going along building things um because i in the portal world i'm very used to like making a change saving and then you know refreshing my portal page to view it after you know i'm doing stuff uh is there a similar uh mechanism here yeah so you should be able to go back to terminal and type in snc space ui component and then the word develop and then okay open one moment it's still running through all the okay all the other stuff okay we'll continue and then once that's done then all do we want to check out your now cli json file i think we'll need to check that one oh yeah and so i think we can add the development things here so that would essentially um like you can add and i can give you the code but like you can do like the origin and then the port in that proxy um and that's right here yeah so it should be an origin which is your instance name and then oh well that's for proxy i'm just like looking through the docks trying to to see yeah we don't need to do a proxy that's if you needed a proxy yeah we're good there but i think i was trying to get our set up so that when we do deploy it would work maybe it's the now ui json yeah in order to give it like a name so it doesn't say my component now you want to add a description i see see how it is john is there any other setup you think we need to do i think that was i think yeah i mean you can give it a description if you want i tried icon before and it didn't take for whatever reason um i don't know really just the labels most important part so it shouldn't be like hello world here because then it'll show up yeah yeah like i don't know if you guys played around with this like in agent workspace but i know i did and i have like three little things that said my component that's why it's like really really important to do this because you don't want to be building components now like 20 of them name my component which one is it well it's my component that one sure all right dorian what was that command for oh uh snc space ui dash component so i think what's like nice is i don't know so you don't have to switch screen shares all the time like you should be able to open up terminal here um which i've done in the past nvs code yeah envious code maybe it's that play button i can't remember it's the play button nope not the play button um up top in like i'm trying to open my vs code to tell you uh it's under up top where it is uh terminal like on the menu terminal there's your new terminal button and that kind of shows it um there for you ah but will that open a uh well so first ls like let's see where you're at uh okay cool so now try just running snc to see the dash dash version to see if that that command's in here no it doesn't oh i didn't know snc dash version or maybe it's just snc version cool so yeah so you can just run your snc commands here space develop and then you can do dash dash open if you want it to also open a browser and we'll see if don't mind any unhandled promise rejects servicenow needs to fix those proxy server doesn't start it's totally fine and yeah so you're already using port 8081 for something so uh just go back to that command and then we're going to pass in a port dash dashboard and do like 4000 i probably have a better port but that's okay see we got good at this because of the last time i remember that error it's so true all right building modules all right so it does open it but it's in a it's you know it's in its own browser you're gonna have to switch that screen share to to do that so maybe share your desktop or move it to your desktop no i'll do that um so what'll happen though just fyi i can make things quite wide um and uh it will you know it'll be a wide screen share so prepare yourself for that hopefully all right let's see let's do this let's see if i can use my magic little tool here let's see we don't need that one we want this one there we go nice so there you go we have built a component john we could collect millions of dollars and go home and we're done we're done it says right there we did it see we changed it yeah so i i feel like there should be a way to connect like i guess i guess like if i'm a developer and i want to build things locally and still pull data from my instance like there should be a way to to pull it down so you don't have to deploy it first right or like like i mean if if we make a data connection to this instance how can we use the data from that instance while we're developing without having to deploy it first right that's what you're asking yeah yeah and i don't know if that's possible but i would hope that servicenow would implement something like that right so like because if we're setting our profile to connect to it right like we have the correct authorization um i just don't know if there's apis that you know allow us to do that well so here so this is the question within these components are we supposed to use like the apis like table api and that stuff versus um i guess yeah i think i think you're supposed to because that would be i i would assume that would allow you to be local offline do run through everything get get data um manipulate you know even if if this wasn't even just a simple report like a read only if we were actually uh receiving and submitting data back and forth we should be able to do it without deploying if we're using the apis because that's that that's irregardless of being deployed yeah the api should work either way as long as you're authenticated then you should be okay uh i agree in theory uh i'm like searching google right now right um well so an easy test would be to add um just to you know get all the open incidents right so is that just a simple table api call so how do you set up how do you set up the the authentication what's what's triggering yeah is like well so you're already off the right from your profile like when you deploy this thing you would already be off but like when you look at components in like the ui builder they have a whole different section where it's like you know connect to a data source right yeah so like i don't know if it lives in the component or maybe it's just parameters you you define in your component and then it's like expecting them um that's what i'm thinking it is i don't think you would like hard code that api call into your component because then that com that particular component wouldn't be very reusable yeah i mean i don't know if you could or not i haven't seen it but that's what i'm thinking seeing if we could if they like have information on this yeah let's see like looking at their guides or trying to find oh nice oh that's cool all right we got some oven stuff for you john oh sweet i love oven stuff no uh so if you want to open that up um we can kind of walk through that together because i didn't hot corner strike again all right here we go so this so ashley found a um it's a dependency yeah that's cool that's that's awesome um but actually found it i think this was from a knowledge uh last year knowledge of um working with components and making http calls it looks like yeah so it looks like we can use this create http effect now i don't know you know if we do all this right now we don't have a way to display the data so i don't know what we're gonna get but it looks like that's what we used to get it from those apis so yeah so it looks like here and i'll send this to you actually as well that i'm also looking at so just using that i kind of like there looks like there's a docs on the ui framework um so let me send this to to john as well so maybe this because it's probably a little bit more up to date um yeah so i sent you this and it talks about all of the different components or all the different parts of the component which there's a lot to go through in this document um that there's an example though like a checklist or or maybe they have a task board well it looks like i mean this is kind of the basic idea right you're you're um and i know you know hard coding is one thing but as we're just kind of having our first steps in building something i think that's what you end up doing anyways is hard coding something um just to see what you're going to get but it looks like this right here is a simple example of of that right yeah so the the the now 2021 totally is i was just hoping that there was like a simpler one that like connects to some data and like there's just like a very easy way to connect to like servicenow data and so yeah i think i think the there's like a checklist one john so i'll send you the checklist one it's a little bit further down um that like looks like a lot but they essentially build like a checklist that's kind of how in the the knowledge um presentation too like they do grab the data um with the create htv effect yeah so in that but at first they go through all this with creating a table like a presentational table to put it in i've got you yeah yeah i guess i'm just worried like a lot's changed since orlando so like um that part just worries me a little bit whereas like the the one that i just sent to john that he's looking over um it looks like it uses http effect but it doesn't install any dependency okay um well shouldn't that come along with when you install like you're gonna uh you get a dependency for anything attached to the http effect well so i think in that guide right it has you install a component right like the gui ui effect http but looking at this example i don't see where they tell you to install anything right i think they already assume you have it in this oh interesting yeah they probably do because they're telling you to like go to this go to this read me and set it up this way oh my gosh so i guess we need to run this command yeah i'm just i'm just double checking to make sure that so the run i'm looking at their repo so for the example checklist that looks pretty normal components yeah so let's install that ad service now ui effect http so yeah let's we could go through i think the um this knowledge 2021 and see how far we get okay so just kind of reviewing that it looks like they install and then import it um yeah yeah you have to so if you're like working in what i've seen like doing if you're working in terminal you have to install it and then you have to install the component or whatever you're using and then you have to import it into the component that you're building gotcha yeah and it looks like to create an uh http effect it looks like you just tell it what api to use the method and then like what parameters so it's like kind of like using that rest api explorer um would probably help people if they they needed to do that [Music] um [Music] all right yeah i mean i think this walking through this exercise is probably really helpful because this would have been really hard for us to do yeah there goes my simple right like just let's do something simple but you know in the scheme of things this is exactly how it always works you think something's going to be easy and then you know you find out yes it looks like why does that gray out like that uh because you're not using it anywhere no okay all right and so yeah let's see if we can fetch some users or fetch incidents right if we wanted to do fetch incidents instead oh yeah we could do that yeah kind of to go back to what you were saying john while we're doing that um that's kind of what i've seen just looking at all the now experience and component stuff is that a lot of the developer site stuff even on now learning what you're going to find is really simple examples where you're not connecting to any data in the system and you're not modifying any data in the system it's just something you would put on your ui builder to be interactive in my opinion they're not very good use cases they're easy and they're fun but they don't really tell you like they're not really good examples on how to interact with the system um and as you dig further you might see some you know creatorcon workshops hopefully we'll see more this year but there's only a few things out there that really dig deeper so right now you're kind of it's very exploratory right now if you want to dig deeper into these and actually interact with things um you know on the server yeah one thing that i you know as a developer you you see a lot of is um you work on things or you go look for examples you know really it's a cookbook you want a cookbook but then people get kind of overwhelmed with what am i looking for exactly i know what i want but i don't know how to type that into google right yeah and and so you end up with all these uh examples of your hello world stuff you're like well this doesn't really help me i want to connect to a table and i want to get data where's my example of that you know and so it's really nice if people go beyond the hello world because that's a very simple you know we we changed the title oh big deal everyone can do that you know there's a million hello world apps out sitting out there because yeah that's as far as everyone got because because they couldn't find what they really wanted you know yeah i remember when um portal just came out and some of the the lessons on the developer site were would basically create a widget that said hello world and that was like it yeah right and and you're like yeah this is great and all but i i really want to um i i really want to know how to do the the real stuff the stuff i'm going to need you know hello world gets me nowhere i want data yeah cool so i mean let yeah let's just try pulling incident right so i don't know if we need to open it it doesn't matter right oh you're like adding a query too well incidentally well no like that api you would need to do like sysparm let's just just add the cis farm limit 10. oh sis parma i got you yeah because because so essentially for people that are struggling on you know what's the right api to use you you probably just want to go to rest api explorer um and kind of do your query there and and i think you'd have to we'd have to find out what the um yeah what that sysparm is but so maybe let's not do that right now john just don't want to you don't want to add that yeah just so that it just said this works right like we can we could kind of go back um and and so kind of moving along like what's what else does the doc say we need to do so sure sure we can do that all right so there's a comma there yeah so it looks like you have a method and then you have so like i think they're like called mutations in react and so don't quote me but i think that's what this like success action type is like you're defining like what does that or their action handlers man dang i think there are also called mutations that um action handlers in this case where what is like when when you do something like what what action do you want it to call um and and so when we're when we're saying well we probably should name it incident fetch succeeded but oh yeah so it looks like when your request when you're calling this action handler of requested it's going to go and call that api and then when you're succeeded when you succeed it's gonna like do something with that data right it's gonna you know essentially process that payload um that's how i read those those action handlers yeah i agree so a lot of this is boilerplate quote that john doesn't wants to get his hands dirty and type it up so [Music] and just that like incident in fact succeeded um you know i'm not to get off too off topic on creating a component but you will if you go into ui builder and you start using like data resources and stuff so connecting data to out of the box components you'll see like a section where they have action handlers called like data effects succeeded or data fetched failed and you can actually do something when that happens that's i'm assuming that's you know what all this is too like if it succeeds great do this if it fails do that and just build that into your component as well but to put like a visualization on it you can go into ui builder and kind of see what they did with their out-of-the-box stuff yeah and i think that's you know like a great i'm hoping that like if this works then like especially because we're console logging it we'll be able to see like a payload right so um and so we're not going to worry about the delete part for now um so if we which is nice a nice example because if you wanted to modify data and notice how it the api uses that colon id um on that first line for cons delete user so that's essentially you can pass in something which is good um this this way we're not really passing in anything from the the component yet what did i miss here so unexpected token oh man [Music] maybe there's more code we need before we can run it but well it doesn't like these colon or these yeah these colons here scroll up john on this yeah um so i'm sorry scroll down let's see what the next part maybe there well this is for uh this is for uh no no i was i was hoping they would give us more no that's it i think they give us all this and they're like yeah you should know just expect it to work it'll work like where to place all of that right so let me see what the other person did because they did something similar in the knowledge 2020. and like you know you would expect to see something in here about oh go to this you know make sure you're on this index.js file here to add all this stuff so it looks like action handlers need to be inside the view or sorry inside the custom create custom element what where's that so if you scroll down you see where that create custom element is uh after the return wow yeah this is like it's it's so funny it's cause like the knowledge 2020 has is on a different version of this so i think you need to place the action handler uh information and the uh the other function inside the create custom element so that needs to oh down here i don't know if the dispatch goes in there but so like if if you opened up that article around the knowledge 2020 they say this is what your json file should look like and pretty much inside of that create custom element is where the action handlers go so keep going down yes this is what you're and obviously some of this isn't is a little out of date but the um my guess would be put the action handlers inside the yeah it doesn't show the uh the dispatch either all right so you're saying it goes inside so after the comma view i'll just press enter and then paste that but does the does the other piece of it this piece go in there too i think it it doesn't need to because it's just a function you're calling right yeah um and so i think that can be outside of it um you're missing a comma after start or before styles yeah um we're building we're building something we're building [Laughter] something will have whoa let's scooch that over see what console says so i think um we need to actually define fetch succeeded before using it so in the action handlers oh interesting i wonder if like i'm like torn because i think some of this is out of date so like um so why would it think it's not let's see someone else see if i can see if we can uh find other examples in this list yeah see this is where people get you know as a developer trying to do this i would get so frustrated on the lack of you know good information all right john i sent you some another example or another part so i think the you just need to like define it up top here into this thing yeah like just a cons for it that's i again i think that's like a react thing actually [Music] so part of my should have got a react expert on here too i know right i would love to actually see like something with someone who knows quite a bit about react and like them looking at it and walking through this you know because we're all hitting it from a servicenow developer standpoint you know some of us know more than others about this stuff but that would be really interesting yeah see they don't even they're they're not even inside that unless they're assuming that like you know how would you know that you're supposed to be inside the create custom element yeah i don't know because they're doing they're running all that well it looks like they actually don't have it they just have it in an object right so yeah so maybe you don't need it there and it just needed to be inside of an object so like that which i have no idea how that would be called but that's okay uh all right oh but see it doesn't it doesn't like those again yeah i just keep it in there for now and we'll yell at servicenow and update their documentation see i remember i remember a while back i i ran into a problem well requested oh i wonder if dispatch has got to be no that should be all right do you think we need to do oh check that out probably should make sure they match too yeah um [Music] so i think it's in a sim so i wonder yeah that's that's funky but i remember way back when it first like started whoops um i i ran into some trouble with the the documentation and i i reached out to one of the the people at oh man i mean seriously uh servicenow and they were like i i don't know [Laughter] and it's like well you guys need to write you know obviously we've all had issues with documentation from servicenow and maybe it's like they need to open it up for um community writing you know like wikipedia give some high-level um mvps access to the documentation and and just let the community write stuff that would be very cool for like you know like new stuff like this like components you know all right you know like they're not going to be maintaining the components we build so that would be a pretty pretty interesting thing so we got to everywhere and then the dispatch event fails but we're like can you comment out the dispatch event well i was going to say the the ones you sent me don't have that thing so i don't know yeah yeah then the latest one oh my gosh it's compiling but i don't have like i didn't get any results i guess yeah because i don't think that was actually called right um oh well then how do you get that running so because so user fetched so essentially we need to call that user because because that's a function right and so the user fetch is the action handler so somehow we need to call that uh incident fetch requested right like that that needs to be called somehow and that's like a that's what i thought the dispatch event would do um yeah but there may be like an other another way to do it you see this one uses that but is this one older i think that's the thing about using these dots and trying to get to the examples like you've really got to go through those things rather than rather than uh rather than dispatch event can you just do dispatch and well so this one has dispatch after yeah i don't know would you say just dispatch just dispatch i think i think dispatch event is a reacting and dispatch is a custom servicenow thing well see that's the other problem you run into is if you've got dispatch you know service nows oh no no throw dispatch inside the crate custom element like maybe maybe it needs to belong there too uh i don't know how that's gonna work see dispatch is inside okay so nice feeling good we're getting close to that go and then just put a comma no oh like it's saying it's inside of requested oh so but i don't know how that action like it's saying put it inside the function of fetch incidents so after essentially you call it because that's what this looks like it's doing no or yeah um i would just put like a comma and then like a dispatch it's probably something in like the state or something like that but maybe well it's got to be within inside the action handler yeah i guess i just don't know how the action handlers are being called right oh look at that that's well so weird you defined it as a const above uh don't put a uh put it so is that outside the action handler no so what happens when you put it outside the action well so put a comma instead of a semicolon like i know that shouldn't work but no it won't it doesn't like that okay so put it well let's try let's try it this way maybe no still doesn't like it maybe put it inside the action handler somewhere and um it's interesting well what come on now so now it doesn't like that at all yeah i'm looking for um maybe put a semicolon on the end of that now we're like not even doing advanced stuff [Laughter] right it's not so i mean i'm just gonna send you some more docs so looking at their like other examples of like how they use action handlers they essentially throw action handlers in some sort of function and then use behaviors um but like i would assume it's like rendering no i don't think rendering so maybe it's under interceptors okay yeah here we go interceptors all right interceptors are functions you can use to isolate cross-cutting concerns when executing effects to simplify effect functions they wrap the effect in a before and after function that build up co-effects to add effects to a pipeline um so that looks similar to what we were doing right with these co effects or i have no idea what that that is that this is probably reacting yeah that whole like main concept section is like something i need to dig into but probably anyone trying to go through this has to do that homework first there's just so much you know oh yeah seriously like i don't know like john you've been doing portal stuff for a while like your impressions of this versus like a widget you know this is i mean okay so coming from a non-react at all background and having to and back when portal started i had to learn angular and honestly comparatively angular was like 100 percent easier to learn than this um i feel like i would need like a month-long boot camp to understand what i'm doing here and this is a you know i i've been doing web development since the early 2000s and i this is really a struggle for me you know it's it's not something i'm very used to but maybe i'm i'm too stuck in in other ways of doing things i don't know but yeah this is pretty involved intense too i agree i know me personally i i need to put my head down and put the time into it like i've gone through some basic stuff and i've gone through getting the now cli set up but like you know i've been doing servicenow for five years and you know in the past i could just basically jump into anything on the platform right like right learn it you know get you know get there but this is this is definitely different this needs a little bit more time before you jump in and get started to understand the concepts yeah and i keep i keep hoping you know someone like or you know someone out there does all that hard stuff first and start and gives me some simplified you know how to's really some cookbook recipes and then because the way i you know my learning the best way for me to learn is to be able to take something and and tear it apart and and you know rebuild it and and make changes where i want things to happen um and just to see how that affects things trying to start from scratch and having to read or go in and learn you know that's it's hard for me to to do it that way and so with without those nice examples it's hard it's just hard for me to do it you know the way this is happening as far as this is concerned and you make a great point you know everything outside of these react components you really could just jump in and do it servicenow itself the platform portal is fairly easy you know and you have a lot of examples of a lot of things to to go from you know even inside the platform you have script includes and other you know ui scripts and things like that you can look at kind of reference and see what things are doing um same with the portal there's already widgets available that you can use and and modify fairly easy but this is like i mean this is really involved to get stuff happening so so let me put this link i know we're a little bit at times so i just wanted to put that link so i think um like i sent this to john and this looks like if you were following the uh documentation where they have examples of like you know building the people counter or something like that that ashley's done in one of her blogs i think this is the actual code that like if you if you run it uh it runs this so in like this example like if we look at the customer 360 example john uh let's see here yep this one is definitely using um the http effect and so notice how they structure their project right but so yeah so it's definitely using so go into the let's go into the get http effect first um it should be a file that they have yeah so that looks different than the one we did which is that that's fine but um they just essentially created a function there um and then they i'm guessing they call that function somewhere so we just need to find where they call that let's do going back to that so the action handlers we we were doing right all of these things it looks like they have some sort of example for it all right so what was it called in there the function it's called get http effect so then they're importing it so they can call that somewhere here yeah right here and what's interesting is they have action types dot component underscore bootstrapped so where did i saw that in one of the guides you sent i thought so i'm thinking that like that could be like a how it's um utilizing it there's where did i see that oh right there so it looks like what you sent me what they're doing here is closer to so yeah maybe this guy um this checklist one that's what it looks like it's closer so going back to that checklist snippet i just my i think our last thing we could try is if we scroll down to the part where that is that which one was it i think it was that i think it was that one that you were on this one scroll down oops roll up sorry we're keep going up there was oh wasn't that one where did i just there we are this okay yeah so copy under on the actions in dispatch so copy that action types component bootstraps uh you don't have to copy all that just the action types yeah that one and throw that in the action handler and then instead of dispatching the checklist load request dispatch our fetch incidents and then delete that all right i'm feeling good i'm gonna end on a high note cool oh so close action types now i'm like what where is so now i'm like all right let me look at their files where are they defining action types yeah oh so they owe from ui core so you're going to want to import action types from here i'll send you this piece of code john and that means you need to install the dependency so you're going to want to npm install that as well all right what is it uh npm install uh at servicenow slash ui dashboard does it need that e at the end dash e no copy paste so that was what is it called um you want to import action types camelcase and then from at service now yeah yeah perfect ui maybe that's the sweet spot i have no idea so it looks like at least on that guy that you're on it explains action and dispatch which i guess is nice um so whichever one that one is on is probably a good one for people to to look at the uh that's the checklist the checklist one yeah i agree so the creatorcon once it's kind of outdated if we've seen there's probably some good stuff in there but it's a lot it's a lot all up front yeah because i'm guessing that that action types is like the life cycles of uh react so like when i'm assuming component bootstrapped is like when it's loaded right do these actions um so hopefully that was the missing piece and john will well now i'm just getting maybe i have it incorrect whoops um hey i mean we made a call i just gotta say we did we totally did awesome i don't know why i did a post but gateway time out yeah my my guess is because we never got it connected like to your instance but um like i'm gonna call that success i agree well it sure feels that way definitely you know getting at least to this point where you're not getting errors on on your code this is something else um this is definitely a win so it looks like error occurred when trying to proxy the request from localhost 4000 to 3000. so i think that's something with our setup of you know build starting it locally um i don't know why it's trying to proxy that but yeah maybe we stopped there and we can we could go forward like i don't want to unless you guys want to run a few more minutes like i'm happy to try to debug that i know i got to get going but that's cool if you guys want to keep going no we'll uh we'll we'll transition if john wants to stop streams sharing and oh yeah for sure all right so today we tried to do all the hard parts for you um essentially all we tried to do was take a component and make a call to servicenow or at least get you set up so that the call would we'd assume would work um so i think at the end if you pretty much watch the last few minutes you'll have some you know boilerplate code i think we showed you a bunch of different websites to to use in order to kind of help you through that journey hopefully more documentation will be out there we'll do another video when we figure it out ourselves but i do want to say ashley i really appreciate oh yeah and hopefully it was fun for you too yeah no it was cool all right well if you liked all this content subscribe or at least watch it so yeah you know thanks everyone thank you thank