Change component background colour based on value

[Jayden4]

Hi all, 

I have a requirement to build a reporting dashboard that has simple squares or cells coloured either green, amber or red based on a value provided. 

I am currently obtaining the values from Performance Analytics, and binding the stored value to a component's Label. I am not sure what to do from here, to change the components background colour based on the result provided. 

For example, I want a component (it does not matter what one, whatever one will let me set the background colour) that has a value of 1 in the Label, to have the background of the component red, preferably with the value hidden. 

I was hoping it would be a simple statement such as if value = '1' then bg = red, if value = '2' then bg = amber etc. 

Am I going about this the wrong way? How would you get a simple square component that changes the background colour based on a value pulled from Performance Analytics? The only information I can find is a thread here 4 years ago saying it cannot be done, but that was 4 years ago. 

We are currently using Tableau for these reports but as the data is pulled from ServiceNow, we want to replicate them into ServiceNow Platform Analytics Workspace. 

Regards, 

[olgaredkina]

Hi @Jayden4 ,

The easiest and arguably easiest to read solution would be to use single score data visualisation with icon, and set conditional colors based on values, instead of coloring the background. You can control separately color of icon and color of score itself (best practice is to set color for icon and keep score itself neutral/black, but you can color both if you want).

Similarly you can use dial or gauge visualisations with similar color controls (benefit of the gauge is that user can actually see the ranges and understand logic of when things are red/amber/green)

This option is available on in-line dashboards in Platform Analytics.

If it is absolutely critical to have background color/blocks colored, there is no easy way to do it but you can achieve it in technical dashboards/UI Builder by creating container/block for each color option and conditionally show/hide correct one based on the value of indicator. You can see here the similar question was answered for UI Builder - https://www.servicenow.com/community/next-experience-forum/ui-builder-dynamic-background-color-when-... .

I do think the first option is easier/better.

Hope that helps,

Olga

[Jayden4]

Thank you for the information, I will look into conditionally hiding the other coloured components based on the values in a technical dashboard as some of our metrics and indicators are being used as a qualitative rather than a quantity amount, which is why they want to have coloured squares in place of the values. (as the values of 1 and 0 are simply representing a Yes or No for reporting)

The first option is what we have in place currently, a combination of targets with colour schemes set on indicators and colours set in the UI Builder simple dashboards.