all right reusable ui scripts i did a share of the wealth several weeks ago on organizing script includes and the importance of server-side code and having server-side code that could be reusable and that's where you can build libraries where you know in the future that cuts down on your on technical data on what you have to build for a project and it keeps everything in a place where it could be tested easily and if you have to make a change or make a change in one place instead of 30 places across the platform so always the goal is to put things as central as we possibly can so that we can you know stay with the dry principle of do not repeat yourself which i touch up on in here as well because this this goes into sort of the same the same realm so let's talk first agenda i'll define what ui groups are for those because i know we have a very mixed audience here right we have some folks that are very new to servicenow and we have folks that are very very senior service now so not trying to you know dummy dumb things down for anyone other than i want to make sure everyone has a good solid foundation of what we're talking about here so definition the purpose of why we want to reuse ui scripts we'll go over some concepts so i have basically there's probably more ways to do it than this i know there's more ways to do this but i've outlined four ways to build ui scripts or how to how to incorporate them so that they can be reusable in the platform and so those are the concepts we'll go over and then in a demo we'll talk about we'll go over how to apply all of those things in the actual platform cool so start with definition right ui scripts what how they differ from script includes which we talked about several weeks ago is the ui scripts run on the clients cool thing about that is that you're not limited to the implementation of the rhino engine which is what servicenow uses on the server which limits us to es5 the javascript version of i think it's 2009 was when the s5 came out the old version we'll call it the old version right there's a lot a lot a lot of functionality that came out in es6 that we don't get to take advantage of in server code because it doesn't exist and the rhino engine can't it's not it hasn't adapted to take es6 as a the specification of es6 basically but because these are client scripts they run in the browser and so if the browser supports it then we can run it in a client script right so that means we could do like the the arrow functions lambda functions all you know basically all the up-to-date stuff if you're using chrome you likely can run pretty much everything that javascript has to offer these days caveat to that is that there's still stuff that you know there's still customers that use ie right so ie is still i i've added you know a nickel for every time we talked about ie and how it lacks i'd be i wouldn't be working i is out there and so there there are definitely pieces of es6 and even es5 they just don't work in in ie for instance i was getting an error i built something for fis this was probably a year and a half ago an application for them and we were getting a very obscure error and one piece this application that i built just wasn't working and it was a client script i'm like i'm thinking oh well you know it can't be some function or some method that i use from javascript that would that would be causing this it can't be and then i realized that i found out the guy was using ie and the includes function for i think it was for arrays doesn't work in ie this was you know this was a function that i thought was completely safe but i didn't do my homework and go see where it was what it was compatible with and that's what was causing the failure so i had to go back to doing an index of instead of an includes on on that one call so mdn the mic the mozilla development network that's where i go for all compatibility checks or issues you know if i need to go check something to see if something is compatible with it with a specific browser sometimes i'll talk to the customer asking what browsers they're using but usually you know you have a pretty finite list of the browsers that folks are using out there so if there's something that's not supported by any of the major browsers i'll shy away from it so yeah and i can show you mdn during the demo if we want to go into that to show you how that kind of works because they have like a matrix or a table at the bottom of all your different functions that tell you where it's supported where it's not supported okay cool and then server-side code can also be called from ui scripts using glide ajax we'll touch up on that just a little bit so glide ajax obviously allows us to use server-side code in client scripts which we've already talked about the organization of script includes and how important that is so if you already have your library out there server script server code available to you then glide ajax is your friend because you can reuse that code you know obviously those those scripted clues have to be client callable so but but things are easily adaptable once you have a good library you can go and make those things client callable and have them taken parameters and all that i'll show you a little bit i got a little function a little client script that helps with the with with glide ajax calls and client that we'll we'll look at cool definition is over so on to purpose so this is the same stuff i'm going to go over this really quickly because the same stuff that i brought up in uh the script include i'll share the world so the core principle of dry do not repeat yourself i'm sure we've all heard that things should be defined in one place and one place only this way if you have to change them you're not changing them all over the place and also testing becomes a lot easier because you only have to test that one you know unit tests that one core function and if that works everything downstream should work as long as it's designed to work with what you're expecting from that function so it reduces overall development effort minimize minimizes defects it's just the way we should all it's the method we or the the principle we should all work towards it's it's super easy sometimes to say i've got a business rule i'm going to write a glide record in there you know to get a use or something that's super easy to say but that function is probably already out there somewhere in a script included if it's not you can make it in a script include it takes five minutes more work but you know over the lifespan of where you may be supporting that that customer in that instance is going to pay off to you multiple times as well because you won't have to write it again you know it's out there you know you can use it anywhere you need to use it okay and then keeping the code base organized helps promote maintain this principle so you know organized code has less defects and less effort to maintain okay cool concept so these are the the concepts we're going to talk about with ui scripts and how we can make them reusable but the first one is global which is probably the one everyone knows about or or most people know about you have the option on a ui script record of making it global okay so what this does what this means is that in all forms when all forms load throughout the platform your code is going to load into that form right so servicenow says to use these sparingly because that's just overhead right you're you're this is something that loads into every form no matter if you're going to use it or not so what i say about this is i i'm not afraid to do it if i have a good reason for it right i i like i have a little utility class that i create in instances that allows me to hide and show fields on a forum with just the call of hyde field show field with some options that i can pass into it and i call it once instead of calling like three lines of g form set display g form set mandatory g form set read only or whatever it may be right so it makes the code a lot easier to read makes the code a lot easier to maintain if those methods are out there and it's small enough that it's not a concern when it gets loaded i'll show you how to minimize code as well to make it so where it even has a smaller footprints than than what it does if it's not minimized and it's something that could be used across the platform right so that's what i said here so it's available in all the forms in the platform it should be generic as possible if i create a global ui script specific to incidents that's really bad practice because it's going to load on every form not just the incident form and it's not going to be used anywhere other than the incident form but if it's generic enough to say this deals with all forms then yes let's load it because it's worthwhile to load you know 50 kilobytes of code everywhere if we're going to use it in a lot of different places okay uh bad side are the cons of these they can't be created in scoped apps i use the word created because you can create them in global and still use them in scoped apps and call them in scoped apps they just can't be created in scoped apps okay uh and again like let's say use i i i error caution to say should be used fairly i would say they should be used smartly you know use them if you have a purpose and a reason to use them okay and so i'll show you how to set those up in a moment as well a second method is ui formatter so this is you create a ui script you create a ui macro that references that ui script and then you create a ui formatter that references that ui macro in that ui formatter you associate it with a table or global but typically associated with a table then in your table form designer you could go in and select that formatter as an element on your page and now you voila have the scripts that are in that that ui script available to you on that forum on that page it's a lot of work to for one form right or or it could be multiple forms but it's something it's a lot of work to put this in place just to keep that footprint down a little bit uh a lot of times it's just easier to write the script in a client script and that's what people typically do but if on that forum you're you're utilizing one function you know hundreds of times maybe that that would never be a real world scenario but if you're reusing it multiple times it may still be worth it to bring it in as a formatter okay so i'll show you how to set that up as well they don't work in the portal that's the con to that one i call it here should be specific to context because again we don't want to bring we don't want to bring something in that's incident specific into the request table right they should be specific to where we're where we're pulling them into and yeah they won't work in portal but i'll show you how to get around that okay so there's a obscure method out there that i don't think a whole lot of people know about some people may but it's called script loader this allows you in a client script to load to load a script so it gets past all that what we were just talking about with the having to do the formatter and all that stuff i would say the con to it is that it does load asynchronously so if you need it to run immediately you need that immediately when it loads it has to go through this asynchronous process of actually pulling the ui script first so it it tends to run after the other on load scripts but that may be a limitation it may not be again this doesn't work in the portal ui either okay but i will show you how to set one of these up and then lastly is the one that does work in in the portal but doesn't work in the platform ui and that is an angular dependency so if you have a widget where you need to pull that like let's say let's just use the form widget because that's the one we're going to use as an example here is the form widget form widget will display any record in as a form as you would see it you know similar to what you would see in the platform but in the portal well form doesn't you know if if i add a client script to the the incident form in the platform that that goes through the formatter and the ui macro and all that well angular doesn't know what to do with jelly right so it's not going to work on on the ui side on the platform portal side sorry so i have to go in and actually associate that ui script directly with the with the widgets so that it can work in that widget okay all right so demo all right so let me close this down make sure i have everything i need here doing this through my pdi i have the pdi on the right here i have some code on the left so you know sort of going back and forth i have some of it built already but i have some that's not built already because i wanted to go through the process of building things okay let me take this and actually slide it over so that i know what i'm actually looking at and doing here all right give me one sec cool so first one that we're gonna go over is the global okay so i've created a ui script here called form service this is the one that i was talking about before where it gives us a couple of methods for interacting with the form that just makes it a little bit easier than doing g form you know all the g form stuff so i like looking at code over here but we can look at it over here as well but it's easier to navigate over here so form service is here right two methods in it hide field show field they take in you know different parameters so hide field takes in the field name as well as clear value do you want it to clear the value yes or no uh so that's the true false boolean show field takes in the field name do you want it mandatory do you want to read only those two are exclusive of each other right so you can't set it to mandatory and read only so if the the one that's going to take over is read only over over mandatory i think i'd have to check that actually but something i didn't really account for specifically in here because this is just a demo this is for demonstration purposes but i typically whenever i set this up would say okay if it's mandatory true and read only true let one of those take precedence but you pass in the field name mandatory or read only n if you want it to have a value and it's going to show the field and give it that value and i'll show you i'll demonstrate this in a moment so we have this in here as a ui script and it is set to global okay so like i said this loads on every form it's going to load everywhere it's small right so if we go look at this let me actually get to it real quick so i can look at the information if we go look at this file and see how large it is sorry i should have had this open already ah here we are all right so here's three of the scripts that i have in here right now if we go look at how large these are and let's look at them in list view right so form service right now one kilobyte it's not big right but i'll show you in a moment how to minimize that to make it even smaller so i'll slide this off for a second and we'll make that in a moment but one kilobyte is what has to be downloaded on every every page as you go through the platform right so that's why it could become an issue over time um show you how this works real quick let's go to an incident record all right for those of you that don't know this exists i don't know the actual so i've changed up my command and shift and option keys on my mac keyboard i don't know the exact order here but it's it's shift option command is the ones i use i push down all three of them it's probably only two but if you do that and then hit j you get this great javascript executor the platform ui does not appear in the portal ui but this allows you to run client-side code with without having to you know go into any sort of crazy debugging mode or anything like that so that's what we'll use here i'm going to open up my console here as well so we can see as we oh somebody put in there ctrl shift alt j so i guess i did have that right for my mac yeah i always push all three and i never knew if it was just two or three but i don't you know worry about it so i'll show you here how the form service script is available to us in in this client script so you'll notice over here the script itself is the function that we are returning or that we're setting form service to is actually a function that automatically calls itself right so that's in ife or immediately invoke function expression servicenow recommends we write all of our functions in as iifes because they have their own scope when you have an iife because that function now has its own scope and it's not there's no risk of it polluting its parent scope right so if we just wrote code in here just wrote the functions they would totally work without even calling form service we could just call it hi call hide field and it would work but there's a chance servicenow would come in later and create their own hide field function that would overwrite yours or yours may overwrite them so you want to put these things in uh you know they're nice little package function classes like this and so we have form service now because it's an iife we don't have to call new form service we just have to call form service dot um and client you really you know you want you want to do that because you don't want to have to new up all these these objects all over the place in your client code so all that said form service yeah we'll do uh high field we're going to hide the number field okay so very simply we put in the number field let's not clear the value okay and let's go ahead and run the code and see if it works uh-huh it worked so our number field got hidden let's show the field now and this time we're going to make it uh mandatory but not read-only so that should be false sorry make sure i've got these right here and then we're also gonna give it a value of david arbor oh let's put that in a string david and run code and there it is so now our number function i mean our number field is set to david arbor so again these are just utility functions that you know especially when you have very very complex like catalog items that you can't use ui policies for because you have multiple multiple values that you know reverse it false won't work you may have to build some big if-then statements on what to hide what not to hide based on things that change on your forearm and using g form set display g form set read only g form set mandatory over and over again becomes really really old and really difficult to maintain so that's why i use these utility functions it makes the code a lot more readable and a lot more concise okay so global pretty easy to understand it's available everywhere i'll show you ones that are not global next okay any questions so far let's see if we have anything in chat nope okay good deal cool so i also created this url service which has a few functions and it allows you to get the full url of the page you're on it allows you to get a specific parameter of the page you're on from the url or get all parameters as as an array okay still pretty simple you'll notice up top here i'm actually a setting window to this window if windows is null or undefined i mean sorry only null not undefined if you have the three this this means it's only null if you only had two there would be null or undefined but in the portal window is null so but this dot window is not so i i built this so that we could actually pull this into the portal as a dependency so we need the window object in order to get to easily get our url there are other methods but this is the method i wanted to use okay so this already exists we have url service out there already i'll show you real quick that if we come in here let's just do a refresh real quick and if we call the url service now again same method url service gets oh sorry let me do a console log on that and run okay i must already have it out there let me see if this is yeah it's not global so i must already have it out there as a i thought i had removed it as a formatter i must have it as a formatter let me check something real quick if y'all don't mind or i have it out there is the script loader yeah i have it i still have it out there so let me actually deactivate this so we can redo that let me refresh i thought i prepared everything forgot something okay all right so now we get an error right so you are sir url service is not divine and the reason url service is not defined is it's not global and we do not have it set up to actually be brought onto the forum yet right so first we'll go through the method of bringing it into the forum where i think is the more long-winded version of actually creating a ui macro associating that to your ui script then a formatter and all that good stuff okay so i'm going to run through it pretty quickly but this is all recorded so we can all go back and check it if we need to right so i'm going to create a ui macro first i already have the code over here too so i'm going to copy and paste i'm going to cheat here we are it's called url service loader and i'll show you what it does let's go ahead and create a new macro okay we're just putting one line in here and that is hey this requires our url service ui script and you see this naming convention here with the file type jsdbx that's how that's how jelly will read your file so you have to have it with that that extension that is something that catches people sometimes they think that you can just put it in there as js but you can't you have to do jsdbx okay so let's create that so now we have a ui script and we have a ui macro that references or pulls that ui script into itself right so now what we need to do is get that ui macro on the form so that the form has this this client script available to it so the next step is to to put it into a formatter because we can only put it on the forum if it's in a formatter so go to formatters create a new formatter and we'll call it url service loader and here in the formatter form what we're doing we have to reference that ui macro that we just created so url service loader and here we have to put xml as the as the file type or as the extension that's just how it reads it i guess that's just how it reads it in service now if you don't associate this with a table then you can add it i'm pretty sure you could add the formatter to any table at that point but we want to we want to associate this with incident because that's the table we're going to be working on and we only want it to load an incident and that's how we would do this okay so once we've selected that table well i'll show you this too real quick if we take incident here let's duplicate our oh i'm sorry let's do uh configure form form design so this is where we're going to add our formatter but you see down here under formatters it's not related i mean it's not available right now we don't have one for you for url service loader okay but once we create our formatter so let's go through that step right now then we go back to the form designer and let's just update it right quick url service loader see so now the formatter is available on the table if we hadn't set that table like i said i believe it makes it available for all tables but i've always used that table just because i want it to be precise where i'm bringing it you would create multiple formatters if you had it for another table so if we needed this now for request we'd go create another formatter specific to request okay and you don't have to only load one in back in our ui macro let me go back there right quick in our ui macro there's nothing saying we have to load just this one we could have five or six others that we want to load that are incident specific and we could call this incident ui loader right and bring all of those ui scripts in it doesn't have to be just one you just have to do each one as it requires okay so we'll add our url service loader here down to the bottom it's invisible so they won't see it it's just there to bring in the script that's all and back on our incident remember the error that we got so let's let's refresh the page now sometimes you have to do a you have to bypass the cache to get your page refreshed all the way which on my mac is like ctrl shift r it's shift f11 on a on a windows machine if i remember correctly so sometimes you have to do that because the cache will hold some of these values i don't think we'll have to do that in this case though so let's go now and type our code in again so console.log [Music] and this was url service get so console.log prints out in the console over here so when we hit run my code we should see our url and there it is okay so that demonstrated us adding this through the ui macro the formatter everything just to get it loaded on our phone okay so now this this script is completely available to us let's say we want to call get parameter specific parameter right so i'm going to do that for let's say we just want the sys id we just pass in that name of the parameter and run it and there's our sysid so we've pulled out pulled that out of the parameter and can use it any way we want to use it and then get all parameters i'm just going to come over here and copy it we will not pass anything into that one and we hit run and we can see it gives us an array of all the parameters that are in our url very useful utility function that i use in places i don't use it i wouldn't say i use it a lot but i do use it from time to time if i need to read a url okay so cool so that that gave us the method of ui macros ui formatter again takes a lot right that's a lot so let me show you a quicker a little quicker version of this let's go back to our form design and actually remove our formatter so it's no longer being loaded into the form let's do a quick refresh just to show you that that it's not being loaded into the form again we'll run console log url service gets we should get an error on this one and we do url service is not defined okay so what we'll do then is i'll show you the other method which this is in our in our list of uh methods this is the one that was on the second page for strip loader everything's covering my presentation right now so okay so for script loader so script loader what we're going to do this is a an asynchronous way to load ui scripts into the client and we're going to do it on an onload client script okay for incidents i happen to have already created this because you guys saw at the beginning it was still turned on so we're going to just go to that client scripture real quick and i'll explain to you what it's doing here it is load url service right now it's inactive so here's the syntax right here's here's how you set it up it's a normal onload client script we call script loader which is a global object dot get scripts and then we pass in our the name of our script again with that jsdbx at the end of it and so that this is parameter one that gets scripts takes and parameter two is a callback function right so what i could do in that callback function is actually make the call that i need to call to url service by saying okay the parameter that it takes in is url service right so i could i could use that then by just calling url service you know get if i wanted to but i want to show you guys that this is not only do you have to call it within the callback function but this actually loads it on the full page as well so i'm just going to call it when the page loads okay i'm doing this console log here just to show you that url service is going to load successfully so we'll make that active and save it and go back to my incident incidents over here my dog is snoring in the background i don't know if y'all can hear that okay incident open up our console again let's load it again just so you can see the we should see a message over here that says url loader has loaded oh we gotta find it a service it's right above the yellow text thank you awesome url service loaded successfully if we didn't have that asynchronous method that loads ui scripts you would see it way up here because ui scripts run early right but it runs asynchronously which is why i said if you need to use it right away as part of the on load you would put what you need to call right in that callback function so that it has to be loaded before you actually call it which you know that's fine on an online client script but if you have a secondary online client script where you want to use it it's not guaranteed it's going to be ready when that online client screen runs okay so just to show you here that it is available we'll do console log sorry i forgot what i was doing url service gets and let's go ahead and clear this out real quick so we have a better visual and then we run and there's our url again okay so with that asynchronous function of the the loading of the or the script loader we're able to load it in asynchronously okay so that gets this gets it on the screen for us so now let's go and show you the angular side of things before we move the portal any questions that i can answer okay we'll have q a at the end too so if anyone needs to ask questions we definitely can then so let me open yet another tab and we're going to go to the portal and we're going to go let's see id equals form table equals incident let me go get my incident cis id here real quick and cis id equals okay so we're going to go to the form widget right which displays a record oh no i've got a javascript there okay let's go look at our javascript here and when you look at that script loader is not defined right so in order for this to load without error like this you need to put some logic in that client script to say only load that script loader if it's if the window is not null because window again window equals null in portal so if window is not null load it if it is no don't load it right but we're just going to go turn it off right now yeah so let's deactivate that okay now since i can't do the javascript runner in uh portal i'm going to activate this little script and all this script is doing is logging the url parameters when when the form loads so let's turn this on real quick so as you can see it just does urlservice.getparameters okay incident form let's do a hard refresh real quick and error again right this time it says url service is not defined so the reason url service is not defined is it's not being brought in to the portal right because portal doesn't understand jelly mind you we already took the formatter off so it wouldn't do that anyway but it doesn't understand jelly we'll actually go turn that back on real quick the formatter let me go incident configure form design let's put the formatter back on that way it's going to work in both of our ui's okay service loader okay we'll go back now to the incident form do another refresh we're still going to see our error there because again it can't read what's in that format okay so how do we get around that we are going to have to associate our url service script directly with our widget here okay so let's go do that let's go into the widget service portal widgets we're going to find our form widget there it is and so for you know out of the box widgets you have to clone them if you want to customize them but you don't have to clone them if all you want to do is come down here and add a dependency okay so let's create a new dependency we'll call it a url service well actually let's just call it i like to call these very generic so i'll say incident form dependencies okay so that this is a record that's going to hold the script so we'll save it we're not actually associating with the script yet as you can see after we've saved it we get a js includes down here as a related list so we want to go ahead and add a new js includes which again is just a record that holds the javascript it's not the actual ui script we'll name this what was it url service loader our source is a ui script we could say url if we wanted to pull codebase off of the internet right so from some cdn this is how we can pull in bootstrap 5 if we wanted to is is through a js include but we're not going to do all that so our ui script again is url service so there it is and we're going to save this now when we go back to our widget we could back up through it but let's go back to it right quick form we'll see we have a dependency down here for incident form dependencies and so what that did is associated that ui script directly with our widget let's go in here and refresh and now we don't get an error and we get our array our array is a little bit different here because we're in the portal all we have is three parameters id table and cis id and and because i put it in manually i mean if servicenow is one of servicenow's urls it would be different that's our setup okay i want to take the step back real quick and go back to global let me see if i have i can't remember what tool i used earlier let's see if you go in here and google javascript minimizer you'll find all sorts of tools i want to say the one i used was probably this one yeah this is the one so minimizing code takes your code and takes out all the spaces takes out all the long words that are parameters and gives them a letter instead of a long word it makes it basically compacts your code down and makes it less have less of a footprint okay the code we're looking at here is one kilobyte it's going to make it a little bit smaller than that but not hugely but when you're talking about thousands and thousands of lines of code that you want to bring in it's going to significantly it's going to make it significantly smaller by doing a minimization so our form service is the one that's set to global right now so let's go ahead and copy that and paste it into our minimizer here there's other ways to do minimization this is the quick and dirty way online i'm gonna put our code in there and we're gonna say minify and it gave us a minified version now this manifestation i can tell already isn't super great let me see if that other tool which other tool i used it may have been this one from topsail let's try that again because that one did not really minimize it very well okay all right minify this one looks a little bit better so you see like the you know the the parameters have become just one single letter single letters this is not human readable right it's not very human readable if you've ever seen the minified version of jquery it's you can't read it like it's just a bunch of letters it looks like it looks like it's a binary of some sort but the system can read it perfectly fine and it makes it a lot smaller so we'll take this and we're going to put this back in our form service ui script okay form service all right there's our minified version of our code if we come back to incident here and refresh okay and let's do form service hide field and let's do caller id this time and run code and it worked right because it we did the minified version minified version is the same exact thing it's going to give you the same exact result it's just not super human readable there's packages out there that you can get for like visual studio code that every time you save your code it automatically saves the minified version of it as well which is super useful that way you can always edit your non-minified version but you always have a minified version that you can tap into to pull into service now very very useful okay so that's minification so what that did also let me create the naming convention for these is swarm service oops min dot js so let me go grab that minified code real quick to show you the difference in size right so we'll save that and then go back to where my forms are here and we can see form service min goes down to about half the size as it was before right and again that's not significant here because we're talking half a kilobyte but if this was megabytes in size that would it would make a huge difference by by minifying it okay so very useful tool and i think it in in my opinion when you have very useful functions like hydefield showfield it negates any arguments of whether that should that should be brought into the instance if you're using it in multiple places ultimately you're saving so much time and maintenance by not having to write g form dot whatever in every single client script that it far outweighs any risk of size right for something that's half a kilobyte or one kilobyte uh in size okay so that's minification the only other piece i wanted to show you guys was i have a i showed these in the script include one a few weeks ago i have a glide service here which is an easier way to write for me at least i mean i use this in customer instances an easier way to write glide records you can write cloud records in a single line i also have an ajax version of that that only exposes a few of the methods here so multiple single single id and then i've also created this ajax service ui script which i'll show you how it works i think i have this in here already let's see ui script yeah ajax service let's see if it's active yeah so i've made this global and i've already added it again a very small script in our script here now we're in our in our incident here now let me refresh just for good measure i mean glide ajax nobody likes the right glide ajax right but just a pain well this glide ajax will allow you to either get multiple records get a single record or get a single record by by query i should say that this is a single record by query or a single record by id with a single line of code okay so come in here to our javascript executor we're going to say ajax service it is let's do single id oops okay the parameters that that takes is first off it's going to take the table name right we're not going to put that in here we're going to say gform get table name for the table we're on currently it takes nssid so we're going to say g form get unique value because that's the cis id of our record that we're on and then the final thing it takes in is a callback function so because this is asynchronous we have to tell it what do we want to do after we get the data back just like in any glide ajax call right so get xml answer does the same thing so function is is the callback give it a couple lines here okay and in here we want to just do console.log we have to actually put incident here right or response because what we're getting back from this call the response is something we have to put in that as a parameter because we have to call it in here in the console log okay so let me open that up a little bit just so everyone understands what we're doing here again ajax service single id passing the table name passing this id passing a callback function for what we're gonna do oh i better put that s there for what we're gonna do after we get that response back from the server so we're reaching out to the server right here with a single line of code to get this current incident that we're on and there it is so i ran the code and we have the entire incident object here with a single line of code no more writing crazy guide ajax if anyone wants this it's you know i'll give it give it out to you guys no problem yeah so that's where we're at i use all of these methods pretty thoroughly and i hope everyone understands the concept and understands the importance here of you know keeping these things as is centralized and concise as we possibly can so we can interact with the ui not just the server but the ui in a meaningful way as well okay our next slide which i'm not going to show but it is q a so do we have any questions yeah i've got one that's martini i've got one as far as debugging making changes to the ui script i've run into some cases where i'm actually killing deleting the cache and everything else still it still ends up loading the unmodified version i've had to go to delete or i should say shut down the browser and start a new instance is that kind of a common uh common place yeah so what i find most the times whenever i find that occurs it is a deep-seated script so like if i'm building a widget and in that widget i have dependencies that like dependent javascript you know ui scripts or services and things like that i find that those get cached the deeper they are they get they get cash and they're harder to get rid of i find i typically open up a an incognito window and do my testing there because an incognito window isn't going to hold a cache or i just have it very handy to where i can go into dev tools or into settings and actually actually clear my cache rather than just doing the shift f11 or the you know shift control r because that's supposed to bypass cache but i don't find it always thus some cases it does some cases it doesn't but yeah it's an issue i think anybody who's developing in the client is going to face at some point but incognito is definitely your friend in that case okay good i just wonder if there was something a way to get around that or something i was doing wrong that you know it was kind of annoying behavior for sure oh yeah 100 and the good thing about incognito too is that when you're logged into a separate window the incognito window you're in a different session than you are in your non incognito window so you know how you do the thing where you make an edit or you make an update in the browser and then even if you're in a different tab you go and you you update something else and it the last page in its history is the one you did on the other tab and so it moves you to that history and it's really really annoying and so having the incognito window open prevents that as well right okay yeah and that's pretty much all i do i have just seen it do that though even with doing in fact i don't run anything other than incognito but i've actually seen cases where they had two instances of the browser open you know same same browser and both incognito they still i've had to shut both browsers down to be able to get the cache sufficiently flush to get the new to have it load the new version of the script in there's a browser extension called session box which lets you do basically containerized incognito windows so that they each have their own separate cache cookies and everything and you can just open them on demand and they're in the same window which is also kind of nice yeah that's nice it's nice oh good pointer yeah i forgot what i was gonna say but it was along those lines yeah i i find that to be very annoying as well but you know in in the grand scheme of things too that cache what it's doing is making it so you don't have to load your scripts every time the the page loads anyway especially when you're talking about huge things like like jquery and and so you know super useful but it's a real pain in the butt for for development as well yeah any more any other questions hey david so is on the topic of cache is that something that you'd have to be concerned about if migrating a change to a ui script to a production environment sure yeah yeah you would want to i mean if you're doing it after hours hopefully everyone's out of their session and when they log back in it should pick it back up but yeah i've definitely had issues where i'm working with customers not necessarily in prod but testing and it doesn't update on there and i have to tell them to go in and clear their cache yeah yeah so it there's a risk sure so you make sure that's part of the deployment plan right is to have have the folks log off and log back in if they're not seeing what they're supposed to see nice thanks okay anyone else over two minutes from time here hey go ahead good super cool david first off is there a use case where do you want this to load everywhere on the platform like your two services yeah i mean yeah the use case with form service again it's so small and so useful i i load it on every page as a global i don't think there's high risk in loading this one i think if they're very generic functions that you could use in multiple forms across the platform and it makes development easier because you know these apis really really well i think you could load them i don't think there's a there's a risk there and again minimizing it cuts it down about half in size as well so yeah i would say this class form service is one that i would consider for loading globally cool cool anyone else i know where you got one minute left here y'all i don't want to run anyone over here because i know we all have a lot to do reach out to me anytime if anyone has any questions or needs any help advice anything y'all know i'm like on line 24 7. so cool this was great thanks everyone thanks so much david thanks good yeah thank you very much thanks david thanks thanks take care guys [Music] you