Client Script in ServiceNow With some use case.

Akanksha Gupta2 · ‎05-07-2021

Hello Community ,

I explored some use case of client script .

I want to share with you alll . Might be , it will be helpful for you all .

CLIENT – SCRIPT

Client-side scripts execute within a user's browser and are used to manage forms and form fields. Examples of things client-side scripts can do include:

Place the cursor in a form field on form load
Generate alerts, confirmations, and messages
Populate a form field in response to another field's value
Highlight a form field
Validate form data
Modify choice list options

Hide/Show fields or sections

A Client Script executes client-side script logic when forms are:

Loaded
Changed
Submitted

Inherited -> it means If the client script should be extended.

If there arr some table , which inherited from this(current) table so that time you can make this field enable.

And this is applicable to child table also.

Types of CS :-

onLoad() —

Script will runs when the system first renders the form and before users can enter data.
Used when something needs to be changed on the form while it is loading.
onLoad() function will be automatically populated in the script field when onload() type is selected on the form.
Typically, onLoad()client scripts perform client-side-manipulation of the current form or set default record values.

function onLoad() {

//Type appropriate comment here, and begin script below

}

onSubmit() —

Script will runs when a form is submitted or saved.
onSubmit() function will be automatically populated in the script field when onSubmit type is selected on the form
Typically, onSubmit() scripts validate things on the form and ensure that the submission makes sense. An onSubmit() client script can cancel form submission by returning a value of false.

function onSubmit() {

//Type appropriate comment here, and begin script below

}

onChange() —

Script will runs when a particular field value changes on the form.
Used to perform some operation as per the field changed
onChange() function will be automatically populated in the script field when onChange type is selected on the form.
The onChange()client script must specify these parameters.
control: the DHTML widget whose value changed.

Control will pull the field which is changing .

Note: control is not accessible in mobile and service portal.

oldValue: the value the widget had when the record was loaded.
newValue: the value the widget has after the change.
isLoading: identifies whether the change occurs as part of a form load(true/false).
isTemplate: identifies whether the change occurs as part of a template load it means which we changes on the form it is the part of template or not .(true/false).

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

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

return;

}

//Type appropriate comment here, and begin script below

}

onCellEdit() —

Script will runs when a field value changes on a list.
The onCellEdit() client script must specify these parameters.
sysIDs: hold all the value of the sys_ids for all items being edited.
table: the table of the items being edited.
oldValues: the old values of the cells being edited.
newValue: the new value for the cells being edited.
callback: a callback that continues the execution of any other related cell edit scripts. If true is passed as a parameter, the other scripts are executed or the change is committed if there are no more scripts. If false is passed as a parameter, any further scripts are not executed and the change is not committed.

Note: onCellEdit() client scripts do not apply to dashboard list widgets.

function onCellEdit(sysIDs, table, oldValues, newValue, callback) {

var saveAndClose = true;

//Type appropriate comment here, and begin script below

callback(saveAndClose);

}

USE CASE :- Create one field that is list data type and give reference of any type(ex :- sys_user) then when someone remove any value from that field and whenever some one added any value for that field then it will give us popup with added user and removed user.

Create one list field and give reference of user table.

Create business rule to store old value of list field.

(function executeRule(current, previous /*null when async*/) {

g_scratchpad.list = current.u_glide_list_1;
})(current, previous);

For this , you have to create onSubmit Client Script for the list field

function onSubmit() {
	var addedArr = [];
	var removedArr = [];
    var oldlist = g_scratchpad.list.split(',');
	var newlist = g_form.getValue('u_glide_list_1').split(',');
	for(var i=0; i<oldlist.length; i++){
		if(newlist.join(',').indexOf(oldlist[i]) == -1){//on old but not new
			removedArr.push(oldlist[i].toString());
		}
	}
	for(var k=0; k<newlist.length; k++){
		if(oldlist.join(',').indexOf(newlist[k]) == -1){//on new but not old
			addedArr.push(newlist[k].toString());
		}
	}
	alert('Added = ' + addedArr.join(','));
	alert('Removed = ' + removedArr.join(','));

}

