ServiceNow CAD – GlideAjax Part 2

4. GlideAjax – Demo 1

Hello and welcome back. In this video, we’ll take a look at three Glide Ajax examples within ServiceNow. So we’ll start nice and simple by using Glide Ajax on an incident form. So we’ll say when an incident form loads, we would like Glide Ajax to reach out to the server, grab a string value from a script include in this case hello, world and send it back to us when we receive it on the client side, we’ll update the short description of the current incident. All right, so let’s get started. So we’ll start by creating the script include first that will house our methods for this video.

So we’ll navigate to script includes and click new, and we’ll give the script include a name ServiceNow 201 Glide Ajax. Now, this name is important because we’ll use this when we reference our script include in the Glide Ajax script. Now, when I leave the name field, you can see that the script field auto populates with some JavaScript. And then in addition to that, when I click the client callable, which allows the script include to be called from the client side, which is exactly what we want for our Glide Ajax.

Some additional JavaScript is populated in the script field. So now we can see that on line one, we have our ServiceNow 201 Glide Ajax class created. And then on line two, it’s actually extending the out of the box abstract Ajax processor script include. So you can see our script include is extending the functionality from another script include. This is why script includes can be so powerful because they’re modular. All right, and now it’s time to write our method. So our first method name will just be simply say hello. So we’ll write say hello, semicolon and note that it’s a semicolon instead of an equal sign, because this is actually a property in a JavaScript object. Then we’ll provide the function keyword, and then we’ll simply return hello world.

So when this method gets called and executes, all it’s going to do is return the text hello, world back to whatever called it, in this case, the Glide Ajax client script. All right, so we’ll simply submit it and we’ll go ahead and copy the name so we can paste this in the client script we’re about to create. So now we’ll navigate to the incidence table and click the configure client scripts, where it will create a brand new client script to house our Glide HX JavaScript. So we’ll provide a name and we’ll say we want this to run on load. Now, when we select unload, you can also see that some JavaScript is generated for us, just a simple function on load, which will get called once ServiceNow has loaded and rendered all of the resources required for this specific page.

So we’ll just go ahead and copy that JavaScript and paste it in our text editor. And now we’ll write our glide. Ajax JavaScript. So on line three, we’ll create a new variable ga and we’ll initialize our Glide Ajax API. So we’ll do new Glide Ajax and then we will type in the name of our script include ServiceNow 201 Glide Ajax. Now on line four we’ll add the name of the method we want to call. So we’ll do ga addperingham. And then we’ll pass in the keyword sysparm underscore name which again this is the name of the first method we’d like to call. We’ll provide say hello. And then on line five we’ll do ga get XML and we’ll pass in the name of our callback function.

And then we’ll create this callback function. So on line eight we’ll do function Ajax processor and we’ll have response passed in as an argument. And then on line nine we’ll grab the answer from the response. So we’ll do response XML document element get attribute answer. And now we’ll simply update the incidents short description field with our Hello World text. All right, so we’ll copy and paste that in the script field and we’ll go ahead and submit this.

Now we’ll navigate back to the incidents and when we go into a specific incident, we’ll see that the short description field in fact gets overwritten by our Hello World text. We’ll go ahead and reload the form again and we can see that initially the short description appears, then the Glide Ajax JavaScript gets executed and then the request is sent to the server.

The server processes that sends us a response where the Hello World text is updated. So now we’ll take a look at this packet within the Mozilla Developer tools under the network tab. So if we click on XHR, we’ll filter all XML responses and we’ll go ahead and reload the ServiceNow form. And we’re looking for an XML Http do file.

Alright, so this one looks to be it. We can see that the sysparm processor is ServiceNow 201 Glide Ajax and if we go to the response tab we can see the actual XML. So we can see that the answer node contains the Hello World text. Pretty cool. Now we’ll go ahead and deactivate that client script so it no longer loads. Okay, now let’s take a look at the second Glide Ajax example. So in this example we’ll use a UI page where we’ll write our glide age code and then we’ll leverage the same script include as before, just providing a new method that will be called.

So in this example we would like to log the status of a specific incident every 5 seconds to the browser’s console using the UI page. So we’ll start by adding the new method to our script include. So we’ll navigate back to our script include and we’ll jump back into our text editor and we’ll create a new method get incident status. So here on line five we’ll get the incident number passed to us by using this get parameter and then the name of the parameter in this case sysparm underscore Incident underscore Number.

So then we’ll do a simple check. So we’ll say if the Incident number is not null, then we’d like to continue. So on line seven we’ll do a glide record query where we’ll get the Incident with the number that was passed to us. So here we’ll simply return the Incident state. If the number was null, we’ll simply return a message no Incident was found.

All right, so we’ll copy and paste that new method into our script field. We’ll go ahead and save that. And now it’s time to create the UI page. So we’ll navigate to UI pages, click New and provide a name. And since we’re logging the state to the console, we don’t actually need the HTML field. But for the purposes of this example, we’ll just go ahead and put in example two in an h one tag. And now we’ll jump to the client script section.

