Hello @sanjay8613 ,
These Client scripts use cases will help you to gain hands on practice..
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');
}
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. 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');
}
}
If my response helped mark as helpful and accept the solution.
