Cloud Apps

03-25-2025

Solved

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?

Code-first Analytics

Dashboards & Reporting

Data Hygiene

TriAnthony

04-07-2025

Hi HQ_Dev_Prod,

Please try the updated script below.

The issue likely occurs because the table is not fully rendered when the styles are applied, and the changes were overwritten by other processes or rendering updates shortly after. I’ve added a slight delay (10ms in this case) before the styles are applied. This ensures the table is fully rendered and all elements are available in the DOM.

-Tri

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

	let columnsIndex = 2

	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() {
		$(elementToObserve).find(`tr td:nth-child(${columnsIndex})`).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

	const observer = new MutationObserver(function(e) {
		for(const m of e) {
			if (m.type === 'childList') {
				$.each(m.addedNodes, function(index, value){

					elementObj = $(value).find('td:nth-child(3)')
					var label = elementObj.text()

					if(label in itemStyleMapping)
					{
						elementObj.text('')
						elementObj.prepend(`<mark style="${itemStyleMapping[label]}">${label}</mark>`)
					}
				})
			}
		}
	})

	observer.observe(elementToObserve, {subtree: true, childList: true});
})

7 Replies

DRay

Admin

03-27-2025

Hi HQ_Dev_Prod,

Thank you for reaching out. Can you share your widget script? We can take a look at it and provide feedback.

Thank you.

HQ_Dev_Prod

Cloud Apps

03-27-2025

Hi DRay

Here is the widget script. I'm assuming I can add all columns in columnsIndex where I want the coloring to show.

widget.on('domready', function(se, ev){
	
	let columnsIndex = 2
	
	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];
	
	$(elementToObserve).find(`tr td:nth-child(${columnsIndex})`).each(function(index, value){
		var label = $(this).text()
		
		if(label in itemStyleMapping)
		{
			$(this).text('')
			$(this).prepend(`<mark style="${itemStyleMapping[label]}">${label}</mark>`)
		}
						
	})
	
	const observer = new MutationObserver(function(e) {
		for(const m of e) {
			if (m.type === 'childList') {
				$.each(m.addedNodes, function(index, value){

					elementObj = $(value).find('td:nth-child(3)')
					var label = elementObj.text()

					if(label in itemStyleMapping)
					{
						elementObj.text('')
						elementObj.prepend(`<mark style="${itemStyleMapping[label]}">${label}</mark>`)
					}
				})
			}
		}
	})
										  
	observer.observe(elementToObserve, {subtree: true, childList: true});

})

TriAnthony

Admin

04-07-2025

Hi HQ_Dev_Prod,

Please try the updated script below.

-Tri

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

	let columnsIndex = 2

	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() {
		$(elementToObserve).find(`tr td:nth-child(${columnsIndex})`).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

	const observer = new MutationObserver(function(e) {
		for(const m of e) {
			if (m.type === 'childList') {
				$.each(m.addedNodes, function(index, value){

					elementObj = $(value).find('td:nth-child(3)')
					var label = elementObj.text()

					if(label in itemStyleMapping)
					{
						elementObj.text('')
						elementObj.prepend(`<mark style="${itemStyleMapping[label]}">${label}</mark>`)
					}
				})
			}
		}
	})

	observer.observe(elementToObserve, {subtree: true, childList: true});
})

DRay
Admin
04-07-2025
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.

HQ_Dev_Prod

Cloud Apps

04-14-2025

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?

TriAnthony

Admin

04-15-2025

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
Cloud Apps
05-30-2025
This worked! Thank you

Forum Discussion

Colored labels in table

7 Replies

Recent Discussions

JavaScript does not work for Tabber

Disappearing widgets

Two calculations displaying separately in a single field

Webhooks on MS Teams

Build To Destination Failure

Sisense

Support

Resources