Unlocking the Power of Client Scripts – From Basics to Best Practices - 🔐

[Nilay_Potdukhe]

What Is a Client Scripts?

A Client Script is a piece of JavaScript that runs in the user's browser—not on the server. It’s used to enhance the user experience by dynamically controlling form behaviour, validating input, and responding to user actions in real time.

Client Scripts execute during specific form events:

• onLoad: When the form loads
• onChange: When a field value changes
• onSubmit: Before the form is submitted
• onCellEdit: When a list cell is edited (for list views)

These scripts are essential for creating responsive, interactive forms without needing a round trip to the server.

Client Scripts are stored in the sys_script_client table in ServiceNow.

• Use Cases of Client Scripts: -

1.  Automatically populate the caller’s name based on the currently logged in user for a new incident record.
   • Steps to Implement Client Script

1. Navigate to: All > System definition > Client Scripts
2. Configure the fields:
• Name: Automatic populate caller
• Table: Incident
• Active: ✅ True
• Global: ✅ True
• UI Type: All
• Type: OnLoad

1. Script: -
   function onLoad() {

   //Type appropriate comment here, and begin script below

   var caller = g_user.userID;

   g_form.setValue('caller_id',caller);

   g_form.setDisabled('caller_id',true);

}

2. Validate a email field using a regular expression

• Steps to Implement Client Script

1. Navigate to: All > System definition > Client Scripts

2.Configure the fields:

• Name: Validate email field
• Table: Incident
• Active: ✅ True
• Global: ✅ True
• UI Type: All
• Type: OnSubmit

3.Script: -

function onSubmit() {

   //Type appropriate comment here, and begin script below

   var email = g_form.getValue('u_email');

   var emailRegex = /^[a-zA-Z0-9._%+-]+@[a-zA-Z0-9.-]+\.[a-zA-Z]{2,}$/;

   if(!emailRegex.test(email))

   {

    alert('Please enter the email in correct format');

    return false;

   }

   return true;

}

3. Modify the background colour of a field based on priority value

• Steps to Implement Client Script

1. Navigate to: All > System definition > Client Scripts
2. Configure the fields:

• Name: Background colour based on priority
• Table: Incident
• Active: ✅ True
• Global: ✅ True
• UI Type: All
• Type: OnLoad

1. Script: -

function onLoad() {

   //Type appropriate comment here, and begin script below

   var impact = g_form.getValue('impact');

   var urgency = g_form.getValue('urgency');

   if(impact === '1' && urgency === '1')

   {

    g_form.getElement('priority').style.backgroundColor = 'red';

   }

   else

   {

    g_form.getElement('priority').style.backgroundColor = 'white';

   }

}

4. The end date is not earlier then start date

• Steps to Implement Client Script

1. Navigate to: All > System definition > Client Scripts
2. Configure the fields:

• Name: Date validation
• Table: Incident
• Active: ✅ True
• Global: ✅ True
• UI Type: All
• Type: OnChange
• Fieldname: start_date

1. Script: -

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

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

      return;

   }

   var sd = g_form.getValue('u_start_date');

   var ed = g_form.getValue('u_end_date');

   if(ed<sd)

   {

    alert('End Date should not be earlier then start date');

    return false;

   }

   return true;

   //Type appropriate comment here, and begin script below

}

5. Validate that the ‘short_description’ and ‘caller’ fields are not empty before permitting form submission

• Steps to Implement Client Script

1. Navigate to: All > System definition > Client Scripts
2. Configure the fields:

• Name: Validate Form Submission
• Table: Incident
• Active: ✅ True
• Global: ✅ True
• UI Type: All
• Type: OnSubmit

1. Script: -

function onSubmit() {

   //Type appropriate comment here, and begin script below

   var sd = g_form.getValue('short_description');

   var cal = g_form.getValue('caller_id');

   if(!sd || !cal)

   {

    alert('Short_description and caller name cannot be empty');

    return false;

   }

   return true;

}

[Nikhil Bajaj9]

Hi @Nilay_Potdukhe ,

It sgood that you have included few real examples as well.

Regards,

Nikhil Bajaj

[Ravi Gaurav]

Hi @Nilay_Potdukhe 

This is a well-structured and very useful post 

• You explained the definition, events, and storage table very clearly.

• Each use case is written in a step-by-step manner, which makes it easy for beginners to follow.

• The code snippets are practical and can be directly tested, which adds a lot of value.

• I liked that you covered both basic and slightly advanced scenarios (auto populate, validations, background color, date comparison, form submission check). It shows your depth of knowledge and focus on practical learning.

One small suggestion: you could also add a real-world example or scenario (e.g., “This client script helped our IT team prevent invalid incident submissions”), which would make the post even more engaging.

Overall – great work! Keep sharing knowledge like this, it will definitely help many people.