ServiceNow CAD – GlideAjax

1. GlideAjax Introduction

Hello and welcome to section seven, where we’ll be talking about the Glide Ajax API. All right, we have a lot to cover in this section, so we’ll start off with a Glide Ajax introduction. Then we’ll cover what Ajax is in the industry, and we’ll talk about synchronous versus asynchronous. And then we’ll talk about the stages of Glide Ajax, followed by an example showing the Glide Ajax process. After we have the foundation set, then we’ll actually jump into the show me the code slide, where we’ll go over an example. After that, we’ll actually revisit script includes and discuss the role they play with Glide Ajax.

Then we’ll briefly cover the JavaScript callback and talk about how it’s used with Glide Ajax. Next, we’ll go over the difference between JSON and XML and discuss some of the pros and cons. Then we’ll do a Glide Ajax API overview along with its methods. And then we’ll finally jump into a demo where I’ll demo three separate Glide Ajax examples. And then we’ll end this section with a section recap. Okay, so the ServiceNow docs state the Glide Ajax class enables a client script to call server side. Code in a script include. Sounds easy enough, but it turns out this is more complex than some of the other scripting examples we’ve seen.

Okay, so the Glide Ajax API itself is a client side API, but it’s actually used to call server side script includes. So there are client side and server side components to this process. It’s similar to something like Jquery’s Ajax method. If you’re familiar with Jquery, ajax stands for asynchronous JavaScript and XML. It was popularized by Google in Google Maps and Gmail, and it’s a way to make client side requests to the server side without requiring a page reload. So there’s actually a browser API, the XML Http request, that is used to make Ajax calls. And it turns out that behind the scenes, glide Ajax is actually calling this browser API to make the request.

But there’s a layer of abstraction, so we don’t have to worry about that. We just interact with glide. Ajax. So there’s actually synchronous and Asynchronous requests, and hopefully this slide will help to shed some light on these topics. All right, so let’s take a look at what these words mean in the world of web applications. So we’ll start on the left hand side with synchronous, and the left vertical line represents the client, and then the vertical line on the right represents the server. And in this diagram, we’re going to be looking at requests from the client and responses to the server.

So in a synchronous environment, when the client sends a request to the server and then is waiting for the response, the client is actually blocked. So it must wait for the response before it can start processing other events. So in this example, we can see that when the request is sent out, the client is blocked until it receives the response back from the server. So within a synchronous environment, we can see that the client or the browser is actually blocked, so it’s unable to process events until it receives this response from the server. This is still a problem and fundamentally bad practice to build a web application in this nature because we’re never truly sure of how long the response is going to take from the server. So if we were to travel back in time to the late 90s, this response could take seconds, possibly even minutes to return. And in that amount of time, the client side will be completely blocked. So it’ll essentially be frozen until it receives this response. Well, that’s where Ajax comes into play with the Asynchronous component. So now let’s take a look at the Asynchronous side.

So on the right, we can see that when the client sends the request that it is not blocked. And in fact, we can even make another request because we’re not blocked. We can still compute, we can still process things. So you can see here in this diagram that the client has actually made two requests without even receiving the first response yet. So we can say Asynchronous is non blocking, and this is exactly what we want in modern day applications. All right, next let’s look at the three stages of Glide Ajax.

So in the first stage, the client side code calls the Glide Ajax API, which behind the scenes is making an XML Http request to the server. So this stage is triggered by some type of event usually found in client scripts, such as an onload, or when a field value changes, then the code that contains the Glide Ajax API is executed. So the second stage starts once the server receives this request from the client. So in the second stage, the server side code processes the request and returns a response back to the client. So then in the third stage, client side code processes the response. So we have to tell the browser what to do with the response from the server.

So whether we’re updating a field or doing some other type of event, we have to tell the browser what’s going to happen once this request has been received. So we can see in the stages it kind of goes from the client to the server back to the client. And at each stage we need to explicitly tell the browser and the server what we want to do. All right.

And finally, let’s look at the two scripting locations to Glide Ajax. So, as I’ve mentioned before, even though the Glide Ajax API is a client side API, we are still accessing server side code. So there are in fact two scripting locations. So the first, obviously, is the client side code, which contains the Glide Ajax API and methods. These are oftentimes stored in either client scripts or UI pages. And we have an example here at the bottom on the left of a UI pages client script. And then on the right, we have our server side code. The server side code is stored in a script. Include and on the bottom right, we have an image of a script include.

2. GlideAjax Example

