ServiceNow CAD – GlideForm & GlideUser

1. GlideForm Introduction

Hello, and welcome to section six, glideform and glide. User. We’re finally halfway through the course, and this will be a great section because we’ll discuss not one, but two client side APIs glide form and Glide user. So this section’s outline is as follows. I’ll provide an introduction to Glideform form, and we’ll do a show me the code section. We’ll talk about the client side environment, and we’ll discuss the Glide form API diagram. Then we’ll take a look at some common glide form methods and do a glide form demo. After that, we’ll jump back into the slides where we’ll do a Glide user introduction and show me the code section for Glide user.

Then we’ll cover the Glide User API diagram and go over the Glide user methods and end with a Glide user demo and a section recap. So what is the glide form? API. Well, as stated in the ServiceNow docs, the Glide Form API provides methods to customize forms. The global object G underscore form is used to access glide form methods. Glide form methods are only used on the client. These methods are used to make custom changes to the form view of records. So there are three important takeaways from this. One is its client side, so we cannot use this on the server side.

Two, we use Glide form to make changes to the form and the fields on the form. And three, we reference this API by using G underscore form. All right, now let’s take a look at the Show me the code slide. So in this example, we want to set short description to mandatory when priority changes. It’s important to note here that we could accomplish this by using a UI policy. But for the purposes of this demo, I wanted to use the G four set mandatory method instead. So here in the first image, we can actually see in the client script, we have a type of on change, and the field name is priority.

So whenever the priority field changes, it’s going to execute the following code. So on line five, we have our G form API, where we’re accessing the set mandatory method, which takes in two arguments, the first being the field value. So short description and the second argument being a boolean. We want to set this to mandatory. So we’ll pass in true.

So with one line of code, we can see just how easy it is to, in this example, make a field mandatory. All right, now let’s talk a little bit about the client side environment. So client side means it’s running inside of your browser. So all of the code is already shipped to your browser. In client side scripts, we have access to client side APIs where most of these are actually accessible via the global JavaScript scope. Within ServiceNow, you can press CTRL Shift J to open up the client side JavaScript executor.

Whatever code you type into here will be ran on the client side. This is kind of similar to background scripts where we run server sided code, but in this case it’s client side code. Finally, since we’re on the client side within our scripts, we can always debug to the browser using something like the browser’s console log method or a console dur method. I would like to point out that it is best practice to avoid manipulating the Dom directly in ServiceNow within something like a client script or UI action, and it’s recommended instead to use the G form API. Now let’s take a quick look at the Glide form API overview. So here we can see we have the Glide form API and on the left we have the form and fields properties, and on the right we have a number of methods such as get value, set value add, error message add, info message and so on. But in the next few videos we’ll take a deeper look at what these methods actually do. You.

2. Common GlideForm Methods

Hello and welcome back. Now let’s take a look at some of the common glide form methods. So we have add error message and add info message and you might be asking yourself well we’ve already seen this in Glide system but as it turns out that’s actually on the server side and these are on the client side. So Glide form gives us a way to add error and info messages on the client side as well. We also have the ability to add new options to a choice list on the form or even clear out those options. Clear value is a common method for wanting to perform some type of logic and if true or even if false, we would like to clear a value from a field. We also have disable attachments and enable attachments methods which do just that. We can also get the label of a field using the get label of method. If we have a choice field we can get the option of the currently selected choice using the Git option method. We also have a Git reference method which is an interesting method that we’ll take a deeper look at here in a few slides.

We have a hide related lists method which does just that, it will hide the related lists found at the bottom of a form. We have an is mandatory method which will check if a field is mandatory or not. We have a remove option method which will remove options from a choice field and then we have Set disabled Set Read Only and Set visible methods which will set fields to disabled read only or whether they show on the form or not.

 And finally we have a set value method which will set a new value to a given field. All right, so let’s go over probably two of the most common methods to glide form the get value and set value methods. So these are essentially getter and setter methods for just about any field on a given form. Gitvalue accepts the field name as an argument and will return to us that value within that field and Set value accepts the field name that we want to set a new value to and second the new value as an argument.

So here on the left we have some code and on the right we have a snippet from the incident form. So on line one we have VAR category equals g underscore form getValue and we’re passing in the field name category which will return to us the value of the currently selected category selection which is Inquiry help so that will actually be assigned to the category variable. Then on line three we create a variable new category and assign that to software. And then finally on line four we use the set value method where we pass in category for the field and then the variable new category which is actually Software. So this would update our category field on the incident form to software. All right, now let’s look at the get reference method. There’s only so much data that is shipped to the client from the server. So on the client side you can say that we’re kind of limited to the data we have available to us without making another request to the server. It turns out when we’re on a form view of a record, the server only sends us on the client side any field that’s directly related with this record.

So for example, if the incident form has a reference to another record, maybe the location record, we don’t actually have that location records data available to us on the client side. We would need to make another request to the server if we wanted to grab a field on that related record. Well, it turns out that that’s what get reference does and it does so by using JavaScript callbacks. So say we’re on the incident record and all of the fields that relate to this specific incident have been sent to us from the server. However, we want to access fields on the incidents caller user record. So we could do this by using the get reference method. So let’s take a look at an example.

