Adding field icon in script

[MStritt]

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 · Accepted solution]

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:

[MStritt]

Hi Jim,

Thanks for the reply.

How would I update the code to use an icon from one of these locations? Or can you?

images/assessment/checkClipboardred.png
images/demand/circle-alert.png
images/icons/flag_red.gif

function onCondition() {
    g_form.addDecoration('contact', 'icon-required', 'status', 'color-red');
}

This is part of a UI Policy I've created. I want the icon to appear next to the Contact field on the Case, when a True/False field on the Contact table is True.

Hope I formatted the code correctly using the instructions in the link you provided in your subsequent reply 🙂

[Jim Coyne]

The addDecoration method displays one of the icons that are part of the Retina Icons set.  You can see them all by using the following URL, replacing "yourinstance" with yours of course:

https://yourinstance.service-now.com/nav_to.do?uri=%2Fstyles%2Fretina_icons%2Fretina_icons.html

You might find one that is similar to what you want to use.  I'd definitely use the addDecoration instead of the "old" way of doing it with DOM manipulation, as it's not really a good idea.

And thanks for the formatted code!  It does make things easier.

[MStritt]

Hi Jim!

Yes, I think I will use one of these icons. Thanks.

Is there a way to configure the code to make them bigger than the default size?

Also, if I wanted, how can I update the code to have the icon inside left of the field itself? If even possible?

[Jim Coyne]

Answer to both question - not without using DOM manipulation, which addDecoration was created to avoid in the first place  🙂

I wish there was an option to add it before or after the field label.