What is Client Script in ServiceNow? Types, Examples & Use Cases

Ever wondered how your ServiceNow form field suddenly turns mandatory, shows a warning, or appears with one field value you add or remove? It is no magic; it is all Client Scripts. 

Client scripts in ServiceNow are used to make forms more responsive by increasing page reloads and helping admins get their forms field and validated in a proper manner. 

In this blog, we will focus on what client scripts are, how they are used, their types, what catalog client scripts are, and how client scripts are called in different scenarios. 

What are Client Scripts?

Client Scripts in ServiceNow are JavaScripts that run on the client side instead of the server side. These are used by admins and developers when a form needs to react to the user in real time for viewing, changing, or editing the form. 

A client script in Servicenow can can configure forms, form fields, and field value, along with: 

• Hiding and Viewing fields.
• Making fields read-only or writable. 
• Making fields optional or mandatory as per user role. 
• Set the value in one field as per the values in other fields. 
• Edit the options in the choice list based on user role. 
• Show messages based on a field value. 

Types of Client Scripts in ServiceNow

ServiceNow supports 4 different types of Client Scripts attached to the different trigger events in the form. 

onLoad ()

These scripts run when a form is open and before the user can enter any data or make any interactions. They are used to: 

• Add default values
• Hide or show fields as per the record table. 
• Show informational messages. 

onChange ()

The change client scripts run when a field value is changed in the form. onChange Script is ideal for: 

• Making mandatory fields based on the value of another field. 
• Auto-filling related fields. 
• Validating fields in real time when the user selects. 

onSubmit ()

It runs when the user tries to submit the form. The onSubmit client script in servicenow is your last checkpoint before data leaves the browser. It is used mainly for: 

• Blocking/ Cancelling the false submissions makes it easier to validate at last. 

onCellEdit ()

It runs when a value is changed in a list. It is not used frequently and is mainly aligned for inline list validations.

Catalog Client Scripts ServiceNow 

The catalog client scripts are similar to standard clients, but they are created specifically for Service Catalog Items, record producers, and variable sets.

Catalog scripts differ from standard client scripts due to the following: 

• Scope: Catalog scripts are attached directly to the specific catalog item rather than to a table. 
• onChange target variable, not field: In an onChange catalog Client script, a variable is picked from the catalog item, and only defined variables show up as options. 
• Data Type: Sometimes, in catalog scripts, the passed newValue and oldValue are objects and not plain strings.

How to call server-side from client script in ServiceNow? 

As an admin or developer, you can have server-side logic trigger client script behaviour to act on it. To call server-side from client scripts step by step:

Step 1: Create the Server-Side (Script Include) First

Always create the server-side logic first, so it is ready to receive data. In the ServiceNow Navigator, search for Script Includes and click New.

Check the box that says Client callable (mandatory).

The code used:

var UserDataUtils = Class.create();

UserDataUtils.prototype = Object.extendsObject(AbstractScriptProcessor, {

// This function will be called by your client script

getUserEmail: function() {

var userId = this.getParameter('sysparm_user_id');

var userGR = new GlideRecord('sys_user');

if (userGR.get(userId)) {

return userGR.getValue('email');

}

return 'No email address found.';

},

type: 'UserDataUtils'

});

Step 2: Create the Client Script Second

Once the server is ready, create the client script to send the data and display the result. Go to your target table (e.g., Incident), open Client Scripts, and click New. Set the type to onChange (select your user field).

The code used:

function onChange(control, oldValue, newValue, isLoading, isTemplate) {

if (isLoading || newValue === '') {

return;

}

// 1. Call the Script Include by its name

var ga = new GlideAjax('UserDataUtils');

function onChange(control, oldValue, newValue, isLoading, isTemplate) {

if (isLoading || newValue === '') {

return;

}

// 1. Call the Script Include by its name

var ga = new GlideAjax('UserDataUtils');

// 2. Specify the server function to run

ga.addParam('sysparm_name', 'getUserEmail');

// 3. Pass your field value (newValue) to the server

ga.addParam('sysparm_user_id', newValue);

// 4. Send the request to the server and handle the response

ga.getXMLAnswer(handleServerResponse);

}

// 5. This runs automatically when the server sends back the data

function handleServerResponse(response) {

if (response) {

g_form.setValue('u_email_field', response);

}

}

Conclusion

Client Scripts in ServiceNow forms are a responsive and intelligent UI type. From adding default values with onLoad, to validating fields with onChange or cancelling a false save with onSubmit, the process remains the same.

Client scripts overlap, handling how users see and interact in the browser, whereas the servers focus on business logic and data integrity. Client scripts will help you create fast, guided, and error-free forms for end users. 

If you are starting with ServiceNow Instance, make sure to understand whether the change is required instantly in the browser or whether the change is meant to be done irrespective of changes in records. This decision will help you understand what you need: Client scripts, business rules, or both!