Sisense Community logo
    • Community Feedback
    • Chapters
    • Events
    • Forums
      • Help and How To
      • Product Feedback Forum
      • Strategy & Use Cases
    • Blogs
    • KB Docs
      • KB Docs
      • Add-Ons & Plug-Ins
      • APIs
      • Best Practices
      • Blox
      • CDT
      • Cloud Managed Service
      • Data Models
      • Data Sources
      • Embedding Analytics
      • How-Tos & FAQs
      • Onboarding
      • PySisense
      • Security
      • Sisense Administration
      • Sisense Intelligence & AI
      • Troubleshooting
      • Widget & Dashboard Scripts
    • Support
    • Learning
      • Sisense Academy: Free Courses and Certifications
      • Official Developer Documentation
      • Official Product Documentation
      • Official Sisense Youtube Channel
      • Sisense Compose SDK Playground
    • Use Case Gallery
    All PostsDiscussionsBlogsIdeasQuestions
    Leaderboards
    •                    
    •                    
    •                    
    •                    
    •                    
    •                    
    •                    
    •                    
    •                    
    •                    
    •                    
    •                    
    •                    
    •                    
    •                    
                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                   
    Discussions
    • Help and How-ToChevronRightIcon
    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
    HQ_Dev_Prod
    Posted 1 year ago·Last reply 1 year ago
                                           
             
    10 comments

                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                       
                   
               
                       
                                                                                                                                                                                                           
               
                       
                                                                                                                                                                                                           
               
                       
                                                                                                                                                                                                           
    Michalis Gregoriou

    Michalis Gregoriou

    ·1 year 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

    Tri Anthony

    ·1 year 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

    Michalis Gregoriou

    ·1 year ago

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

                                           
    DRay

    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.

                                           
    DRay

    DRay

    ·1 year ago

    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

    HQ_Dev_Prod

    OP1 year ago

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

     

                                           
    Tri Anthony

    Tri Anthony

    ·1 year ago

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

     

                                           
                                                                                     
    •                                                              
    •                                                              
    •