Adding field icon in script

MStritt · ‎06-09-2020

I'm using the following code in a UI Policy to add a gold background color to my Contact field on my case form, when a certain value (TRUE) is set on a field in the Contact table. This is working successfully. However, I'd like to add an icon instead of a background color. How would I change ctrl.style.backgroundColor = 'gold'; to use an icon instead?

images/icons/flag_red.gif

Jim Coyne · ‎06-09-2020

I would use the built-in "addDecoration" function. Here's an example from an onChange Client Script we use:

//remove any existing decoration
g_form.removeDecoration("status", "icon-stop-watch", "Status", "color-orange");
g_form.removeDecoration("status", "icon-error-circle", "Status", "color-red");
g_form.removeDecoration("status", "icon-success-circle", "Status", "color-green");


var color = "";
var icon = "";
switch (newValue) {
  case "80":
  case "100":
    color = "color-orange";
    icon = "icon-stop-watch";
    break;
  case "200":
  case "300":
    color = "color-red";
    icon = "icon-error-circle";
    break;
  case "1000":
    color = "color-green";
    icon = "icon-success-circle";
}
if (color) {
  g_form.addDecoration("status", icon, "Status", color);
}

We show a different icon/color combination based on the value of a field.

This is how it ends up looking:

View solution in original post

MStritt · ‎06-11-2020

Thank you!

Jim Coyne · ‎06-12-2020

You are welcome

Stacy1 · ‎02-11-2021

Hi Jim,

Is there a way to make that icon a clickable link?

Thanks,

Stacy

Jim Coyne · ‎02-11-2021

Not with the "g_form.addDecoration()" method. But you could add the "field_decorations" attribute to the field and have a UI Macro appear to the right of the field.

There's no specific documentation on it, but you add "field_decorations=ui_macro_name" to the Dictionary record of the field and the macro would be rendered beside the field.

https://docs.servicenow.com/bundle/quebec-platform-administration/page/administer/reference-pages/co... and search for "field_decorations", but again not much.

Jim Coyne · ‎06-09-2020

BTW, these posts might help with posting questions in the future:

TNT: Screenshots Help, but Code is Better

TNT: And Formatted Code is Even Better