CLIENT SCRIPT EXAMPLES
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
View fullsize
Venn Diagram
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
View fullsize
Approval Button Color
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
Alert Example
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');
}
}
