How to Implementing a Progress Bar for Catalog Client Script

[String]

Hello All,

We're currently in the process of developing the portal. We've implemented an onchange catalog client script and are attempting to integrate a progress bar. However, we haven't been successful in achieving this yet. Below, you'll find the code we've been working on.

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

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

return;

}

var loadingDialog = new GlideDialogWindow('loading_message', true);

loadingDialog.setTitle('Please wait ..');

loadingDialog.setSize(400, 200);

loadingDialog.render();

var emsg = new GlideAjax('test'); //Script Include name

emsg.addParam('sysparm_name', "ErrorMessages"); //Script include Method

var errMsg;

emsg.getXML(function(response) {

var answer = response.responseXML.documentElement.getAttribute('answer');

errMsg = JSON.parse(answer);

// After errMsg is retrieved, proceed with the second AJAX call

var gaAJAX = new GlideAjax('Utilities');

gaAJAX.addParam('sysparm_name', "apicall");

gaAJAX.addParam('sysparm_asset', g_form.getValue('test'));

gaAJAX.getXML(asset1.bind({

dialog: loadingDialog

}));

});

function asset1(response) {

var answer = response.responseXML.documentElement.getAttribute("answer");

if (answer == 'empty') {

g_form.setValue('test1', 'No');

this.dialog.destroy();

} else {

getMessage(errMsg, function(msg) {

g_form.addErrorMessage(msg);

});

this.dialog.destroy();

}}}

[Community Alums]

why do you need such customization ? whats the business need ?

[String]

Hi @Community Alums 

When the user clicks on field A (onchange), the above  script will be triggered, initiating an Ajax call for integration with a third-party system. Depending on the response received, another field will be set accordingly. As the integration process takes a few seconds to respond, we aim to provide a progress bar to the user, allowing them to wait until the response is received before proceeding to fill in the remaining fields.