So in order to get this Glide Ajax code to execute every 5 seconds, we’ll leverage the browser set interval method, which takes two arguments. The first argument is an anonymous function, which is where we place the code we would like to run. And then the second argument is the time in milliseconds. So we’ll put it in 5000 for 5 seconds. And then we’ll create the function Process Request. So within the Process Request function we’ll initialize our glide HX. So we’ll pass in the name, we’ll add the parameter for the method name, in this case get Incident Status. And then we’ll pass in another parameter, the sysparm Incident Number. So we’ll quickly grab an Incident Number and we’ll go ahead and paste that in. So nothing fancy, we’re just hard coding an Incident Number.

And then on line nine we’ll do Ga get XML, we’ll provide the Callback Ajax processor, and then we’ll create the callback function. We’ll grab the answer from the XML node, and then we’ll simply log the status to the console. All right, we’ll save this. We’ll open up the console and we’ll click try it. All right, so now we see that we’re getting the state of active. So if I bring up another window with that Incident and change the state to New and save that, we can see that we’re now getting the new status. And real quick we’ll inspect the package again and we can see that the answer is the state of the Incident. In this case, new. Note that you should never use something like this in a production instant. This code is just for demo purposes. ServiceNow provides other APIs that are much more efficient than using the browser’s set interval function.

5. GlideAjax – Demo 2

Hello and welcome back. In this video we’ll take a look at our third and last example of Glide Ajax. In this example we’ll use another UI page and we’ll grab a number of incidents and we’ll print those to the console. So to start with we’ll add new method to our script include and we’ll call this Get Latest Incidents. So on line 16 we’ll create a new variable incidence and we’ll assign this as an array which will hold our incidents. Then on line 17 we’ll create a new variable limit and we’ll actually grab a limit passed to us from the client which we’ll use in a set limit method for Glide record. So because this will be passed as a string, we’ll have to use the JavaScript parse and function which will parse this string into an integer. So on line 18 we’ll do a simple check. We’ll make sure that there is in fact a limit and that the type of this limit equals a number. Then we’ll start our Glide record script. We’ll order by syscreated on and then we’ll set the limit to the limit passed to us. And then we’ll query this. So on line 24 I’m creating a new variable record which is just now a blank object.

And then on lines 25 through 27 I’m creating properties on this object number, SysID and short description and I’m setting those values to the incident values. Finally on line 28 I’m pushing this object to our incidents array. And then after that loop is executed, I’m returning the array. But first I’m actually going to encode this into JSON. So one of the ways to do this is to use the JSON API and ServiceNow. So we’ll just do new JSON encode and we’ll pass in our array incidents. So ServiceNow will automatically encode our incidence array into JSON and return that back to the client. All right, so we’ll copy and paste that code and now we’ll create our UI page. So we’ll provide example three and an H one tag and then we’ll write our client script. So we’ll initialize our glide. Ajax API.

We’ll call the Get Latest Incidents method and we’ll pass in a value of five for our limit. So this should pull the five latest incidents. Next we’ll add our Get XML method passing in our Ajax processor callback. Then we’ll create our Ajax processor method passing in the response. We’ll go ahead and log the response to the console and then grab the answer from the response using response XML document element git attribute answer. Then we’ll go ahead and log the answer. And finally we’ll parse the JSON. So we’ll create a new variable JSON and we’ll assign that the value from answer eval JSON. We’ll go ahead and log this. And then on line twelve we’ll go ahead and log the short description of the first incident within the JSON by doing JSON zero index short description. We’ll go ahead and save this click, try it, open the console and we can see that.

We get a number of things back to us. So first is the response payload the object XML Http request. And then we have our answer, which is currently a string representing the JSON. And then we parse the JSON. So then we have five objects. And then finally we’ve logged the first incident short description. Incident number five we’ll switch over to the network tab, find the XML Http do file, go to the response, and we can see the raw XML.

6. Section Recap

Hello and welcome to the last video in section seven where we’ll do a quick section recap. So where can we use Glide Ajax? Well, we just saw that we can use the Glide Ajax API on the client side. However, there’s multiple components involved in Glide Ajax where we call script includes on the server side as well. So whenever we want to use Glide Ajax, we’re actually using components from the client side using Glide Ajax API and callback functions as well as server side code which is stored in script includes. As a developer, we use the Glide Ajax API when we’d like to access server side data while on the client side.

So for example, if we’re on a catalog item and the user populates a certain field, maybe we would like to take that field and grab a value from the server side and populate another field on the form without the user having to be redirected somewhere else. We want this to happen in the background. Clyde ajax is available to us within any client side scripting location. We use script includes to store the server side code. We’d like to run with Glide Ajax by default.

And at the recording of this video, XML is returned by the Glide Ajax API. We use APIs to encode and decode the JSON. These can either be service now APIs like what we see on the server side, or even browser APIs. If we want to parse JSON within the client side code, we can actually call the browser’s parse method.