How to change a background color of a variable in a Catalog item?
- Mark as New
- Bookmark
- Subscribe
- Mute
- Subscribe to RSS Feed
- Permalink
- Report Inappropriate Content
10-10-2022 04:29 AM
Hi,
I want to change a background color of a read only variable of Catalog item. There is a reference variable name cost center in a requested item whose default background colour is grey.
I want to highlight that field by change the color from grey to red. for that I created a on load catalog client script but that not working. kindly help me by providing the steps and script to achieve this functionality.

- Mark as New
- Bookmark
- Subscribe
- Mute
- Subscribe to RSS Feed
- Permalink
- Report Inappropriate Content
10-10-2022 05:11 AM - edited 10-10-2022 05:17 AM
Hello,
I don't think it will work without DOM manipulation which servicenow doesn't recommend. Also, always keep your script's UI type to 'All'. Please go through below threads
Regards,
Musab

- Mark as New
- Bookmark
- Subscribe
- Mute
- Subscribe to RSS Feed
- Permalink
- Report Inappropriate Content
10-10-2022 05:20 AM
Hi @Siddharth4 ,
you could create a catalog ui catalog policy that does sets the values like this
function onCondition() {
document.getElementById('sys_display.IO:ae6c35dc3482adc0286558191d6651c4').style.backgroundColor="red";
document.getElementById('sys_display.IO:ae6c35dc3482adc0286558191d6651c4').readOnly = true;
}
you'll just have to get the ID=sys_display:IO:xxxxx (sysid) value is on the variable
which can be done using the google inspect element feature in chrome
<input class="questionsetreference" onkeyup="return acReferenceKeyUp(this, event)" onkeydown="return acReferenceKeyDown(this, event);" onkeypress="return acReferenceKeyPress(this, event)" ac_order_by="name" ac_columns="email" autocomplete="off" id="sys_display.IO:xxxxxx" title="" name="sys_display.IO:xxxxx" value="" onfocus="if (!this.ac) new AJAXTableCompleter(this, 'IO:xxxxxxx', '', '', 'sys_user');">