On the left here we have our client, and on the right we have our server. So when we go to a specific incidents form view, all of the incident fields are sent to us on the client as well as this client side code. So on line one here, we can see we’re using the G form get reference method where we’re passing in the field of the referenced record as well as a caller callback. So this caller callback is a callback function that will actually be invoked once the server returns our response to us on the client side.

So when this code is executed, then the client would make a request to the server where it would ask for the caller’s user record. The server would then package that up in a response where it would send it back to the client. And once the client received that, the client would invoke the caller callback function. And then line three would run where we set the description of the incident to a value of the caller’s first name plus a space, plus the caller’s last name, plus the text says hello.

3. Demo: GlideForm

Hello and welcome back. In this video, we’ll jump into service now and show off the Glide form API. So one of the cool things about client side APIs, or more specifically JavaScript that’s sent to the browser, is that we can actually inspect this and get a firsthand look at the API itself. So we can actually log the API to the browser’s console, in this case, Firefox’s Web Console. So we can type Console Dir and then pass in the argument of the name of the API, which is g underscore form. So when we do this, we can see a nice list of all of the properties associated with this API. That’s one of the benefits of using the Dir method over the log method. So I’m sure you’re familiar with something like Console log for clientside scripts. Well, if you use the Dir, it formats it in an easier way to read. So now we have the entire G form API exposed to us. We can see that there are a number of properties associated with this. For example, if we go to the Elements property, we can see that this is an array with 29 items. And if we go into one of these items, which is actually an object, we can see that these are the actual fields on the form, and each field has properties themselves.

So this kind of exposes to us how ServiceNow is working behind the scenes on the client side. To get a deeper understanding, I recommend trying this on your own and just kind of going through all of the properties associated with these and play around with them. All right, now let’s take a look at the JavaScript executor. So on a Mac, if you hold down Control Shift J, the JavaScript executor will appear within ServiceNow. This is where we can run client side code and leverage ServiceNow’s client side APIs. So let’s start things off by using the Get value method on the G form API. So let’s bring up our text editor and create a new variable field value.

And we’ll actually call the get value on the category field. So what this will do is actually pull the current value of category on the form and assign that to our variable field value. And then on line two, we’ll just do a simple alert and we’ll put in the field value variable. So if we copy and paste this in the JavaScript executor, we can see that we get a client side pop up of hardware because that is the current selection of the category field. So now let’s take a look at set value. So for this example, let’s say we want to set the category field to software.

So we’ll use the Gform set value method. The first argument is the name of the field, and then the second argument is the value that we would like to set that field to. So we’ll copy and paste that code, run it and we can see that the category changed to software. Now let’s take a look at the clear value method. So let’s say we just want to clear the category field. So we’ll just do Gform ClearValue and we’ll pass in the field name of category.

We’ll copy and paste that in and we can see that the category is then set to none. Now let’s take a look at the save method. So the save method just simply saves the current record. So we’ll just do Gform save and we’ll copy and paste that and click run my code and we can see that the screen actually refreshes since this record has in fact been saved. Now let’s look at the set disabled method.

So this method takes two arguments. The first being the name of the field we would like to set to disabled and the second argument is Boolean true or false whether we would like to set it to disabled which would be true or not disabled which would be false. So because we want to set this field to disabled, we’ll go ahead and pass in true, we’ll copy that code and run it and you can see that category is now set to disable. We’ll go ahead and re enable it. So we’ll pass in false, copy that, paste it and we can see it has been reenabled.

Now let’s quickly take a look at the hide related lists method. So what this will do is simply hide the related lists found at the bottom of a form view. So if we run this we can see that there are no longer related lists at the bottom of this form. Now let’s take a look at the is mandatory method. So this method will return true or false depending on if the current field is set to mandatory. So we’ll pass in category here and we can see that it is not mandatory. All right, so let’s insert a new line above this and set it to mandatory. So we’ll use the set mandatory method and pass in category. And the second argument of true since we want to set this to mandatory. And now we can expect to see true in the alert box since it has been set to mandatory.

So go ahead and copy and paste that code and we can see here that it is true. And more importantly on the form we have the red asterisk representing that this field is in fact mandatory. Now let’s take a look at the is new record method. So this returns a Boolean value whether if the current record on the form is a new record or not. So for this we’ll just do an alert with some text is this a new record? And then pass in the value assigned to is new record.

So if we copy and paste that code we can see that that is in fact false. Now let’s take a look at the G form add info message and add error message. This is similar to the Glide system add error message and add info message methods. But this is actually happening on the client side with G form. So we’ll log some info text and some error text and then we can clear those messages with the clear messages method.

All right, now let’s take a look at the get label of method. So this method takes the name of the field and returns us the field label. So for this example, we’ll go ahead and pass in the field name of category and we should get category with a capital C back. Since that is the label of the field, let’s try a different field name such as Caller ID. In this case, the field name is Caller ID. However, the field label what the actual user sees is just Caller. So we’ll pass in Caller ID and we should just get back caller here. All right, and we’ll end this video by taking a look at the Git table name method. So for this, we’ll go ahead and create a new variable table name and we’ll assign it the value given to us from Gittable name and we’ll just do a simple alert. And we can see here that if we copy and paste it, we get incident as the table name. So we’re able to retrieve the name of the table we’re currently on from the client side.