Progress Bar on Servicenow Catalog form

[Ankit819]

I want to create a progress bar at the top of a ServiceNow catalog form. As the user fills in fields on the form, the progress bar should update dynamically to show the completion percentage. For example, if there are 150 variables and the user fills in 75 of them, the progress bar should display 50% completion in green.

Is it possible to achieve this on a ServiceNow catalog form ? If yes, how can it be implemented ?

[ayushraj7012933 · Accepted solution]

Hi,

Yes, it is possible to implement a progress bar in a ServiceNow Catalog form. The best and practical approach within ServiceNow is to use a single Catalog Client Script + custom HTML (UI Macro / Formatter / Info Message) instead of multiple scripts.

Single Client Script + Central Logic

🔹 Step 1: Decide Fields to Track

• Do NOT use all 150 variables (performance issue)

• Create a list of:

  • Mandatory fields OR

  • Important business fields

Example:

var fields = ['var1','var2','var3'];

Step 2: Create Progress Bar UI

Use g_form.addInfoMessage() in onLoad Client Script:

function onLoad() {
var html = '<div style="width:100%; background:#eee;">' +
'<div id="progressBar" style="width:0%; height:10px; background:green;"></div>' +
'</div>';
g_form.addInfoMessage(html);
}

 Step 3: Create a Common Function

function updateProgress() {
var fields = ['var1','var2','var3']; // same list
var filled = 0;

fields.forEach(function(field) {
if (g_form.getValue(field)) {
filled++;
}
});

var percent = Math.round((filled / fields.length) * 100);

var bar = document.getElementById('progressBar');
if (bar) {
bar.style.width = percent + '%';
}
}

 Step 4: Trigger Progress Update

Create one Catalog Client Script (onChange):

• Variable name: leave empty (applies to all)

function onChange(control, oldValue, newValue, isLoading) {
if (isLoading) return;
updateProgress();
}

Also call updateProgress() in onLoad.

[Ankur Bawiskar · Accepted solution]

@Ankit819 

this is heavy customization and I will recommend not doing this as it will increase the technical debt.

💡 If my response helped, please mark it as correct ✅ and close the thread 🔒— this helps future readers find the solution faster! 🙏

[ayushraj7012933 · Accepted solution]

Hi,

Yes, it is possible to implement a progress bar in a ServiceNow Catalog form. The best and practical approach within ServiceNow is to use a single Catalog Client Script + custom HTML (UI Macro / Formatter / Info Message) instead of multiple scripts.

Single Client Script + Central Logic

🔹 Step 1: Decide Fields to Track

• Do NOT use all 150 variables (performance issue)

• Create a list of:

  • Mandatory fields OR

  • Important business fields

Example:

var fields = ['var1','var2','var3'];

Step 2: Create Progress Bar UI

Use g_form.addInfoMessage() in onLoad Client Script:

function onLoad() {
var html = '<div style="width:100%; background:#eee;">' +
'<div id="progressBar" style="width:0%; height:10px; background:green;"></div>' +
'</div>';
g_form.addInfoMessage(html);
}

 Step 3: Create a Common Function

function updateProgress() {
var fields = ['var1','var2','var3']; // same list
var filled = 0;

fields.forEach(function(field) {
if (g_form.getValue(field)) {
filled++;
}
});

var percent = Math.round((filled / fields.length) * 100);

var bar = document.getElementById('progressBar');
if (bar) {
bar.style.width = percent + '%';
}
}

 Step 4: Trigger Progress Update

Create one Catalog Client Script (onChange):

• Variable name: leave empty (applies to all)

function onChange(control, oldValue, newValue, isLoading) {
if (isLoading) return;
updateProgress();
}

Also call updateProgress() in onLoad.

[Ankur Bawiskar · Accepted solution]

@Ankit819 

this is heavy customization and I will recommend not doing this as it will increase the technical debt.

💡 If my response helped, please mark it as correct ✅ and close the thread 🔒— this helps future readers find the solution faster! 🙏

[AndersBGS · Accepted solution]

Hi @Ankit819 

I fully agree with @Ankur Bawiskar - don't do it.