Colored labels in table

[HQ_Dev_Prod]

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? 

[DRay]

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]

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]

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});
})

[DRay]

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.