Hello and welcome back. In this video, we’ll take a look at an example of the Glide Ajax process from start to finish. So, for the purposes of this example, we’ll say that when we’re on a task record, such as an incident after the form loads, we would like to make an Ajax request to the server side, updating the location of the current user, leveraging the browser’s geolocation API. So again, once the page loads, the browser will pull in the current user’s location and make a request in the background via Glide Ajax to the server side to save that to the record. All right, so here on the first slide, we have our client on the left and we have our server on the right. So in step one, the client makes a request for a page that contains a client script with the Glad Ajax code.

So in this diagram, the client is requesting a task form. So in step two, we can see that the server processes the request from the client and sends the client the task form data along with the client script.

In step three, after the onload event occurs, the client side script is executed, which calls the Glide Ajax API. Then in step four, the Glide Ajax API accesses the browser’s XML Http request API and generates a request. In step five, the browser’s XML Http request API sends the geolocation data back to ServiceNow in the background so the user does not need to be redirected to another page. It’s all happening in the background. In step six, the request from the client invokes a script include on the server side where request data is used to call specific methods with arguments. Then, if this specific script include is sending any data back to the client, it will then be packaged up in the form of a response. So here in step seven, the browser receives a response from the server side. And finally, in step eight, the client script callback processes the return data from the server and updates the location field on the task.

3. GlideAjax Stages

Hello and welcome back. In this video we’ll finally take a look at some Glide Ajax code and then walk through the stages of glide Ajax. So in this example we would like to update the short description field of an incident to hello world once the page has loaded. So although it’s not a very practical example simple, I tried to keep the initial one simple so we can understand what’s going on. So here we have a client script on the incident table that’s executed on load. And then on the right we have our server side code which is the script include. So again we start things off on the client side once a specific event is triggered. So in this case the onload event would trigger the execution of this script. So on line three we create a new object which will hold the value returned to us from the Glide Ajax API. And when we call the Glide Ajax API we pass in the name of the script include that we’re looking to run. So in this case we pass in the string name ServiceNow 201 glide Ajax which again is the name of the script include. In ServiceNow this must be the exact same. Now on line four we have ga add param. So we’re adding a parameter to the Glide Ajax request.

So we have the first argument which is the name of our parameter sysparm name. And then the second argument is the name of the first function or method we would like to call, in this case say hello. So the first two lines instruct our code to execute the Say Hello method found within the ServiceNow 201 glide Ajax script include. Then on line five we have ga gitxml where we pass in the name of our callback function Ajax processor. It’s important to note here that we’re just passing in the name of the function. We’re not actually invoking the function with parentheses at the end. So line five is what actually triggers the Ajax request. So now the request will be sent to the server where the Say Hello method is invoked. And finally we get to a return statement where we just simply return the text hello world. Once service now sees a return statement in the script include, it will automatically package up the result and send it back to the client side in XML format.

So once this comes back to the client side, our Ajax processor callback function is invoked where we pass in the response as an argument. So on line nine we create a new variable answer and we assign it the value returned to us from response response XML documentelement get attribute answer. So what that’s doing is actually stepping through the XML of the returned result and our hello world is stored within an answer XML node. So that’s getting the attribute of answer and assigning that to our JavaScript variable answer. And then on line ten we’re using the g four set value method where we’re setting our answer to the short description field. All right, so I know that was a lot to take in, so let’s spend the rest of this video taking a deeper look at the three stages of Glide Ajax. All right, so it all starts with Glide Ajax and I have a circle with the number one in the top right corner showing that this slide relates to the first stage of Glide Ajax. So we’re on the client side and some event is about to happen where we create our Glide Ajax object.

So in this example, the onload event is what triggers our Glide Ajax code to run. So first we create a new Glide Ajax object. Second, we add the name of the script include method as the sysparam underscore name parameter. And third, we call the get XML method and pass the name of the callback as an argument. It’s important to note that we can pass as many parameters to our script include as we would like, as long as they start with the name sysparm underscore. So we could have sysparm underscore first name, sysparm underscore last name, et cetera. However, the sysparm underscore name is specifically what the system looks for to invoke the first method. So the sysparm name parameter will always be the name of the method we would like to first call and the script include.

And as stated before on line five, we pass the name of the callback Ajax processor as opposed to invoking the function, which would be Ajax processor parentheses. All right, so once that get XML method is called, the browser sends the actual Ajax request to the server, ending stage one and starting stage two, where we find ourselves on the server side. So we talked about script includes earlier in this course, but let’s revisit them. So again, script includes run on the server side and they contain reusable snippets of code, making them very modular. If you find yourself writing the same functions again and again, consider putting them in a script include and invoking the script include from another source. It’s important to note that script includes are only executed when invoked from another source.

