How to set the icon color in the Highlighted value component in UI builder ServiceNow??

Divya Sri K · ‎03-05-2024

Hi, How can i set the Color for the icons alone, not the highlighted color??

For Display Value Block component in UI builder, When the Type is Highlighted-Value we have a property called color which sets the background color of that value. But when I'm trying to have color for the icon alone , it's not happening. what property do we need to use to set the color for the icon??

If i use the color property , with type highlighted-value it's applying for background , instead i should have it only for icon. What property to be used??

{"label":"Wlan","value":{"type":"highlighted-value","label":"Wlan Inuse",showIcon": true,"icon": "broadcast tower fill","color": "white"}}

Dinesh Chilaka · 3 weeks ago

Hi @Divya Sri K ,

In the right side of the highlighted component , we can add styles for the highlighted value component . Scroll down in the styles tab you will find the view and edit CSS ,click on that and add css like below

Now you can see the back-ground color till the text exists.

One more thing is to select color as none , you just need to select the data bind option at the color property, then it will open the pop-up like there you can select the option highlighted in the below image,

there you just write the below script,

/**
  * @param {params} params
  * @param {api} params.api
  * @param {TransformApiHelpers} params.helpers
  */
function evaluateProperty({api, helpers}) {
	return 'none';
}

Now it will works as expected @Divya Sri K

If my response helped, please mark my solution as the accepted solution so it will be helpful for future readers.

View solution in original post

Prachi_bhore · ‎07-08-2024

Hi @Divya Sri K , Could you find the solution for the above. I have a same requirement.

Divya Sri K · ‎07-08-2024

Hi @Prachi_bhore , No still not.

If you found anything, please reply here.

Thank you!

Yann Dubois2 · a month ago

I realize this is a very old thread, but I haven't found the answer to this elsewhere. @Prachi_bhore or @Divya Sri K where you able to find the answer to this since then?

Dinesh Chilaka · 4 weeks ago

Hi @Yann Dubois2 ,

To set the color for the icon alone is not possible, the workaround is we can upload the new icon and display that icon wherever we want.

Let me know, if you want guidance to how to add custom icon.