Live Coding Happy Hour for 2017-03-03 - Cross-Widget Communication in Service Portal

according to the harddrive backup plan all right we are live welcome to live coding happy hour for March 3rd 2017 we are continuing our saga of technical issues this this week you have an entirely new streaming setup and I think we're actually live now so we are I got the email so my name is Josh Nereus I'm a developer evangelist here at ServiceNow on the developer program go to developer.com for training and documentation on api's and of course everybody wants those free personal developer instances and with me today is I'm Chuck Tomasi platform architected service now work in the platform practices team where I do POVs and evangelism and enablement and all kinds of other fun stuff that I can't believe they pay me for this stuff but I'm not returning any of the money to borrow a line from Dave Dave's not here man you better explain that I know yeah Dave couldn't be with us today he is on a plane actually one of probably several planes on his way to India he's going out to India for the developer days happening next week on Tuesday and Thursday in Hyderabad and Bangalore so best of luck and safe travel see today wish you could be here with us safe travels yeah absolutely so life getting happy hour is a time we get on screen and we spend some time coding in ServiceNow so if you haven't seen this before this isn't a demo this is unscripted we try to hack on some things that we haven't done before and learn about the process along the way so it's not guaranteed to work and sometimes we like it that way because we get to show you how we figure it out so hopefully we're good to go and let us know if you see any issues with the stream for throughout this just drop up drop us a line in the chat hopefully our set up this week is better aside from our little inability to actually start at the correct time but you know what he saw that yeah nobody saw that at all but this is of course happy hour so Chuck what are you drinking this week I have Bell's winter white ale from Comstock Michigan it is winter there so this is you know makes sense even though I'm in sunny Phoenix Arizona but works for me I like a winter retail sounds love you I have I have a I'm not actually even sure if I'm allowed to show this on the screen it's a little weird of it's a snaggletooth bandana from solemn oath brewery here in Naperville will not here Naperville outside of Chicago in Naperville it's an IPA so we'll see how this goes why wouldn't you've got all to show that it's it just looks a little demonic I it looks kind of weird oh I see none of the stone brewery stuff would work for us would it and that is yeah that's true that's true yeah this um this looks like it would probably offend some people myself on it like nudity or just some symbolism okay snaggletooth bandana anyway but that's not the point of today well it's part of the point but not the entire point no the first thing we're gonna do is get into our API of the week and I'm gonna go ahead and share my screen this is something we've started doing we want to call attention to api's that we think people either aren't aware of or maybe they're new so in this case I want to highlight some things that are new in the Istanbul release that we think you will find useful so let's go ahead and share that out you'll see that no I'm still get your camera oh wait I might need terming to click this green API reference server-side scoped there we go there we go so yeah so the API of the week this week is a combination of two things it's the glide scriptable input stream which is a little bit of a mouthful as well as this thing called the glide text reader glide it glide scriptable input stream by itself doesn't do anything you can't go and make one of these you can't instantiate one of these but you can actually get one of these from a sis attachment now this came out in Istanbul what's interesting about this is that this allows you to interact with attachments that previously maybe would have been too large to load into memory so if you've ever had a file and you tried to you know you've tried to load it up and do some kind of processing once you hit that five megabit or five megabyte limit it just chokes you can't continue work through it so so this is the API reference for that here's the glide text reader and what I want to show you is just a very quick tour of how it actually works and how to use it so this will go pretty quickly so I've got two attachments one has 500 lines in it it's just these are CSVs it's a consumer complaint database that I took off from some government data set somewhere and then one with 50,000 lines and the first one is 88 K the other one is over 14 megabytes so in our first example I can run lovey I love it so I'm gonna copy in to society whoa that's not what I wanted there we go it's happy hour people like I do not want that thing so I've got two societies these are these are representing the attachments and typically if we wanted to get the contents we would do something like this so we get our glide record and for this attachment table mm-hmm so I've got a reference to that and then we would get glide says attachment and we can get the content of that attachment by saying var GS of our content equals JSA to get content and we pass in the attachment that we just instantiate it so this is gonna give us the content from that attachment and if I bug this this will give me don't do this object so get content is actually going to take the content of the attachment and give it to us in a string for that's an interesting going hands doing the doing the pipe thing neat okay yeah yeah so so this went out there and it does what I wanted it to it actually read the CSV file in and I could process this I could split these things apart and sure them into a table or whatever the case now as soon as I try this with the other one I'll just copy in the CSV 50,000 boom it failed it's just it's dead it can't love it it's too big so this is where the new method comes into play so the what this looks like is first we want to get a stream and so we can save our stream actually first we want to get quite this attachment so so we still need a reference to that we'll say stream equals just a dot get content stream and then we pass in the society so we'll pass in the CSV 500 and we get a reader and this is going to be new Glide text reader we're gonna pass in this stream and a stream allows us to interact with large files without loading the entire thing into memory it progressively feeds information so we've got that and we're gonna keep track of a line and now we'll do a line in account just to you'll see why in a moment and now what I can do is I can say while line equals reader dot read line yes that debug the line so what this is doing is it's getting a reader it's iterating over every line in the file and it's going to just write that out so I'll go ahead and click run script' and there we go so I've got that that's on the 500 now to make this work with the 50,000 version if I actually were to print all that out it would most likely crash my browser so what I'm going to do is I'm going to say if count is less than 100 then I'm going to GS that's debug the line mm-hmm I'm going to say yep count plus plus and then finally at the end they'll say GS debug we're gonna say that we read count lines so we'll see what happens here and then let's update this so that we're reading the 50,000 instead so we clicked that and I have an error I missed a parenthesis somewhere where did that go Wow line equals countless plus I miss that where was there missing parentheses after the argument list on line 18 oh that's where or I fall back into some old programming language and start putting commas in for whatever reason yes yes absolutely I do that so often it's not even funny so what I need to do here is I need to initialize count to zero so that would help so there we go we actually read that successfully and then we stopped printing them out but we can see that we read fifty eight thousand while this would been absolutely impossible before this took less than a half second to run we actually processed a fourteen megabyte file all using Glide text reader so this I think is really really huge you know we've had conversations over in the SN dev slack a lot of times about how do you deal with these large payloads and this is gonna let you do that so exciting stuff the other thing to be aware of I'm not gonna get any TVs today because I want to let Chuck start working on his stuff here but you can also interact with glide digest to do things like get a md5 hash you can also use this with XML document to to process large XML payloads so that is this week's API of the week very cool thank you very much let me see if I can get the cameras back on track here I'm gonna go to camera four oh look at that I worked splendidly camera four is I think my desktop and I just realized I see the preview over on my other screen that I have that I'm down there looking off awkwardly into the side right and I happen to awkward ly be looking in the right direction cuz my screen is up there oh let's stop sharing my screen here in a Brady Bunch moment there well you're not going to be on screen at the moment so you don't need to worry about that it is full screen just me and that's kind of cool that the little icon doesn't show up in the wrong place good we were battling with some stuff earlier today as a test we did try to test this okay here's my story and I'm sticking with it let me just adjust my microphone ever so slightly so that I can talk and type at the same time I wrote a nice service portal app that is made up of multiple pages multiple widgets to process stuff it goes out and get some text and it parses it up and we've done bits and pieces of this the backend logic on live coding happy hour in the past the the issue I have right now is that I need to add some sort of status indicator to say I'm busy this is most commonly done with a spinner for example I'm going to add a page this is this is my emulated mobile interface right here I'm not going to show you the actual thing but I pick a date and it goes out and gather some information from a website but I had no evidence that it was doing anything until the pencil icon comes up and says okay I'm done and if I do hit the pencil icon and there's there's some buttons down here for like regenerate which happens pretty quickly save which I'm not sure if it happened or not because there's no that that's where a spinner would come in nicely and an a publish feature where I can push this out to Google Calendar thank you very much live coding happy hour for showing me how the OAuth stuff and Josh were bailing me out a couple of times on that so we have lots of references in here what I wanted build is a spinner that can be placed on multiple pages at multiple times so it's not just one thing on a page that I turn it on on and off I want a widget that I can place on that page or multiple pages and signal it and this is done with either the dollar broadcast method or the dollar Amit method and then the the widget is listening with the dollar on now I've I've read some of both and it looks like dollar broadcast is preferred in this case and I can't really give you the exact reasons why cuz I'm not that smart yet I'm sure somebody who is better at angularjs can do that and Josh do you know that they were Sweden dollar broadcast I don't that's my angular knowledge is there there's some things that I know and that is not them whenever I am in doubt I usually go to the angularjs docks and say tell me about dollar II mint or dollar timeout or dollar this or dollar that and Doc's not angularjs.org has been my friend a lot now there is some stuff on Stack Overflow which is also my friend that can tell you about Amit and on and and that and I read them at one time but I frankly forgot them at this point so I'm going to go ahead with what I think is hopefully an appropriate solution that we're in build so let's start by going into the service portal configuration screen will go to widget editor and I have various the app is called on this day so anytime Co TD that's what it stands for I would hey Chuck sorry I'm actually I can't see your screen on my side we can see it on the YouTube side really but I am not seeing it well that thing is interesting let me go to Skype and do a conversation share screen that's what I need to do to get you in the picture okay there we go cool thank you you're gonna check my typos for me and then one comment - is that on the chat we have Jay says that broadcast goes down eehm it goes up broadcast goes down from route scope to sub scopes I'm thinking any Makia down through the child controllers and then Amit goes up through the comparator oh interesting okay so that makes sense thank you I love this learn so that's why we did absolutely okay so first thing I want to do is make the widget that I'm going to put on the pages I will call this for a lack of imagination OTD spinner and I don't need a test page because I'm going to put it on existing pages and first thing I need to know is how do you actually make one of those little icons spin so I'm going to look I I II thurr use two types of fonts when I do this font awesome or glyphs and I'm pretty sure font awesome as an example that I can use I love font awesome Nasim is fun it really is a lot of fun and w3schools which I constantly use for many many things we can do the font awesome circle Oh notch cog gear refresh spinner spinner looks kind of like a corporate logo I don't know exactly why that reminds me of that but maybe it's an old movie or something um telecommunication looking it's that's what is kind of the the arrow is the Refresh well I'm not really refreshing on this screen so and it looks like it's being recycled I'm gonna stick with circle oh notch which for some reason reminds me of a ranch in Wyoming that teaches programming yeah I'm sure that's a real thing if it's not you might have to get on that Chuck so you can see that when you declare a font you give it a class and you tell it which one you want the font awesome circle Oh notch and give it a size and down here where it's spinning you just say FA spin and if I remember right there was also a way to increase the size with like FA 2x let's refresh that and that didn't work Oh style is in there the style is doing for me take that out watch the difference evil heart cut out bigger oh now you can adjust things on a relative size kind of like h1 through h6 m a spin so let's put that in just to see what happens and it goes in from for whatever is it goes in this italics tag which i think is just kind of interesting let's copy that yeah I've noticed that with a lot of I think all the font awesome stuff is like that if we remember correctly let's do two x and save it we got to put that on a page somewhere don't we so let's go back I suppose we do designer and I yeah can you preview it I can I can preview the widget I don't know if I turn preview on in this particular one I'm going to do it from the hamburger an able preview lookie lookie we have a car so it's it's static right now it's not turning on or it's not turning off but I can put a spinner I validated hey yep that's a font yep there it is and I want to look at the I don't look at the oh is it I'm going to go to the maybe it's the output page and also the new page which is this page so I have two different pages in here let's put that on the new page so when I'm creating a new event somewhere in here I now have my spinner ooh this is where it gets really easy I can handle this kind of stuff there it is auto saves I always think you got to save on a page but you don't and back to [Music] know that's the portal dang this is where I always get confused trying to go back and getting another page designer page no TD and it was the counters was the other page so below my little chickadee easier I went on another one spin let's put that down there can I hit that did it hit that I think I missed no there no it's it's hard with this margin yeah it could also be because we typically zoom the screen up so much that's true let's reduce a little bit but what I could do what I could do is put it above there you go and then move it right because you can move things around right there there now it's on the bottom and obviously I want that centered that would look a little better so I've got the two pages that I want this on with the widget and if I go back to my good old some reason I was after yeah yeah yeah yeah I was after load the first page to get the subsequent pages it's working in my little mobile emulator so what do you think a Center I know I'm a little old fashioned there's probably a better way to do this with CSS and whatnot but you can't give me a good center tag I forgot the center tag even exists I haven't seen in a while what have you been doing like text-align well see a bootstrap gives you some interesting ways to deal with that but oh there is another way that I have seen and it's class equals text Center I think that's what you're talking about right that's what that bootstrap ones that might work as well is a classic quote yeah it's time to find out ah there you go maybe not yeah Saturday B yes I reloaded centered okay now I need to start the communications between these widgets turn on turn off that's where the magic starts to happen and in this widget we don't need server code we're not doing anything there and I'm not gonna worry about preview because this is not gonna help me in preview but the client script I need to inject scope we're going to be playing with scope and as we mentioned before broadcast communicates to the other widgets and that's done via route scope and you say well what's the difference between scope and route scope there's videos out there but effectively it's it's it's like variable scope in any other programming language it contains the the the ability for other things to affect your stuff oh very layman's way out of my sandbox if you're if route scope is sort of like global variables and my local variables in rough terms and basically scope in this case is the this particular widget right so this is only the widget that we're working with now versus the you know this thing that all would just have access to and service portal handles in managed I think we've mentioned this before it handles and manages a lot of those things for you so you don't have to get to not and bolt see about some of the controllers and bindings it makes it a lot easier in my opinion I can forget about some of the esoteric things of angularjs one of the things I cannot forget about let me make the font a little larger so you can see that I think I reduced a little while ago yeah will do that is looks good dollar timeout I am going to be using dollar timeout because I wait just a little bit to make sure that my broadcast event is fired and then I do something that's that's how I got it out of an example I don't know I haven't tested without the dollar timeout but I've seen other examples use it this way and I'm one of these guys that I'll do it I'll hook it up it may not be the most beautiful way but until someone tells me better and I think we've got some angular people in the here so I think I'll watch for comments over on the youtubes I might have some good input so the first thing I want to do is make that flag should I show the spinner or not so let's do a variable show spinner equals false will default it to off until somebody tells me to turn it on and then I need to be listening for the event somebody's going to throw an event one of those two pages is gonna say hey turn it on and the way to listen to that is with the dollar on now there's a dollar root scope on and there's a dollar scope on and this is where we got into the difference between the two and I did prior to this I researched the two on stackoverflow and somebody did a very good explanation that says if you you can make this actually work with root scope not dollar on oops not one darn motor skills and say listen for my event I'm gonna call the event show spinner and you pass it the function the issue with this is if it gets invoked over and over and over again you could start having some too many listeners like orphan listeners so really what I need is I this is the only widget that's going to be listening for this it is it is your job mr. widget to be listening for this show spinner event and if I look at the methodology of this it's going to be listening for my event name and pass some data this could be very complex JSON data it could be very simple I am going to keep it simple and say true or false you're on or you're off you're not and go forward so let's just good old debug throw something in the log that says I'm in my own method my dollar on thing and show spinner is let's print out what came into this function sense yeah just some kind of indicator that something came through that way we figure out what okay I like it and then here's where I'm going to turn it on or off I've got my hands on that data it's going to be true or false again could be a more complex object if you want I'm not going to do that dollar timeout it takes a function as an argument and I may not need to do this is where I start getting suspicious because I'm I've got an example off to my side so I may be copying bad practices somewhere and its job is to change the variable the show spinner to whatever is in that data variable now you can also say half a millisecond delay it is in milliseconds so turn this on a half a second after you receive the event I don't necessarily need to do that yeah wonder why let's put that in well maybe we'll destroy it later and take it out see what what happens without the timeout because that's what we write no this is complaining you need to I think a closing parenthesis for your your dollar on there yeah okay yep you're right okay then then my HTML guess what I get to use to turn this thing on and off ng if you got it I now have a variable that controls the state of the spinner it's going to be true or false sometimes the autocomplete drives me absolutely crazy oh yeah and by the way while you're formatting the code somebody in the chat asked how are you Auto formatting that code ah special I think Frank Shuster showed me this one yeah the indentation got a little wonky on me air will make it purposely unwilling wonky and if you do a command a on the Mac select all whatever you select all key is and then shift tab changes the indentation back it active - shift tab that works on the script editor - in ServiceNow so you're in the middle of a business rule that'll do it - whoa that okay that's new information I did not know that hotkeys I love them you scared shortcuts all the time excellent even used to the the normal script editors got that little button where you can format the thing and all that which is kind of what I would have figured but yeah that's good yep my little format e thing yeah cuz you get really tired of going space based down over over no thanks so theoretically this is a fully functioning widget and if I reload this page it defaults to off now I need that other page to turn it on and the other page had let's go to the new page I can't remember the name of the widget now not the page editor I do that every time your the widget designer right or I want the page designer because I can't remember the name of this it's OTD new page no that's the name of the page well same with the widget I think that is the name of the widget okay so how do you get back to the widget editor would you designer from here that's the part I always get confused with and I guess I could always go just go back to the oh there there okay Wow widgets okay widgets got it so OTD new page is doing two things actually one thing it displays a calendar here's where I display the calendar and when you click an icon it receives an event called create Angie change does it create so in this is where I want to turn on the spinner so I do my HTTP rest post and when it's successful it comes back and says okay I did it you win I'm gonna save your society for you in the dollar scope data stuff so somewhere in here I need to first say turn that sucker on which is where I do a root scope dot dollar broadcast my event name and the value that was got that data so turn this on when this method is when yeah when this method function is called capiche that makes sense I like it it makes sense to me let's see if it makes sense of the computer I mean that's that's what really matters that's that's what we want and then I also need to obviously turn it off now the question is when do you turn it off one would think it would go right after your thing is done but that won't work will it that won't work why not because this is an asynchronous method and yeah yeah so the code is going to be running and this thing is already finished executing so you gotta put it in the callback yes and the callback in this HTTP method method is where success it's in the success section so in here is where I need to turn it off same thing root scope dot dollar broadcast show spinner false pretty easy turn it on turn it off now uncommon theoretically if some if something failed that spinner will always stay on right yeah will but you also get a I thought I had a message in here somewhere I was going to do messages at one point but so you might want to do a final final at some point so something to think about okay I've got route scope up here which is nice I didn't have to add that because I am using it in here I'm getting HTTP not using timeout here let's see what happens go back to my little ported designer I'm going to start from the home and I'm going to add a new page will say march 9th it's on it's off beautiful that's pretty cool big drink I think so those we're gonna be done in ten minutes and this is this is going to smooth is going let me check the comments so jay jay is our MVP for today he says timeout helps with race conditions since all we just can bootstrap and render asynchronously at different times the time I feel like could still fail because it's arbitrary so that makes sense there there could be a point where yeah the other thing Jay was mentioning is that success the dot success method is deprecated it's better to use the dot then which returns a promise so we were talking about promises a little bit earlier for other reasons so that might be something that we'll want to explore eventually yeah it is because you've got a dot success and you've got a dot fail that then seems like it's going to happen anyway it doesn't have a fork well I think dot then accepts two methods and so what'll happen is into that then you pass a success and a failure message method and either which might be might be called so these are the things that we learn as angular evolves is that an angular 2 maybe I don't believe so cuz I know I've seen the dot then thing in angular 1.x I'm not sure at what point that became deprecated okay so because I definitely have seen dot success in a lot of example code out there so there's definitely there's definitely some of that hanging around still now one thing that that I may want to consider is we've got VAR c equals this that's sort of the generic boilerplate for all widgets when you first start them up is to do c dot show spinner equals false actually no wait that's not gonna work though cuz that's on this widget that's on this widget not right the root it doesn't have visibility to the spinner variable on the other one okay okay that must be somebody else's goof up from another example it's working and we don't necessarily need to timeout here either do we to turn the to turn it on or off okay we could oh oh wait if we wanted to verify that it was off I mean we could always do a broadcast and say hey shut yourself off we could do a root broadcast here Oh root scope that broadcast in case it was left on like you said in case it was left on by another widget yeah I mean you could either do that or on your on the other side you can or actually I'm sorry so instead of at that success you know what let's try it you want to try implementing a dot then because we've got some time sure so I think what we can do is instead of your dot success make that a dot then mm-hmm the first argument of dot then is gonna be your success function which is this and you can actually name that function if you want so you could actually put a space after the function input success in there so it says fun success yeah yeah much easier to understand and then pass the second function to the dot Venn method and call that failure I think it's a failure well I mean you can call whatever you want just that the second method is like this yep and then this will execute anytime things don't go well okay so let's put in an SP you to add info message things did not go well right right I do you have a reference to SP util right now no maybe that's right but it's just SP util it's not dollar s butyl right right that makes sense that is something so and then we could also turn that thing off this controller yep yeah because the first then didn't get running written okay yeah yeah so theoretically theoretically which I always cross out and put not really let's go back and do one for March tenth link hey we don't get an error message I don't know how we could we could take Wikipedia down I guess you could um you could screw up your URL you could just put in a you know no fun you mean the API URL yeah just make it 404 okay like pages there you go okay let's reload the whole thing from the top reload then theoretically we'll get something March 11th things to do go well okay I should have an error message green it's just not good for errors yeah that uh it feels too happy it's like things did not go well with a great grin and you hear the smile in my voice I like it so that's a that's an interesting way of doing then is to have two functions a success function and a failure function that keeps it nice and readable yeah I like it I definitely like it and then the other thing that J was mentioning is that dot then returns a promise so I I don't know this is where my angular knowledge I know enough to make some functional angular pages but I don't haven't really into into this but I think there's more that you could potentially do to then chain off of that after this thing is done right I haven't got a handle on what promises do and how where they're use either maybe like that then do this and then do that and like the way things along so let's go get our other widget or widget yeah widgets is the output widget which has the various phases and methods and those buttons across the bottom to allow us to publish and save etc etc and here are the methods that they use so one is going to write the record one is going to get a record when is going to publish a record so and these all use again these uh this one does a scripted a rest table API this one does a scripted rest API and this one does a scripted rest API so this this whole app is full of goodness very nice very nice look here's an SP util ad error message and these these data messages are something that I carry over from the native ServiceNow kind of client scripts they'll preload the message for you so if you want to see where those are coming from they are doing simple GS get messages for these and I you can you can make your app multilingual simply by going to the system UI messages table and podían whatever is French for saved or published and it will do your language translation for you so that I I have all of these loaded in memory because remember client script is running on the client once you've got your text you can't go back and get more so I was thinking ahead and making my little applet or my widget multilingual friendly yeah that's a good point that's something that's easy to forget to do I mean it's something we drive we really push in the main UI you know use just I get message all your code so yeah doing that in service portal I hadn't seen it done this way so I like it is that the way that we typically do that or do we have any sort of I don't know if there's any examples of that or not I just made it up hey why not you know I wanted to make sure that any time I do an ad info message you in any interface it's it's how am I going to make this multilingual later and if it's on the server you can just output it you know you do your GS dot add error message and in your text parameter you do GS dot get message on the client scripts you can do a get message but this that's that's sort of part and parcel of loading a ServiceNow page in the native environment you get things like G form and G scratchpad and a bunch of these methods that come along for free but I didn't want to assume that in service portal so I just set up a message object that had the keys and value pairs for those messages cool yeah that's that's a good way to do it I'll have to take a note to investigate that a little bit because I'm curious you might be pioneering the best practice of how to do messages and service portal oh gosh Chuck best practices say it ain't so no but at this at this level of maturity in my service portal career that's what I'm stunned by well we won't make comments about that all right the three buttons across the bottom as I mentioned we've got the Refresh we've got the save and I just it still cracks me up how a floppy disk icon still represents save when nobody's got floppy disk icons anymore and I want to tell each one of these for example when I publish a record we're basically gonna do the same thing turn the thing on and turn it off now this one is not an HTTP what did we use before we did a put didn't we it was was it a put or post it was it was a it was a post you're right it was a post I'm looking at my HTTP yeah and it was this is a little different see here we call a method called HTTP GET but before we had dollar HTTP and went right into it and we could specify one of the parameters isn't isn't the first parameter was an object which it says and so these are selected what's your URL what's your headers you I could still do this the other way but I just wanted to show a couple different ways I don't have we we we did some HTTP before but I think most of it was was it around scripted REST API or was it so this is this is sort of a mishmash because later on excuse me not later on you know here's a scripted REST API that does the same thing forgets it's real easy there's there's a certain amount of defaults that happened for this one up here you can see this is the other style I guess I do have them all both on the same widget is you can specify the method the URL to headers which is nice for putting or posting you've got to have a payload and that's where you pass in the data forget it comes back in the response so I don't know maybe I just gravitate towards the shortcut way for it yet it's kind of like the glide record get method rather than do the query query hide query hide query alright right that you can do HTTP does have shortcuts for the other methods as well so you could do an HTTP dot get or I'm sorry maybe not put or not post okay and I think I have seen those I just didn't know which how do you specify and ensure that you're getting the right headers out there where do you where do you put the payload is it is it a third parameter or is it an object that you pass is the second parameter I or maybe it is the first parameter is an object ID I haven't looked this one seems to know just go get me this thing for a get it's pretty straightforward here's a URL riku yeah not much you have to worry about there yeah I remember correctly I think it's there are three parameters to the data modification calls and the first one is always the URL the second one is data and then the third is thing else so basically a a property or a JavaScript object with a representation of all of the configuration things that you might want to do so but I don't think either is wrong I think it's just a matter of what makes the most sense for what you're doing and the you know the the dock get put post they're really just shortcuts makes things a little bit semantically clearer too which is nice okay smarty-pants I turned the spinner on on line 24 where do I turn it off here oh boy so 24 I need a callback no I need the this is where I then would work right yeah so right now you're basically firing and forgetting right so you're not doing anything with it got it so we could do function success I can spell success and my response is gonna be what I get back close it with one of those crazy things all right so that everybody's all happy and paired up then just you an SP you tell since I was setting up those messages whereas I'll use them scope data message saved scene if you do your variables right it almost reads it's almost self documenting and then I'll turn this thing off root scope dollar broadcast show spinner pulse turn it off cuz there's my new callback alright then down here where we do a get do the same thing turn it on make sure we get our boolean set the right way tree you true and then we have a get there's our then that's kind of odd how it formatted it that way interesting [Music] just for glamor sake does it it didn't do anything for me rats huh it didn't I didn't want to autoformat that one the same way so that I think that then was okay up there it was but it was a little hard to read it was getting a little wide on the screen yeah and it looks like I have a tendency to put my dens in there somewhere so that then and then I need to turn it off false because I'm still in the then yeah yeah makes sense yeah and I think I got one more when I publish it up to Google Calendar which I can't test cuz this instance doesn't have all my hot stuff set up right let's do this again let's put that there yep this is the exciting part but I won't put a bump a bump okay turn it on before we go out to HTTP land and turn it off in I really don't care if I hit the if the else if something happened I just want to turn it off before I get out of here seems to be the right thing to do do you do you okay I think we're done very cool I think let's go test it out so you choose a home let's open up one of these things and I'll pick a couple of records Bing Bing Bing not that they mean anything to me I now have three of 35 was Dee selected for Matt oh it was there for a sec did you see it blip it was just so fast yeah maybe refreshing but it didn't turn on immediately and they hesitated then I was it was the duty cycle was like 70% off and 30% on so let's do our save same kind of thing that seems really really and I think it's going so fast I'm coming through the share yeah it's down at the bottom right underneath this floppy disk I can do it again oh yeah just flash on flash off yeah it was it was dirt fast and I'm wondering if you have a delay that is causing it to not come on immediately or no you're you're broadcasting right away so we'll hang on a second so in your dot on method did when you do your time out how long are you waiting good question let's go check widgets was I wonder if it's taking so long to show up that by the time it's actually there half a second yeah this might be the part where we get rid of the timeout and see what happens okay um I gotta refresh that refresh okay Denton Internet yeah that was really fast you know what might make sense it could also be because you're a local instance you've got almost no latency that's true if I if I could published Google it'd probably take a little while longer because it's got to go over the Internet and do it so it's oops well it's other stuff all right one of those problems that you thought you never have it's too fast it's too fast yes the performance is too good but I think we've we've accomplished what we were out for we have a spinner that shows up on multiple pages we broadcast to turn it on and off it lets since this doesn't seem to be actually doing anything what happens if we take this part out give it a try that is one thing that I always you know when you when you use examples of code that's something that I try to understand like what is going on here because this person really know what they were doing right was it a hack did they did they really need to do the thing they stumble across it like idea say okay well it doesn't appear to really be needed for anything refresh its there it's gone here I know let's go do another new page that seemed to take a little while longer because I had to go up to Wikipedia Marie on the 11-12 something like that things did not go well oh we new page pages page save oops I made to do that okay we're on the 11th reload refresh pick a date the 11th oh that looked a little bit better I think that was fine yeah that was a beautiful wig a beautiful spinner any changes that's the spinner anything else we could tweak um so one thing I noticed is that you're calling route scooped up broadcast basically you have almost the same thing in each of your success functions so can you refactor that into a method basically define that method and then pass it in and reuse it so that you only have to define it once you're talking about like this where I've got the same line three times yeah so you're not then so you're basically your success function is really the same thing each time the only difference here I guess is that you are doing a little bit of other processing yeah because then we can get a clearer picture this one this one does throw a message and turn it off this one does a little bit of logic check to say when I said to recreate when I said to create the page output the part that actually generates that inside this box it has do some processing you know how'd you do because the scripted rest API is gonna pass back and okay or 200 or something that says I'm fine or it really didn't go that well I had a problem parsing so that's that logic and then it turns it off this then does something similar when it publishes it to Google it checks the API and it turns it off so I don't know that they can really come out come out it's sort of like yeah yeah I may have used the word save twice we're not gonna gain a lot by encapsulating a one-liner function inside a one-liner function yeah no you're right you're right yeah I didn't realize so much other processing you were doing there so if it was yeah if it was just a matter of hey we're gonna you know all we're doing is a spinner we could basically just exactly a repeat way yeah not this case that makes sense we could yeah we could we could pull that out into its own function and pass a parameter or two and be done with it and make it more generic yeah and I thought about that when I still had the generic HTTP stuff good is this any different than that and it really isn't until you get to the then that it starts to show its true colors for each function yeah got it got it okay now here yeah I could put this is where I'm calling the functions based on the action of the click event so that that seemed like a good way to do it for me and I think I got this from I might have been sushis page on the community that had that example of how to how to click something and make various other widgets interact or pass an action with a parameter so very cool yeah that's fine yeah you know I like where this is going it's a pretty cool app and you know we didn't really focus on the app itself but that's pretty slick if you want a quick demo the app go to my personal YouTube page there's a I think it's called on this day in ServiceNow or something and there's a 93 second video I play it at like developer meetups and snug meetings just to show what people do or what we can do I should stop sharing my screen so that you can be on the screen again that wasn't very nice oh no you know how how we often just take the same stop sharing screen the same process is over and over and over that we've done for years and years and same old same old why are we doing it because that's the way we've always done it bringing it into service now you save yourself a lot of time and headaches yeah absolutely and then put service portal on the front end you can make it beautiful good stuff good stuff so to recap to recap we made widgets talk to each other with broadcast that's a good recap you know it's one of those things where it's surprisingly simple but it's one of those things that is if you don't know how to do it it seems like a daunting task that's exactly it it's like I know what I want to do but I don't know how to do it and and it's a lot of research to go and find those things to to stitch them together because you'll find it again a lot of the reference material on the Internet is pure angularjs centric mm-hmm you know you've got your controllers the easy to worry about in your bindings in like we don't have to worry about a lot of that stuff in service portal but the the philosophies are still there so it's kind of tying the two together good stuff good stuff well let's go ahead you know the beer is delicious the the snaggletooth bandana I actually give it a solid four stars which is good for me how's the happiness it's hoppy it's I don't know if you use our on this but it's um it's up there this is a good one it's this is a very it says ale but it it's it's got that nice mild ale taste not a lot of hops as most belgian wheat and inspired we Belgian inspired wheat ale so I mean it's very smooth doesn't grab your tonsils and shake them around but I am noticing like a really good belgian wheat ale there's some sediment on the bottom of my cup there yeah that's it that's the sign the flavor lives or something you know I think one of the first times I had a blue moon that sat in the fridge for a little too long and I try to figure out what in the world is going on here and then I realized it's not filtered but that was an interesting wake-up call exactly any other comment in here you you you can still do that as the second parameter okay we're those are old comments I was just real quickly reviewing the comments to see if there was anything we missed yeah I think we're good so yeah this has been one of the more smooth happy hours that we've had aside from our little blips at the beginning but I mean from a Content standpoint we just powered through that yeah we made up for lost time good to go we did we did so well thank you everyone for joining this week and if you have any questions you can always reach us through very many avenues whether it's the community or Twitter or send us an email it's not hard to figure out our email addresses and I'm always happy to help have a good weekend have a good weekend hope to see Dave you're back are we are we thinking about doing on next weekend next week next Friday the 10th uh you know I Dave will be out because I know he will be on his way back but if you're up for it Chuck I certainly am and actually I've got stuff to talk about with OAuth that I learned I always talk about a lot on here but there's there's a whole new category of things and and let's do it probably yeah let's do it well we'll plan on what we'll plan on having another wot session both part three talk about using OAuth initiate or not do I should be back and I should be recovered I've got the Portland the what is it the the Northwest Northwest Territory some there's a snug on the ninth in Portland that I'll be but I should be I know I'm coming back really stupid late that night should be fully recovered by live coding happy hour about 15 hours later good thank you cool cool well I look forward to it till then yep figure yeah

Channel: ServiceNow Dev Program

Views: 2,807

Rating: 5 out of 5

Keywords: ServiceNow, Service Portal, AngularJS, lchh, live coding happy hour

Id: Wcz0PixUneQ

Length: 59min 17sec (3557 seconds)

Published: Fri Mar 03 2017