foreign welcome to another episode of inside the barrel where John and I talk about Consulting life and we talk about servicenow and trying to experiment and develop within the platform today we're going to talk on some Tokyo features um mostly es12 um because that's the new new hot thing going on and we're going to kind of explore some of the things we used to do in the platform around like bringing in external libraries and around portal widgets and utilizing some of that es12 so we'll see how far we get with some of the things we want to accomplish and and yeah let's uh let's have some fun yeah all right so uh so talk talk us through like um when would you even start thinking about using like external libraries or modifying portal widgets um for me it's usually you know based on the design we get from our Design Group right um and then there's a there's sometimes a discussion around is it a smart idea to even do this because you know obviously adding in external libraries presents its own risks and um Can complicate a deployment for you know the timeline to deploy to get things done especially when their their libraries that you know you haven't used before and it's the first time and you're trying to get it to work this happened to me on uh a portal build a few years ago uh they wanted a uh a 3D Carousel and so I found this angular 3D Carousel library and and loaded it in and it it took me for a while to get it worked out the way it needed to be to work the way we wanted it to and so um that's one of the caveats to trying to use the third party libraries but you know there are other things like I think we were talking about moment JS right that one isn't necessarily A a bad idea out you know ignoring the fact that the developer of moment is like we don't use this anymore and stuff like that um using moment though is is much easier and less problematic because it's not it's not like front end it's not in your face and it's not you know uh I mean I can't even think of the word I want to use here but you know moments behind the scenes where this Carousel was up front in your face and it had to work 100 all the time I remember I think it was Jace did a post of like way long time ago about importing moment.js into your instance in the script include and it comes with errors so you had to like go and fix the errors and I and that's one that's one thing I want to try because moment was great for working with dates especially if you're just an app like yeah do a bunch of stuff with dates like I love you uh glad daytime record but I also it's a love hate relationship you know speaking of that that sounds for I I remember that the errors and that you had to do some things to get rid of those errors yeah it was I think it's because it used map uh in the code when you like when you build it pulled it in and so I wonder now that map is supported in the S12 like if we're gonna even have those errors anymore it'll just work so like that's one thing I want to try for sure for sure yeah no um let's do it all right so shall we how shall we start with that so like one way of getting external libraries into the instance is really just um taking a script include and like loading the file right that's the the like super easy way to do it um and so I mean just just copying and pasting oh I want my service I'm so used to doing services all right yes if if you went to script includes uh and then you create a new one and you could name this like moment.js and it's been so long uh in the fourth moment JS sort of stuff yeah I think you can name it moment JS yeah this is from 2019 and then you could you should be able to just uh paste the script uh with that you get for a moment um so if you if you download that one let's see is it usually under well I just also John I don't know if you've used the new community but they totally just changed it oh oh yeah yeah yeah it is completely changed and FYI I tried to uh thumbs up something and it was like you can't do that and I was logged in all that stuff I'm like well this is great I can't even thank someone for posting an answer I needed but hey I think it looks better though yeah so that's that's cool but um yeah so that's I just got shocked I was like am I actually on the community website where did I get to okay so you're saying just grab all 5 000 lines here yeah yeah so go to the raw click on the Raw on the top right yeah and then just copy that and then go to your script include and this should give us an error uh well you I think you need the the moment JS that is I did you go to the down no not the one on there go to momentjs.com I was trying to be all smart about it right there I sent you that I sent you the one that you can use okay let me grab that and you have to paste that in there so this should give you an error so oh yeah okay oh you mean saving it yeah when you save it it's gonna be like yep we we don't understand you know that that line and I think the solution was like like you had to delete that like change that line of code or something like that always so what I what what I like to do sometimes just because um it uh I can bypass the editor because sometimes it's the editor's problem I and I know because of es12 or whatever um maybe it's not all that's not what I want it I want it no I don't want that yes leave what I want is this one and so you can paste it here and Save anything and then come back in here and it works this this is one of those tricks where you have like if you need to bypass the editor because the editor is your problem you can do this I mean so let's go to a new tab and go to background scripts um and um and then you should be able to to run this little test code and I'll set this to you so FYI people out there that was uh courtesy of Essen utils um thank you arnode for your so useful tool yeah to help us make surface now just that much better background all right I slacked you some some code that should that should work okay there we are I think your screen though crashed I don't know if you're sure it did um I have a hot corner and I hit it nice yeah if it's not one thing it's another with me all right is it sharing now yeah there we go okay so yeah so run that and that should just work all that's saying is you know you know this GS include you're loading it and sing name after it's that it's the same error oh was that that same error ah so you couldn't you couldn't get past it well I could I can save it without doing that but it still presents a problem I think you could just delete that line of code actually from what I remember what was it four thousand was it operator that's not it maybe just cut the code paste it again I love how like long it'll take us to get to math okay so you're thinking this line or this section yeah that entire section you can take out because we're not using that symbol uh and now you should be able to save and let's see if it gives you an error nice cool so then now run that [Laughter] uh well I think it executed yeah oh yeah maybe down here we're good yeah yeah we're good cool so that means it's working right so the question now is if we if I don't know if you have a test uh studio app but we can just create one really quick go to studio and let's create a and I'm assuming this is on Tokyo uh yes I believe it is yeah uh somehow I was able to just sign in click create uh or request a instance an instance and got it right off the bat I didn't even have to wait no no wait time yeah I that's pretty cool create a new one just name it moment sure we'll put other things in here beautiful and then just I think you can now skip to advance yes you can get right in there which is so nice and now go into file settings oh POP settings yeah because you need to turn on es12 settings then flip that es12 switch yeah awesome cool so now try to create that script include again I'll give you a h [Applause] that script include and moment.js because this is in a in a scope it's okay like you could have the same name oops and I'll paste that whole thing and this should accept it because symbol is supported look at that done look at that now go to our background script copy your current code and then refresh because I don't think this one has that loaded yet that should work awesome well no I think that caused by a bunch of Errors Okay so interesting that's granted for the cross scope oh they may have to go create a cross scope thing no I think it was granted and added so that's fine the but it looks like there was some error for for a moment is not defined ah I think it's because in this code oh do I have to I think I think it's because moment isn't in like we're not in global right so that moment doesn't exist I think we need to like instantiate moment like I don't think GS include Works uh in scoped apps the way we wanted to oh boy remember that scope apps checking it yeah I think there's an alternative for it okay so I think you're just going to want to call your your class right so instead of GS include you're going to want to do like the name of your app so X underscore oh man I mean it's on the bottom there it's on the bottom there on the yeah so just type that in and do like a Dot and then moment so is it uh so on the script include I think we just need to oh on the script include so you see where it says the API name go grab that and do like a uh a new a new yeah and then open friends I think you need to open friends yeah try something like that we'll see oh I think it doesn't like the name.js change your file name to not be.js same error though yeah same there welt well my thought of it being easier was not was not easier oh man okay I could have swore GS include normally work so someone else but interesting but it looks like it's erroring on I mean it just shows so much I don't know if it's erroring on the u-strict or or somewhere else this like underscore underscore Proto apparently it doesn't like that that's just too new yeah I guess they just didn't it's I mean it's deprecated as well um should we look at this day one this day GIS does it have new stuff in it like uh let's see it could be that just moment JS is so old right that well that's that's what I'm wondering is that if it's uh a problem yeah because the underscore underscore part I hate when there's multiple files which one is the one I want so normally it's like under maybe a build right and um yeah I always thought it was under Source but then there's like two kilobytes this thing is awesome uh uh download okay so I think you can download it on the npm package do they have a flat file though so if you go to the releases tab up top uh should be go to tags click on tags next to branches Dev branches tags do you see it because I'm oh yeah that one yeah there you go and then at 115 you can click on that one and you should be able to download that zip and let's see what's in so that's it so maybe it is the index.js really let's see I'm opening index.js as well I mean no that's going to require stuff like I don't think days is they have like a a JS file for it like it looks like it's only an npm one I don't like that oh probably actually I found a I found the CDN for it here I'll send you the CDN so we could go directly to it yeah so download that I mean it's a minified file so I do apologize I hit my hot Corner yet again I love it was because I got to switch between screens here yeah I feel though that um that minified file is really small I think it'll just work in Old School one I'll try it in in another instance as well for uh if I can just paste that all right here we go okay oh minified 's great but also not great when you're trying to debug something right so I'm gonna behind the scenes I'm also gonna paste that in uh a dehumidifier an unminifier in a non um uh in a global one so yeah I mean that works in in old school as well so not really great for our test here John I'm sorry it's okay wait so this one works in Old School too that's but that's good though I mean it's better than not working yeah and then we could try we could try calling that in your background script what's I'm trying to look for its usage here I think it's like ajs. format .format yeah like here I'll send you this don't uh don't hit your hot spot or whatever so I think we can just switch over to that take this out we'll get rid of that top one too let me go high over to my other monitor there we go look at that no problems uh all right yeah you think if we just do this that should give us something but where's the days coming from I'm confused oh uh I guess we need to switch that to that but what are you calling on the the dot days oh did you call it dot days uh yes okay okay oh I guess I need to well it shouldn't matter no no that that should be fine um can you GS dot print or Dot law dot info just days.js rather than calling something I just want to see if so many fat fingers you're doing great oh I'm a shy typer no so it cannot modify a property of a sealed object oh geez I'm just we're just guessing here now but you said this worked in global I wonder if it's just a uh yeah I mean it worked in global I didn't test uh actually usage oh so I could I wonder if it's just a scopey thing I mean you could switch to um include what did I even name that file let's see if I can test for you JJs okay and then [Music] foreign no good uh I'm playing around with it so trying to see if I can but I think this illustrates the other side of of how you do this you know with cdns or um third party hosting for Library because nine out of ten times if you pull it in from a CDN it'll work just fine um but you know with that there's the caveat of how the client feels about that um I've run into a mix I couldn't give a very good like percentage but it's probably half and half some don't care some do care so um so that worked I got it to work in in global and Global so um just do um so go back to your original code that I sent you for the moment JS stuff and then you should be able to so this and then just change that top part to the day Js or whatever your day you named it day right like days yes and then instead of moment change that to day Js because it instantiates at stages yeah should should print something uh do I need to be in global um well no because it's it's in uh it's in that um in your scope right it's not actually in a yeah it looks like it's just getting errors right for yeah that property of a sealed object um so that's that's a all right so now you're gonna deal with more JS issues than most of you guys remember like servicenow really built their compiler from the the es12 compiler from like the ground up so we can only supports certain features so it may we may get into trouble just being able to copy and paste you know flat flash.js files so right right there's there's probably going to be a lot more uh Community posts of like how do I use JS or JS why can't I use this file it doesn't work yeah yeah so so note that I mean this is a great lesson of like it's not true es12 yes and a lot of the world has moved past just flat files in general so um a lot of npm npm stuff so let's go to widgets I'm right there with you let's see uh uh let's just call it CD and libraries this is going to be a Bare Bones deal here because we just need to get some stuff in into it oh let's see here I don't have a page so many chicken and egg things you got to get done to even get to where you can play around with the test portal uh yes also we remember that GS print doesn't work in scoped app so you may have maybe that was part of your issue as well oh you could have done a gs.info but good good call out am very good yes okay it's kind of one of those it's kind of one of those things I wish there would sound just like you don't have to support GS print but just make it do GS info just Alias it in a scoped app so I don't have to like change all this console.log too while you're at it yeah I think there were some things they just they're like someone was opinionated and made it really [Music] [Laughter] it's a call out like yeah like the the difference like I remember in Tokyo They just added like IP address um like apis and scoped apps it wasn't there before so like checking if an ipu was an ipv4 or something and it's like it's an example of like why don't you just Alias those things so they work in the same global landscopes yeah that's another day another problem how are we doing John we're good I I'm just I'm just getting things this is the John working hard to like get a a widget on a page oh my gosh there's so many there's so many steps just to get a widget onto a page I mean when you do it through the platform right like I think we could have uh it's worse through Studio well the editor there's two editors you know you have to go through a bunch of stuff just to get anything to work all right so there's our page with that now I just have to throw something on here so I can find it because otherwise you get like a a white sheet and it's I can't find it very easily okay so now if we go back to our page we'll see CDN okay perfect now here's here's the the trick uh it's on themes you have to load it through the theme I guess you could do it other ways but this is the best and you this is the fastest and easiest way to do it um and then what you want so are we doing what are we doing um uh days sure and you gave me that CDN already where is it there we are okay so we're gonna call it days Js the URL and just paste it in there submit boom so now it should be available so what we can do um right yeah whoops well that's way far over uh we want to go to is it sources or network I think it's Network there we go and we'll just do Js uh we'll refresh and we should see well does it come through one of the includes maybe I don't remember let's just we could just try calling it in your in your widget okay uh where are we here but yeah I think it normally I think I normally see it on uh not on the network Hall but just on the files to see if it's if there is a file there but on the page I think looking at the the code for it it was like you should be able to call dayjs just day JS by itself dot format oh dot format okay yeah I think that was yeah and I think dayjs is a function so yeah yeah I think that should foreign date is not defined digest not defined so loading it didn't load that Source from that CDN uh should be there though Maybe um can maybe remove try to remove the function part of it so JJs as a as a variable foreign to see if it actually loads it so go to our sources and you attach the theme to the portal right oh good call no I didn't see there's so many steps and it's it's all out of order uh it's not very straightforward love it we sat there for an hour trying to troubleshoot that why isn't this working what's happening I'm just glad I was able to catch that quick I was like because it should load in the network as well so and it should be yeah it should it should be there right let's just make sure but I could have sworn it would show up here what about sources let's make sure I save that this is under scripts Maybe no maybe try changing your widget of back to that format JJs and see if it if it finds it foreign console right there it is nice sweet cool so yeah when you do it right then it works but what you showed there though isn't uh an es12 thing right that's just normally how you do any browser supported one right um any CDN one you mean yeah yeah that's that's how I would do it um and it should be available I I don't know like we could test it but I don't think it becomes available on the server side I think it's only available client side um and that makes sense right because it only it's only then has to check if the browser supports that function so you'd probably need to do some if statement right to make sure the browser does support it or have some sort of fallback if the browser doesn't but I think most places don't use IE8 anymore so I don't know did the government switch over because that's usually where I remember back in the day was ie6 and or five and you know government just would not get off that and it's like oh man I can't keep coding for ie5 this is terrible yeah yeah I think I think it's dead I hope so but I think I think so too I don't I don't think you could unless you have a computer that's like uh still on XP yeah there's no way you could even get a hold of it so I think this goes back to like how do we how do we play around with getting days.js to work on the server side right because we're in in theory in an es12 world like we we should be able to to load that same CDN on servicenow side and at work but I don't know if we wanted to troubleshoot that more or not well I think we could spend quite a bit of time troubleshooting but I think it's the same I think it's what we talked about earlier it's just you know this is servicenow's version and it's in its infancy I'm sure there'll be updates as they get um suggestions or complaints about what's missing or what's not working yeah they'll probably continue to upgrade because I'm pretty sure that's how it worked with the last you know the last time they did any changes to the the uh JavaScript uh framework because I remember when like split wasn't working you couldn't use split and some other things were broken um within the uh the system and then you know eventually started working later on well um okay yeah so what if anything else you think of for that would be useful to show in that case or in this case no I mean I think this covers it really uh you know I I know I mentioned the caveats before you know before you do this through a CD and make sure you're uh you know if you're a consultant make sure your client is okay with accessing third-party libraries outside of their system um if they are not then you run into you can try throwing it in as a UI script and bringing it in um shall we try that with this one uh we can I I always mess this is where I have trouble because I don't remember sometimes you have to like encapsulate it in something um so I don't I I don't know if I'll know off the top of my head what it is let me grab this link again so we can get it okay oops I don't want to save that so what what we're talking about here is you go to UI Scripts I think you can do it that way thank you and then you take out all that stuff in there but I swear you have to oh maybe I don't know I don't think I would have put the dot JS part there too all right I'll get that if you're using it click ok but uh that was a nice that was a nice warning yeah I wish that I wish they would do that with the other ones because it knows if you're going to try to load a third-party library or you know a third-party script um that you can you can do it that way so you think this is going to be a problem because I can't change it here though no it will when you change the script name it changes it on the API name does it yeah ah perfect okay all right so then we it's it's basically the same same concept so what we'll do is we'll take this one off and we'll add a new one so the reason you have to add a new one is you have to create that uh shim record the MTM record or whatever it is but we should have I don't know what it called it it's in a scope isn't it but it should be in the scope that you just created it so yeah fine let's see oh yeah there we go okay so it'll end up just like the other one was uh connected through the theme and it should load up the same way so that's good if you don't want to attach to a CDN and you just want to hard code to a CDN right yes or to a specific version yeah right right yeah yeah so there it is let's just make sure I think there we are yep cool so that one was nice in the fact that it uh was already wrapped correct like it just worked I've had some where you've had to like redo like you had to add um this around it um or something around it to get it to work but uh this is the fallback if you're you know if your client says no we don't like accessing external libraries you can bring stuff in and like Dorian said a good case for this is when you want a specific version because servicenow is stuck in the past sometimes and you don't want to use bleeding edge brand new versions of things because sometimes they'll bring in um problems and if you do it through the CDN and it's it's not versioned through the CD and it just always gives you the newest one you could run into um you know things breaking and you not being aware this allows you to test out newer versions and Implement them accordingly without uh breaking production foreign so this is what I do sometimes to get things to be pretty and cool yeah and I think the other thing I was curious is like I wonder if like that part of the reason we're running into that issue is around like that use strict issue like I don't know if that's now being read properly or something like that in es12 so um or just our lack of knowledge of we need new guests yeah yeah who's the product owner for the es12 stuff let's get them on oh that'd be sweet [Laughter] um cool anything else though I think uh I think that covers it um I mean that the SEC this this method here went smoother than I thought and so you know I I think that should be your you know plan plan a if you're going to use a third party is to try to get it through a UI script so it's internal and then plan B would be using the CDN um just because like I mentioned you know clients can be a little uh difficult with accessing third party especially you know government clients they will not allow that they may not even allow a third party libraries anyways but I know some of my uh commercial clients um like we've got a pretty big pharmaceutical company and credit card company that I don't believe will allow third-party um libraries external you can bring them in but uh you can't you can't link them out to like a CDN or uh stuff like that yeah and I guess the question becomes like what's the easiest way then to use it on server side and I don't know if we will have that issue here or that that uh answer here but yeah like I think there's a lot of like JS files like I think of like the npm world right like you can't really bring npm related things here but if they you know built it into a Minify JS file and you wanted to use that like I wonder like what would that process look like where we could do that yeah for me it's different because I I you know I could just pass stuff back and forth without worry but you know as an app you know from from your point of view an app would would require that script to include and you really would want to try to figure out how to flatten that down and get it into a script include to use because you don't have the luxury of the client yeah yeah there's probably just like um there's there's probably some sort of what's the right word um like way to call it that it would totally work but well you could I mean I guess you could you still have access to it through the UI script in an app um and so you know it's kind of the same idea you're gonna have to do an Ajax call if you need to pass it to the server but uh you you still have some amount of access to it wow yeah like let's just make Ajax calls every time on the back just to get access to it it's uh it's probably a little rough yeah no it really is but you know maybe there's one out there that works uh it's just someone would have to find it and test a whole bunch to figure out one that uh you just drop in yeah which it probably took someone a while to to find the um the like the the moment one you know getting a moment to work um so yeah we'll we'll leave that to the the people out there in the world to to figure out yeah yeah someone's smart all right well um any last other tips uh no I think we've covered a lot of it um if there is they're probably like very few like very rare issues that would come up um but uh I think that's you know 80 20 for sure yeah and I think like you know I think the biggest thing is on the background scripts than like trying to troubleshoot those issues like you're probably going to run to actual true JavaScript issues because yeah it's a it's an internally built uh module not just native you know JavaScript engine running so keep that in mind when you you still read stuff online like not every function will be portable um into service now so right yeah and that's where some trial and error comes in um and you got to be careful because the moment you agree to something and you're relying on a third party Library you've never used before that's when it's going to break and you're going to be like oh crap what do I do now so totally totally be careful and I wonder if like um like I wonder if you could like load all of it and just um you know initialize function so notice how remember we were like replacing the whole thing I wonder now if like you can just like load the whole thing in the initialize and and kind of get that to work oh maybe maybe we'll have to do a part two I know we say that a lot about a lot of our shows I was also like just like trying in the background trying to to do this like oh God anything else while I'm like randomly going at it so you just want me to spill for a while huh I mean it was kind of working and then uh yeah so even even throwing it in the uh initialize function rather than and using the the new um way had the same issue it essentially was you know cannot modify a property of a sealed object and so like I think we would need to figure out how to get past that part um or what servicenow is actually doing behind the scenes when it when it modifies that and and then like that would be a whole other thing perfect yeah so so there's our there's our ask for the the greater world out there figure out how to get around this sealed object problem get on the community and start posting the question at least in that case right I mean there's probably like I think the moment.js one right had a different one so like I think you know no matter which way you go there there's probably going to be um like issues related to uh like related to trying to to solve just you know loading a flat file in so yeah yeah I would agree with that that's what that's why you know the caveat is be careful tested before you you know you agree to totally totally yeah and because I think uh I've reached the point of I even tried moment and it had the Proto issue yeah so at least the good thing is is the errors that we are seeing I think once you solve all of them I think you kind of get you get to use it right like you have to solve the underscore underscore Proto so maybe like deleting that code you know will kind of work um finding the seat like once you like solve that I think you would be able to to start using more of those files sure yeah uh all I what I what as soon as you said that the only thing I could think of is it's just going to Cascade into like oh well now you got to get rid of this piece and then this piece and then this piece exactly yeah so then you're like what's left uh uh yeah I mean I think before we had to like comment out code before right so um I wonder if it's just like the same same kind of thing right yeah we're just we're running into you know because because it's not just true JavaScript you have to to like modify modify it to make it work uh yeah yeah and here I am trying really hard to try to now I was trying to get moments of work um I I like game up yeah yeah we're good all right yeah yeah cool we're gonna we're gonna do a little clap and [Applause] uh cool thanks if you guys liked it um subscribe share with your friends if you have other topics feel free to let us know we like to be stumped like this one so feel free to throw problems our way and yeah we're happy to tackle them cool all right thanks everyone see you guys [Music]