Use case :- When user create any record such as incident, problem etc. Then the message should display on the top that how many total numbers of records has been created by him of the same.

This is example of when you have requirement to call one client script from another client script .

For this use UI Script .

first create one UI script.

Global.UIScriptDemo
var UIScriptDemo=Class.create();
UIScriptDemo.prototype={
	initialize: function()
	{
		
	},
	
	demoCallFromClientScript: function(TableName)
	{
		var count=0;
		var objone= new GlideRecord(TableName);
		objone.addQuery('sys_created_by',g_user.userName);
		objone.query();
		while(objone.next())
			{
				count++;
			}
		g_form.addInfoMessage("Total Number of "+TableName+" Records Created by you are : "+count);
		
	},
	
	
};

After that create one onLoad Client Script for your table.

function onLoad() {
    var abc = new UIScriptDemo(); // Initializing the class created in UI Script 
    abc.demoCallFromClientScript("incident"); // Calling the function created in UI Script
}

Use Case :- window pops up on form load.

This is an example when you want to show a pop up window at the form loads.

create onLoad Client Script for your table.

function onLoad() {
    //Call a UI Page to Display on load.You have to create the UI Page separately
    var gDialog = new GlideDialogWindow('incident');
    gDialog.setTitle('*** Incident Details *** ');
    gDialog.setSize(700, 700);
    gDialog.render();
}

Use case :- Create two fields state and city and according to state display the cities in the city field.

function onChange(control, oldValue, newValue, isLoading, isTemplate) {
    if (isLoading || newValue === '') {
        return;
    }

    //Type appropriate comment here, and begin script below
    var a = g_form.getValue('u_choice_1');

    if (a == 'jharkhand') {
        g_form.clearOptions('u_choice_3');
        g_form.addOption('u_choice_3', 'ranchi', 'Ranchi');
        g_form.addOption('u_choice_3', 'deoghar', 'Deoghar');

    }
    if (a == 'karnataka') {
        g_form.clearOptions('u_choice_3');
        g_form.addOption('u_choice_3', 'bangalore', 'Bangalore');
        g_form.addOption('u_choice_3', 'mysore', 'Mysore');

    }
    if (a == 'maharastra') {
        g_form.clearOptions('u_choice_3');
        g_form.addOption('u_choice_3', 'pune', 'Pune');
        g_form.addOption('u_choice_3', 'mumbai', 'Mumbai');

    }
}

Use case :- Validate the user mail id.

function onSubmit() {
    //Type appropriate comment here, and begin script below
    g_form.hideErrorBox('u_email');
    return validateEmail('u_email');
}
function validateEmail(field) {
    var email = g_form.getValue(field);
    if (!email || email.trim().length <= 0)
        return true;
    var re = /^(([^<>()[\]\\.,;:\s@\"]+(\.[^<>()[\]\\.,;:\s@\"]+)*)|(\".+\"))@((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\])|(([a-zA-Z\-0-9]+\.)+[a-zA-Z]{2,}))$/;
    if (!re.test(email)) {
        g_form.showErrorBox(field, getMessage('Invalid Email'));
        return false;
    }
    return true;
}

USE CASE :- prevents users from changing the State to closed in a list.

function onCellEdit(sysIDs, table, oldValues, newValue, callback) {
    var saveAndClose = true;
  if(newValue == 7){
  alert('Not allowed');
  saveAndClose = false;
  } else {
saveAndClose = true;
  }
 callback(saveAndClose); 
}

That's all from my side .

If you all like it or it is heplful for you .

Please Mark it helpful or Bookmark it for your reference .

Regards ,
Akanksha

Kailash Polai · ‎11-10-2022

Nice explained very helpful post

SemuKe · ‎02-09-2023

Helpful, thanks for sharing!!

Patrick Boyer · ‎02-09-2023

Very helpful, excellent post!

Vikhyath · ‎04-10-2023

For the last use case, anyhow the resolution code and notes are empty, we cannot change the state of the incident to Closed.

hvascyh · ‎01-19-2024

These very much useful cases, Thanks

GarimaU · ‎10-03-2024

Thank you! It was indeed helpful