So in this case, client side using Glide Ajax or on the server side using the new JavaScript operator. We’ll take a closer look at this in the next section. Script includes may also extend other JavaScript classes which can be very powerful when building more complex applications. And in the next slide, we’ll take a look at how Glide Ajax actually leverages this inheritance. So when script includes are used for Glide Ajax, we must have the client callable checkbox set to true. What this does is actually modifies the JavaScript in our script and it will automatically extend the abstract Ajax processor class which we’ll go over in the next slide.

So script includes that are called from Glide Ajax typically query a table and return a record or set of records back to the client side as JSON where then it is then processed and rendered on the client Glide Ajax. Script includes have access to any variable from the client side that starts with the sysparm underscore. And again the sysparm underscore name is used to invoke the first method in the script include all right, so let’s quickly discuss extending the abstract Ajax processor. Again, we’re still on the server side and script includes. So we’re still in stage two. So abstract Ajax processor is actually an out of the box script include and you can find it in any instance. This provides helper methods that we actually use when working with the Glide Ajax API.

Again, we can see that the client callable field is checked. So if we take a closer look at the code found in the Show me the code slide on line two, we can see here that we have our newly created class ServiceNow 201 Glide Ajax and we’re actually extending the abstract Ajax processor. So we do ServiceNow 201 Glide Ajax prototype equals object, extends object where we pass in abstract Ajax processor and then as of the second parameter we pass in our script and the script include so now we can leverage all of the methods found in the abstract Ajax processor within our extended service. Now 201 Glide Ajax script include all right, so while we’re still in stage two, let’s quickly walk through the Glide Ajax script include process. So first the method passed in sysparm name gets invoked, the server side scripts are ran and then we come to a return statement which ends the server side script execution. And then service now packages up our response in XML and actually sends it back to the client. Once service now sends the response to the client.

Stage two is done and now we get to the last stage, stage three. So let’s take a deeper look at this return to payload. So as I’ve stated before, it is XML. So even if we encode an object in JSON on the server side, it still gets wrapped in XML and sent as a response. Then on the client side we use the following to retrieve the answer value found in the answer node which is Response XML document element distribute where we pass in the string argument of answer. And here we can see a snippet from the Chrome developer tools where I’m actually inspecting the network traffic. And we can see here the raw XML that is actually returned to us from the server so we can see our answer node. Hello world. And here is the full XML payload. All right, so now let’s quickly discuss the JavaScript callback. So a callback is a function that is passed as an argument which is then executed at a later time. Callbacks can be a little tricky to completely understand and unfortunately they’re out of the scope of this course. But if you would like to learn more about them, I highly recommend checking out the article found in the Dive Deeper Notification below. The only thing you need to know is that once the client receives the response from the server, this callback function is invoked.

So stage three starts when the client receives the response from the server, it’ll automatically call our Ajax processor function, where we can then process the response with any client side code. Again, in this case, we’re simply setting the short description to the answer value. All right, now let’s take a look at the two ways to transfer data between the client and server. So the first is JSON. It’s JavaScript object notation. JSON is very easy and fast to parse and uses collections of key value pairs with support for arrays. XML stands for Extensible Markup Language and uses nodes and node attributes, but can be a bit of a pain to parse. If you’d like to learn more about the differences, I recommend checking out the YouTube video and the Dive Deeper notification below. So here’s a quick comparison of XML to JSON. So here we have a collection of three incidents.

We can see that the XML looks very similar to HTML. It turns out HTML is actually a subset of XML. So we have the opening and closing tags for each node. Now on the right we have the JSON, which although it’s a couple of lines longer, actually contains less characters. And we can see that we can leverage a raise. All right, now let’s quickly take a look at the get XML answer method. So this is actually a shortcut to the get XML method and the response response XML documentelement get attribute answer. So if we use this method in place of the get XML, so on line four we’re calling ga get XML answer, then passing in the callback function, we don’t actually have to use this long response XML, et cetera. The API actually does that for us and then just simply passes that answer value to us as opposed to the full response value.

So we can comment line eight out and simply go gform set value short description and then the answer which is passed in as an argument. All right, so although the Glide Ajax API is fairly complex and there’s a lot going on behind the scenes, the actual API is fairly simple and straightforward. We have three main methods exposed to us the add param where we’re adding parameters to the request, the get XML and then the shorthanded git XML answer methods which actually trigger or initiate the request to the server.