How to change a background color of a variable in a Catalog item?

Siddharth4
Tera Contributor

‎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.

 

Siddharth4_0-1665401152552.png

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.

 

Siddharth4_1-1665401365807.png

 

 

0 Helpfuls
  • 1,450 Views
2 REPLIES 2

Musab Rasheed
Tera Sage
Tera Sage

‎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

https://www.servicenow.com/community/developer-forum/change-background-color-of-read-only-field/m-p/...

https://www.servicenow.com/community/developer-forum/modify-font-color-on-a-readonly-field/m-p/17280...

https://www.servicenow.com/community/developer-forum/how-to-change-the-background-color-of-requestor...

Please hit like and mark my response as correct if that helps
Regards,
Musab
0 Helpfuls

Community Alums
Not applicable

‎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');">

0 Helpfuls