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

[Divya Sri K]

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"}}

[Yann Dubois2]

Thanks @Dinesh Chilaka , I think that's the option I'll be taking.  What steps do I need to take to add and use a custom icon?  And what type of file does it need to be?  Thanks for your help!

[Dinesh Chilaka]

Hi @Yann Dubois2 ,

Select that highlighted value component in UI Builder, on the right side it will show you like this 

If you Scroll down on the right side, it will show us to select the icon there click on choose custom and then select upload new image and add what ever the image you want to display as icon.

It will Supports: BMP, GIF, JPG, JPEG, PNG or SVG formats.

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

[Divya Sri K]

Hi @Dinesh Chilaka , @Yann Dubois2 ,

Thank you for your suggestions.

I tried adding the custom icon/image where the icon is having some color already to the highlighted value component and here is how i see it now. (I guess this custom image option works if we want to have color to the icon alone but the icon which we are inserting should have the color already as attached)

I set the color:positive and it highlights the entire text line, but it should not be the case.

I think we don't even have the option to place the color property as none to avoid highlighting the entire text line instead of highlighting the text (Length of the text alone).

Please add your comments/suggestions.

Thank you!

[Dinesh Chilaka · Accepted solution]

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.