Custom Status Bar

[epuchals]

Is there a way to add a field type similar to Percent Complete but without referencing percentage? When we add new projects, we go through a scoring process that generates a number from zero to 100 representing the potential impact of the project and the probability that the project will be completed successfully--the higher the score, the more likely the project will be considered for implementation. I'd like to represent this score as a colored bar similar to Percent Complete but without any reference to percentages.

Any ideas?

Thanks in advance,

  Eric...

[jcraneNYC]

Hey Eric!

Is the idea that you will show this in a list of Projects? Where will users see the colored bar?

If it's on the form and list doesn't matter, you can create a formatter that pulls attributes and styles a client-side HTML object based on the value in your field.

If it's on the list... I think it may be a little more challenging. You can Personalize Styles on the Score field to programmatically set a little colored dot based on the Score. Green could be 95+, Yellow could be 75-94, Orange could be 50-74, etc. Or, you could get really ambitious and create a UI page that could represent a custom "Project Implementation" dashboard and then you could make any style of list you want.

[epuchals]

Hey, Jon! Good to hear from you. So, you know that working at a university sometimes poses some special challenges, particularly re: presentation. In this case, I'd love to use colored dots but since I have to take accessibility into account, I need something that's usable by all the colorblind people (myself included) who will see the report. I only want to use the bar on list reports. I'd like it to be a visual cue (like % Complete) that will make the high numbers more obvious when the list is sorted by something else.

There's another reply to my question from Deryck Lio that will probably do the trick. I'll give that a whack and see what my users think.

Thanks for the reply!

  Eric...

[derycklio · Accepted solution]

Hi Eric,

If you love every default behavior of Percentage Complete field, except it shows the % character in the list view, the quickest solution is probably just to drop the % character via a UI Script.

/**

 * UI Script

 *

 * Name: CustomizePercentageCompleteCellView

 * Application: Global

 * Global: True

 * Active: True

 */





document.observe('dom:loaded', function() {

   // Says incident.u_score is the Percentage Complete field, but I don't like the % suffix when it's displayed in the list view.





   var headers = document.getElementsByTagName("thead")[0].childNodes[0].childNodes;





   // Find out the Cell Index of incident.u_score from the table header, so I don't have to hardcode the index in script.

   var u_score_cell_index = false;

   for (var i = 0; i < headers.length; i++) {

   if ("incident.u_score" == headers[i].getAttribute("glide_field")) {

   u_score_cell_index = i;

   break;

   }

   }

   if (false == u_score_cell_index) {

   return;

   }





   var all_percentage_complete_fields = document.getElementsByClassName("percent_complete_text");

   for (var i = 0; i < all_percentage_complete_fields.length; i++) {

   // If this Percentage Complete field is incident.u_score

   if (u_score_cell_index == all_percentage_complete_fields[i].parentNode.parentNode.cellIndex) {

   // Remove the % sign

   all_percentage_complete_fields[i].innerHTML = all_percentage_complete_fields[i].innerHTML.replace('%', '');

   }

   }

});

Or ServiceNowScripts/UI Script.js at master · dereklio/ServiceNowScripts · GitHub if you want to see the codes with better indentation.

[epuchals]

Deryck:

Very clever! I'll give this a try--it looks like just what I need. Not to push my luck or anything, but do you suppose there's a way to change to color of the bar based on the score value? Maybe blue for a score under 30, yellow for under 75, and red for 76 to 100?

Thanks for the help,

  Eric...