onChange client script is not working in service operation workspace

[Praju_123]

here is I written the code,

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

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

        return;

    }

    //Type appropriate comment here, and begin script below

    var asg = g_form.getReference('first_reported_by_task').assignment_group;

    g_form.setValue('u_reporting_group', asg);

}

[Anurag Tripathi · Accepted solution]

HI,

Change it to a getReference with Callback and it will work

EG below

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

      var ref = g_form.getReference('first_reported_by_task', callBackFunc);
	    
    }
function callBackFunc(ref) {
        
        g_form.setValue('u_reporting_group', ref.assignment_group);
    }

[Service_RNow · Accepted solution]

Hi @Praju_123 

To go deep into this we will have a little brief about the following

1. What is Client Side Scripting
2. What is Server Side Scripting

What is Client Side Scripting?

Run JavaScript on the client (web browser) when client-based events occur, such as when a form loads, after form submission, or when a field changes value.

Types of Client Side Scripting:

• onLoad(): Runs when a form is loaded.
• onChange(): Runs when a particular widget changes value.
• onSubmit(): Runs when a form is submitted.
• onCellEdit(): Runs when a cell on a list changes value.

What is Server Side Scripting?

Server scripts run on the server or database. They can change the appearance or behavior of ServiceNow or run as business rules when records and tables are accessed or modified.

In how many ways we can retrieve data from server side to client side in ServiceNow

1. GlideAjax
2. getReference
3. g_scrachpad

GlideAjax: The GlideAjax class allows the execution of server-side code from the client. GlideAjax calls pass parameters to the script includes, and, using naming conventions, allows the use of these parameters.

There are two types of GlideAjax call in ServiceNow

1. 
   Asynchronous GlideAjax: Create a client script as normal. This sends the parameters to server, which then does the processing. So that the client does not wait for the result, a callback function is used to return the result, passed to the getXML() function.

          In Asynchronous GlideAjax call code is executed with 

1. getXML() – var answer = response.responseXML.documentElement.getAttribute("answer");
2. getXMLAnswer() – var response = response;

Both getXML() & getXMLAnswer() are same response call will be different

1. 2. Synchronous GlideAjax: This will slow down your code and lock the user session until the response is received. The getXMLWait() method is not available in scoped applications.

           In Synchronous GlideAjax call code is executed with

           “getXMLWait()” – ga.getAnswer();

NOTE: - Generally recommended that you use getXML()

A Sample GlideAjax in ServiceNow

Client Side Scripting

function onChange(control, oldValue, newValue, isLoading, isTemplate) {
    if (isLoading || newValue === '') {
        return;
    }
    var caller = g_form.getValue("caller_id");
    var gr_ajax = new GlideAjax("AssignedConfiguration");
    gr_ajax.addParam('sysparm_name', 'assigne');
    gr_ajax.addParam('sysparm_user_name', caller);
    gr_ajax.getXML(HelloWorldParse);

    function HelloWorldParse(response) {
        var answer = response.responseXML.documentElement.getAttribute("answer");
        g_form.setValue("short_description", answer);
    }

}

Server Side Scripting: To available server side to client side must have to enable “Client callable”

