Progress Bar - While waiting for REST response

[Raghu Loganatha]

Hi, 

I came across this nice progress bar which i want to show on the form (Not on portal) while the user is waiting on a response from integration. 

ServiceNow Documentation LINK

Package: @servicenow/now-progress-bar

Release: Orlando

Integration is taking roughly 5 seconds to fetch the information and want to display this while waiting, Integration is triggered by an UI action. Can someone give me idea?

Or something like this: https://codepen.io/chris22smith/pen/BbvYvZ

Thanks,
Raghu.

[Prateek kumar · Accepted solution]

Here is what i tried in my instance and it is working.

1. Create a UI Action.

Name: Show some Progress

Client: Check

onClick: displayProgressWorker()

Script:

function displayProgressWorker() {
    //instantiate new progress viewer
    var progressViewerDlg = 
        new GlideDialogWindow('hierarchical_progress_viewer');
    //define the AJAX script include to call
    progressViewerDlg.setPreference('sysparm_ajax_processor',
                                    'global.CAVURunner');
    //give the window a title
    progressViewerDlg.setTitle("CAVU Worker Progress");
    
    progressViewerDlg.on("executionComplete", function(trackerObj) {
        //optional callback on completion
        //see what's in trackerObj
        console.log(trackerObj);
        //use some data we passed back from the worker 
        //from 'this.tracker.updateResult({incidentsCreated: totalIncidents});'
        alert("All done creating " + 
              trackerObj.result.incidentsCreated + " incidents");
        //close the viewer
        progressViewerDlg.destroy();
    });
    
    //render the viewer
    progressViewerDlg.render();
}

2. Create Client callable script include:

Name: CAVURunner

API Name: global.CAVURunner

Client Callable: True

Script:

var CAVURunner = Class.create();
CAVURunner.prototype = Object.extendsObject(global.AbstractAjaxProcessor, {
    start: function() {
        //instantiate worker
        var worker = new GlideScriptedHierarchicalWorker();
        //give it a name
        worker.setProgressName("CACU Worker");
        //run in the background so user can close progress if they get bored watching
        worker.setBackground(true);
        //call the script include worker and method
        worker.setScriptIncludeName("CAVUWorker");
        worker.setScriptIncludeMethod("runMe");
        worker.start();
        //get the worker id so we can track progress from the client
        var progressID = worker.getProgressID();
        return progressID;
    },
    
    type: 'CAVURunner'
});

3. Create a script include:

Name: CAVUWorker

API Name: global.CAVUWorker

Script:

In this i'm testing for creation of 20 incidents, you can parse the rest message and manipulate the function accordingly.

var CAVUWorker = Class.create();
CAVUWorker.prototype = {
    
    initialize: function() {
        //get the tracker so we can send progress updates
        this.tracker = SNC.GlideExecutionTracker.getLastRunning();
    },
    
    runMe: function() {
        //let's take our time doing something like create 200 incidents
        var totalThings = 20;
        var incCounter = 1;
        for (var i = 1; i <= totalThings; i++) {
            if (totalThings < 100) {
                //determine how many percent to increment for each interval
                var intervalPercent = Math.floor(10 / totalThings);
                this.tracker.incrementPercentComplete(intervalPercent);
            }
            else {
                //determine number of things for one percent
                var onePercentInterval = Math.floor(totalThings / 100);
                if (i % onePercentInterval == 0) {
                    //increment one percent more
                    this.tracker.incrementPercentComplete(1);
                }
            }
            
            this._createIncident(i);
        }
        
        this.tracker.success("Finished creating " + totalIncidents + " incidents");
        //otherwise this.tracker.fail(msg);
        this.tracker.updateResult({incidentsCreated: totalIncidents});
    },
    
    _createIncident: function(num) {
        var gr = new GlideRecord("incident");
        gr.short_description = "testing " + num;
        gr.insert();
    },
    
    type: 'CAVUWorker'
};

Result:

Hope this helps.

-Thanks

Prateek

[Raghu Loganatha]

Thanks So much Prateek!! That worked. Appreciate you taking time and helping out.