Colored labels in table

I'm having an issue with the widget script to color the labels in a table created by harikm007 in a previous post.

https://community.sisense.com/t5/build-analytics/colored-labels-in-table-widget/m-p/10780

I have successfully been able to implement the script. However, the color flashes quickly when I load the dashboard then disappears.

Any reason why or if I have to change the script?

HQ_Dev_Prod

Posted 1 year ago·Last reply 11 months ago

10 comments

Michalis Gregoriou

·11 months ago

Hello!

I am also trying something similar, but the solution provided is not working as expected :(

Any ideas Using version: 2025.3.0.226

TriAnthony

Tri Anthony

·11 months ago

Hi MikeGre,

I just tested the script on L2025.3.0.226 and it is working for me. Could you try increasing the delay (line 26 in the code above) from 10 to 30 (or more)? If it still doesn't work, would you be able to send a copy of your dashboard?

-Tri

Michalis Gregoriou

·11 months ago

I tested it but nothing changed. Please find the dashboard attached

HQ_Dev_Prod

OP1 year ago

Hi DRay and TriAnthony

Yes! That delay worked perfectly. Thank y

widget.on('domready', function(se, ev){

	let columnsIndex = [2, 4]

	let itemStyleMapping = {
		'Very High Risk':'background-color:#B22222; color:white; padding: 2px 8px; border-radius:15px',

ou!!

Is there a way to continue adding columns to the list so it is applied to multiple columns?

Tri Anthony

·1 year ago

Hi HQ_Dev_Prod,

Yes, you can use this script instead to apply the styles to multiple columns. I also noticed that script works as intended without the observer, so I removed that part of the script. Let me know if you run into any issues.

-Tri

widget.on('domready', function(se, ev){

	let columnsIndex = [1,2,3,4]

	let itemStyleMapping = {
		'Very High Risk':'background-color:#B22222; color:white; padding: 2px 8px; border-radius:15px',
		'High Risk':'background-color:#FF6347; color:white; padding: 2px 8px; border-radius:15px',
		'Med Risk': 'background-color:#FFD166; color:white; padding: 2px 8px; border-radius:15px',
		'Low Risk': 'background-color:#90EE90; color:white; padding: 2px 8px; border-radius:15px',
		'Very Low Risk': 'background-color:#2E8B57; color:white; padding: 2px 8px; border-radius:15px',
		'No risk score': 'background-color:#D3D3D3; color:white; padding: 2px 8px; border-radius:15px'
	}
	
	const elementToObserve = $('table tbody', element)[0];

	// Apply styles after a slight delay to ensure the table is fully rendered
	setTimeout(function() {
		for(i=0; i<columnsIndex.length; i++) {
			$(elementToObserve).find(`tr td:nth-child(${columnsIndex[i]})`).each(function(index, value){
				var label = $(this).text()

				if(label in itemStyleMapping)
				{
					$(this).text('')
					$(this).prepend(`<mark style="${itemStyleMapping[label]}">${label}</mark>`)
				}						
			})
		}
	}, 10);  // Adjust the timeout as needed (100ms delay)
	
})

HQ_Dev_Prod

OP1 year ago

This worked! Thank you

DRay

·1 year ago

Hi HQ_Dev_Prod,

I’m following up to see if the solution offered by TriAnthony worked for you.

If so, please click the 'Accept as Solution' button on the appropriate post. That way other users with the same questions can find the answer. If not, please let us know so that we can continue to help.

Thank you.