var AssignedConfiguration = Class.create();
AssignedConfiguration.prototype = Object.extendsObject(global.AbstractAjaxProcessor, {
    assigne: function() {
        var objConfig;
        var callerEmail = this.getParameter("sysparm_user_name");
        var assConfig = new GlideRecord("sys_user");
        assConfig.addQuery("sys_id", callerEmail);
        assConfig.query();
        while (assConfig.next()) {
            objConfig = assConfig.email;
        }
        return objConfig;
    },

getReference(): If a callback function is present, this routine runs asynchronously. The browser (and script) processing continues normally until the server returns the reference value, at which time, the callback function is invoked. If a callback function is not present, this routine runs synchronously and processing halts (causing the browser to appear to hang) while waiting on a server response.

Client Side Script:

function onChange(control, oldValue, newValue, isLoading, isTemplate) {
    if (isLoading || newValue === '') {
        return;
    }
    var caller = g_form.getReference("assigned_to", doBack);
    function doBack(caller) {
        g_form.setValue("short_description", caller.email);
    }
}

g_scratchpad: To use this we need to have “Display Business Rule”.

Display rules are processed when a user requests a record form.

The data is read from the database, display rules are executed, and the form is presented to the user. The current object is available and represents the record retrieved from the database. Any field changes are temporary since they are not yet submitted to the database. To the client, the form values appear to be the values from the database; there is no indication that the values were modified from a display rule. This is a similar concept to calculated fields.

We will call that business rule in the Client Script as we require

Display Business Rule:

(function executeRule(current, previous /*null when async*/ ) {
    g_scratchpad.email = gs.getUserDisplayName();

})(current, previous);

Client Side Script:

function onLoad() {
    //Type appropriate comment here, and begin script below
    var aler = g_form.setValue("caller_id", g_scratchpad.email);
}

Please mark this comment as Correct Answer/Helpful if it helped you.

[Anurag Tripathi · Accepted solution]

HI,

Change it to a getReference with Callback and it will work

EG below

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

      var ref = g_form.getReference('first_reported_by_task', callBackFunc);
	    
    }
function callBackFunc(ref) {
        
        g_form.setValue('u_reporting_group', ref.assignment_group);
    }

[Raj Abhishek]

Hi @Anurag Tripathi 

This solution worked for me.

However, there is another scenario where I got stuck. Although I got it working, I didn't quite understand how it worked.

Changing to a callback function worked really well, but I also had an AJAX call in my client script that sets another custom field. That part was not working in the workspace, but when I put the entire AJAX code into the callback function, it worked as well. I'm not sure why. Could you help me understand the reason behind this?

By the way, we’ve had the opportunity to work together before, and I greatly valued your guidance.

[Service_RNow · Accepted solution]

Hi @Praju_123 

To go deep into this we will have a little brief about the following

1. What is Client Side Scripting
2. What is Server Side Scripting

What is Client Side Scripting?

Run JavaScript on the client (web browser) when client-based events occur, such as when a form loads, after form submission, or when a field changes value.

Types of Client Side Scripting:

• onLoad(): Runs when a form is loaded.
• onChange(): Runs when a particular widget changes value.
• onSubmit(): Runs when a form is submitted.
• onCellEdit(): Runs when a cell on a list changes value.

What is Server Side Scripting?

Server scripts run on the server or database. They can change the appearance or behavior of ServiceNow or run as business rules when records and tables are accessed or modified.

In how many ways we can retrieve data from server side to client side in ServiceNow

1. GlideAjax
2. getReference
3. g_scrachpad

GlideAjax: The GlideAjax class allows the execution of server-side code from the client. GlideAjax calls pass parameters to the script includes, and, using naming conventions, allows the use of these parameters.

There are two types of GlideAjax call in ServiceNow

1. 
   Asynchronous GlideAjax: Create a client script as normal. This sends the parameters to server, which then does the processing. So that the client does not wait for the result, a callback function is used to return the result, passed to the getXML() function.

          In Asynchronous GlideAjax call code is executed with 

1. getXML() – var answer = response.responseXML.documentElement.getAttribute("answer");
2. getXMLAnswer() – var response = response;

Both getXML() & getXMLAnswer() are same response call will be different

1. 2. Synchronous GlideAjax: This will slow down your code and lock the user session until the response is received. The getXMLWait() method is not available in scoped applications.

           In Synchronous GlideAjax call code is executed with

           “getXMLWait()” – ga.getAnswer();

NOTE: - Generally recommended that you use getXML()

A Sample GlideAjax in ServiceNow

Client Side Scripting

function onChange(control, oldValue, newValue, isLoading, isTemplate) {
    if (isLoading || newValue === '') {
        return;
    }
    var caller = g_form.getValue("caller_id");
    var gr_ajax = new GlideAjax("AssignedConfiguration");
    gr_ajax.addParam('sysparm_name', 'assigne');
    gr_ajax.addParam('sysparm_user_name', caller);
    gr_ajax.getXML(HelloWorldParse);

    function HelloWorldParse(response) {
        var answer = response.responseXML.documentElement.getAttribute("answer");
        g_form.setValue("short_description", answer);
    }

}

Server Side Scripting: To available server side to client side must have to enable “Client callable”

var AssignedConfiguration = Class.create();
AssignedConfiguration.prototype = Object.extendsObject(global.AbstractAjaxProcessor, {
    assigne: function() {
        var objConfig;
        var callerEmail = this.getParameter("sysparm_user_name");
        var assConfig = new GlideRecord("sys_user");
        assConfig.addQuery("sys_id", callerEmail);
        assConfig.query();
        while (assConfig.next()) {
            objConfig = assConfig.email;
        }
        return objConfig;
    },

getReference(): If a callback function is present, this routine runs asynchronously. The browser (and script) processing continues normally until the server returns the reference value, at which time, the callback function is invoked. If a callback function is not present, this routine runs synchronously and processing halts (causing the browser to appear to hang) while waiting on a server response.

Client Side Script:

function onChange(control, oldValue, newValue, isLoading, isTemplate) {
    if (isLoading || newValue === '') {
        return;
    }
    var caller = g_form.getReference("assigned_to", doBack);
    function doBack(caller) {
        g_form.setValue("short_description", caller.email);
    }
}

g_scratchpad: To use this we need to have “Display Business Rule”.

Display rules are processed when a user requests a record form.

The data is read from the database, display rules are executed, and the form is presented to the user. The current object is available and represents the record retrieved from the database. Any field changes are temporary since they are not yet submitted to the database. To the client, the form values appear to be the values from the database; there is no indication that the values were modified from a display rule. This is a similar concept to calculated fields.

We will call that business rule in the Client Script as we require

Display Business Rule:

(function executeRule(current, previous /*null when async*/ ) {
    g_scratchpad.email = gs.getUserDisplayName();

})(current, previous);

Client Side Script:

function onLoad() {
    //Type appropriate comment here, and begin script below
    var aler = g_form.setValue("caller_id", g_scratchpad.email);
}

Please mark this comment as Correct Answer/Helpful if it helped you.

[palanikumar · Accepted solution]

Hi,

Make sure UI Type of Client script is set to All.

The getReference function may not work in Workspace without callback function. Use the below code

function onChange(control, oldValue, newValue, isLoading, isTemplate) {
    if (isLoading || newValue === '') {
        return;
    }
    //Type appropriate comment here, and begin script below
    var asg = g_form.getReference('first_reported_by_task', callback);
    function callback(asg) { //reference is passed into callback as first arguments
      g_form.setValue('u_reporting_group', asg.assignment_group);
    }
}