This is an extension on the article, Client and Server-side Programming. That article discussed the differences between client and server-side scripts. In this article, I want to get into more detail with client scripts. How they work, what they do, and many examples.

Example 1: OnChange Script with Value Set

For this example, we have five fields, Good, Fast, Cheap, and Result.

You know the saying, good, fast, cheap, pick 2?

Here is an example of a client script for this scenario. Note that I use comments '//' to explain the client script.

I wrote this just for the change of the Good field. However you probably would also want this for the fast and cheap fields. That means you would need to also add scripts for those scenarios. This is one of the drawbacks of client scripts.

Client Script: Good onChange

When: onChange
onChange of field: u_good
Script:
function onChange(control, oldValue, newValue, isLoading, isTemplate) {
   //If the form is loading or the new value of the changing field is empty exit the script
   if (isLoading || newValue == '') {
      return;
   }
   //If Good is true, cheap is true, and fast is true, good luck
   if(newValue == 'true' && g_form.getValue('u_cheap') == true && g_form.getValue('u_fast') == true) {
      //Set the result field on the form.
      g_form.setValue('u_result', 'They are dreaming');
   }
   //repeat for the other scenarios
   else if (newValue == 'true' && g_form.getValue('u_cheap') == true && g_form.getValue('u_fast') == false) {
      g_form.setValue('u_result', 'Will take time to deliver');
   }
  else if (newValue == 'false' && g_form.getValue('u_cheap') == true && g_form.getValue('u_fast') == true) {
      g_form.setValue('u_result', 'Not the best quality');
  }
  else {
      g_form.setValue('u_result', 'Who knows');
  }
}

Example 2: Open Dialog Window

I have a good example of a client script opening a GlideDialog window here.

I am just going to show the client script part. In this example, a window pops up on form load

Client Script: SNE Message

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

Example 3: Color Code Approval Buttons

I use this one often. Color code the approval buttons so that they are easier to notice.

It is tempting to use this for many color changes in ServiceNow. How use Field Styles instead as much as possible.

Client Script: Approval Button Color

When: onLoad
Script:
function onLoad() {
 var approveButton = document.getElementById('approve');
 var rejectButton = document.getElementById('reject');
 if (approveButton) {
approveButton.style.background='green';
approveButton.style.color='white';
 }
 if (rejectButton) {
rejectButton.style.background='red';
rejectButton.style.color='white';
 }
}

Example 4: Verify a phone number

Before ServiceNow version Dublin was released, I used this to verify a phone number format. Dublin has new phone number fields.

However it is a good example of regex function. If you are not familiar with regular expressions, here are some explanations of what regular expressions.

Client Script: Verify Number

Type: onChange
Field: u_phone_number
Script:
function onChange(control, oldValue, newValue, isLoading) { 
 if (isLoading || newValue == '') {
return;
 }
 var tempValue = newValue;
 //Use Regular Expressions to verify number
 var phoneRegex1 = /^\d{3}-\d{3}-\d{4}$/;
 var phoneRegex2 = /^(800|866|877)/;
 var phoneRegex3 = /^(1{3}-1{3}-1{4}|2{3}-2{3}-2{4}|3{3}-3{3}-3{4}|4{3}-4{3}-4{4}|5{3}-5{3}-5{4}|6{3}-6{3}-6{4}|7{3}-7{3}-7{4}|8{3}-8{3}-8{4}|9{3}-9{3}-9{4}|0{3}-0{3}-0{4})$/;
 
 if (tempValue.match(phoneRegex1) && !tempValue.match(phoneRegex2) && !tempValue.match(phoneRegex3)) {
return;
 }
 else {
g_form.setValue('mobile_number', '');
alert('Phone number must be in format XXX-XXX-XXXX and must not start with 800, 866, or 877.');
 }
}

Example 5: Alert

Pop an alert to the screen if a value is true

Client Script: Awesome Check

Type: onChange
Field: u_awesome_check
Script:
function onChange(control, oldValue, newValue, isLoading) {
 if (isLoading || newValue == '') {
return;
 }
 if (newValue == 'mike_awesome') {
alert('Yes this is true');
 }
}

Example 6: Adjust Slush Bucket Sizes

There is a good example of adjusting slush bucket sizes from the forums.

function onLoad(){
 var varName = 'YOUR_VARIABLE_NAME_HERE';
 var height = '10'; //Optional
 var width = '250'; //Optional
 //Get the left and right bucket input elements
 var leftBucket = $(varName + '_select_0');
 var rightBucket = $(varName + '_select_1');
 if(height && g_form.getControl(varName)){
//Adjust the bucket length (default is 18)
leftBucket.size = height;
rightBucket.size = height;
 }
 if(width && g_form.getControl(varName)){
//Adjust the bucket width (default is 340)
leftBucket.style.width = width;
rightBucket.style.width = width;
 }
 //Fix the expanding item preview issue
 $(varName + 'recordpreview').up('td').setAttribute('colSpan', '3');
}

Use Field Styles for setting other field sizes.

Example 7: Callback Function

Callback functions make JavaScript far more flexible than it would be otherwise.

Typical functions work by taking arguments as input and returning a result. Functions take an input and return an output.

Javascript callback functions are different. Instead of waiting for a function to return that result, you can use a callback to do this asynchronously. This not only helps with performance, it strongly encouraged to use callback functions and asynchronous programming.

Example: without a callback (don't do this)

Client Script: Set VIP

When: onChange
Field: caller_id

function onChange(control, oldValue, newValue, isLoading) {
 var caller = g_form.getReference('caller_id');
 if (caller.vip == 'true')
alert('Caller is a VIP!');
}

Example: with a callback (recommended)

Client Script: Set VIP

When: onChange
Field: caller_id

function onChange(control, oldValue, newValue, isLoading) {
 var caller = g_form.getReference('caller_id', doAlert); // doAlert is our callback function
}
function doAlert(caller) { //reference is passed into callback as first arguments
if (caller.vip == 'true')
alert('Caller is a VIP!');
}

Example 8: GlideRecord Query

To learn all about client script GlideRecord queries, check out the ServiceNow wiki article.

These are limited glide record queries you can use to make server-side database queries. They use callback functions to do this. I always suggest using business rules instead for these, but sometimes I can't convince people to do that.

It is better to use a GlideAjax query than a GlideRecord query. There is a good example in the wiki for that.

Client Script: Set Version

On Change
Table: Configuration Item
Field Name: Product
Script:

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

var gr = new GlideRecord('cmdb_ci');
 gr.addQuery('sys_id', newValue);
 gr.query(setVersion);
}

function setVersion(gr) {
 if (gr.next()) { 
 g_form.setValue('version', gr.u_version);
}
}

Example 9: Remove Option from Choice List

This is an easy client script. Remove a value from a choice list if something is set.

Client Script: Category Inquiry Remove Impact 1

When: onChange
Field: Category
Script:

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

if (isLoading || newValue == '') {
return;
}
if (newValue == 'inquiry') {
g_form.removeOption('impact', '1');
}
}

Also checkout the ServiceNow Wiki Articles on Client Scripts

Mike