Forum Discussion

ascott011's avatar
ascott011
Cloud Apps
01-10-2024
Solved

Tabber Automatic Switching

Hello All,

I am creating a dashboard that is displayed on a TV monitor and someone will not be able to manually click between the tabs. Has anyone had success creating a script that would switch between the two tabs automatically every 30 seconds?

  • Hi ascott011 ,

    If you don't actually need the tabber widget taking up space on your dashboard, you can show and hide widgets directly in the dashboard script using the following:

    const time = 2000
    const tabber = {
    	tabs: [
    		{
    			displayWidgetIds: ['659f84e5800ddf004150f248'],
    			hideWidgetIds: ['659f84e9800ddf004150f24a']
    		},
    		{
    			displayWidgetIds: ['659f84e9800ddf004150f24a'],
    			hideWidgetIds: ['659f84e5800ddf004150f248']
    		}
    	]
    }
    
    dashboard.on('domready', () => {
    	const numberOfTabs = tabber.tabs.length
    	let i = 0
    	setInterval(() => {
    		prism.$ngscope.$broadcast('tab-change', {
    			show: tabber.tabs[i].displayWidgetIds || [],
    			hide: tabber.tabs[i].hideWidgetIds || [],
    			tabsConfig: tabber.tabsConfig || 'multiply',
    			renderWidgets: false
    		})
    		i = (i === numberOfTabs - 1) ? 0 : i + 1
    	}, time)
    })
    

    This would have the benefit of saving some space on the TV for more valuable information.

    Let me know how you go with this one?

    Thanks,

    Daniel

    RAPID BI

    [email protected]

    RAPID BI - Sisense Professional Services | Implementations | Custom Add-ons

5 Replies

Replies have been turned off for this discussion
  • Hi ascott011 ,

    Add the below widget script to you tabber widget to automatically switch the tabber in every 3 second (you can change the interval as per you requirement)

    widget.on('domready',function(w, e){
    	
    	function waitForElement() {
    		
    		if (document.querySelectorAll('.listDefaultCSS .listItemDefaultCSS').length > 0) {
    			
    			const tabs = $(`.listDefaultCSS .listItemDefaultCSS`);
    
    			function clickNextDiv() {
    			  let currentIndex = 0;
    
    			  return function () {
    				tabs[currentIndex].click();
    				currentIndex = (currentIndex + 1) % tabs.length;
    			  };
    			}
    
    			const clickNext = clickNextDiv();
    
    			setInterval(clickNext, 3000);
    			
    		} else {
    			
    			setTimeout(waitForElement, 100);
    			
    		}
    		
    	}
    
    	waitForElement();
    								  
    });

     

     

    Feel free to reach out if you have further questions, we're always happy to help 🙂
    [email protected] 
    Paldi Solutions, Number #1 Sisense Plugins Developer

  • Hi ascott011 ,

    If you don't actually need the tabber widget taking up space on your dashboard, you can show and hide widgets directly in the dashboard script using the following:

    const time = 2000
    const tabber = {
    	tabs: [
    		{
    			displayWidgetIds: ['659f84e5800ddf004150f248'],
    			hideWidgetIds: ['659f84e9800ddf004150f24a']
    		},
    		{
    			displayWidgetIds: ['659f84e9800ddf004150f24a'],
    			hideWidgetIds: ['659f84e5800ddf004150f248']
    		}
    	]
    }
    
    dashboard.on('domready', () => {
    	const numberOfTabs = tabber.tabs.length
    	let i = 0
    	setInterval(() => {
    		prism.$ngscope.$broadcast('tab-change', {
    			show: tabber.tabs[i].displayWidgetIds || [],
    			hide: tabber.tabs[i].hideWidgetIds || [],
    			tabsConfig: tabber.tabsConfig || 'multiply',
    			renderWidgets: false
    		})
    		i = (i === numberOfTabs - 1) ? 0 : i + 1
    	}, time)
    })
    

    This would have the benefit of saving some space on the TV for more valuable information.

    Let me know how you go with this one?

    Thanks,

    Daniel

    RAPID BI

    [email protected]

    RAPID BI - Sisense Professional Services | Implementations | Custom Add-ons

    • ascott011's avatar
      ascott011
      Cloud Apps

      Hey Daniel, Thank you so much for your help. This is what I was looking for. I believe you could help me out with another issue. This dashboard I am making needs to have a black background  with white text. I have managed to do this with most of the dashboard, but I have not figured out how to make tables operate this way. My charts are though. Here is what I have so far. If you have any suggestions on this, I would be grateful. I can also ask this question publicly in a new thread. 

      Here is the script:

      dashboard.on('widgetinitialized', function(w, args) {
         var seconds = 60;
         var refreshWidget = function(){
             args.widget.refresh();
             setTimeout(refreshWidget, seconds*1000);
         }
        setTimeout(refreshWidget, seconds*1000);
      })
      
      
      dashboard.on('domready', function(se, ev) {
      	$('body').css({'background-color':'black'})
      	$('widget-header').css({'background-color':'Black', 'color':'white'});
      	//$('widget-header').css({'background-color':'Black','font-family':'Times New Roman,Georgia,Serif','color' : 'White'})
      	$('.widget-title').css({'color':'whote'});
      	$('.widget-body').css({'background-color':'black'});
      	$('.widget-chart-container').css({'background-color':'black'});
      	$('text').css({'color':'White', 'font-size':'18px', 'fill':'white'});
      	$('.x-axis text').attr('text-anchor', 'middle');
            // Change pivot table header and data background to black
            $('.pivot-header, .pivot-cell , .pvtVal').css({'background-color':'green'});
      
            // Change pivot table header and data text color to white
            $('.pivot-header, .pivot-cell, .table-grid_row').css({'color':'white', 'fill':'white'});
      	
      	//$('.legend-label').css('font-size': '14px');
      });
      
      
      const time = 20000
      const tabber = {
      	tabs: [
      		{
      			displayWidgetIds: ['64d0fa575c82b800343cdbfd'],
      			hideWidgetIds: ['65a6a2a19dd6330033e88608']
      		},
      		{
      			displayWidgetIds: ['65a6a2a19dd6330033e88608'],
      			hideWidgetIds: ['64d0fa575c82b800343cdbfd']
      		}
      	]
      }
      
      dashboard.on('domready', () => {
      	const numberOfTabs = tabber.tabs.length
      	let i = 0
      	setInterval(() => {
      		prism.$ngscope.$broadcast('tab-change', {
      			show: tabber.tabs[i].displayWidgetIds || [],
      			hide: tabber.tabs[i].hideWidgetIds || [],
      			tabsConfig: tabber.tabsConfig || 'multiply',
      			renderWidgets: false
      		})
      		i = (i === numberOfTabs - 1) ? 0 : i + 1
      	}, time)
      })
      

      Thanks for any help,

      Alex

       

  • Hi Alex,

    Great to hear!

    Credit to Ophir_Buchman for transform pivot explanation in Solved: Pivot 2.0 - Manipulating a Pivot Chart - Sisense Community as used below.

    Please see the script below, with some comments:

    // SWITCH TABS AT INTERVAL
    const time = 20000
    const tabber = {
    	tabs: [
    		{
    			displayWidgetIds: ['64d0fa575c82b800343cdbfd'],
    			hideWidgetIds: ['65a6a2a19dd6330033e88608']
    		},
    		{
    			displayWidgetIds: ['65a6a2a19dd6330033e88608'],
    			hideWidgetIds: ['64d0fa575c82b800343cdbfd']
    		}
    	]
    }
    
    dashboard.on('domready', () => {
    	const numberOfTabs = tabber.tabs.length
    	let i = 0
    	setInterval(() => {
    		prism.$ngscope.$broadcast('tab-change', {
    			show: tabber.tabs[i].displayWidgetIds || [],
    			hide: tabber.tabs[i].hideWidgetIds || [],
    			tabsConfig: tabber.tabsConfig || 'multiply',
    			renderWidgets: false
    		})
    		i = (i === numberOfTabs - 1) ? 0 : i + 1
    	}, time)
    })
    
    // REFRESH WIDGETS AT INTERVAL
    dashboard.on('widgetinitialized', function(w, args) {
       var seconds = 60;
       var refreshWidget = function(){
           args.widget.refresh();
           setTimeout(refreshWidget, seconds*1000);
       }
      setTimeout(refreshWidget, seconds*1000);
    })
    
    // APPLY PIVOT STYLING
    dashboard.on('widgetinitialized', function(d, args) {
    	const widget = args.widget
    	if (widget.type !== 'pivot2') { return }
    	// credit to @Opir https://community.sisense.com/t5/build-analytics/pivot-2-0-manipulating-a-pivot-chart/m-p/3589
    	widget.transformPivot(
    	  {},
    	  function (metadata, cell) {
    		cell.style = {
    		  backgroundColor : 'black',
    		  fontSize : 14,
    		  fontWeight : 'bold',
    		  fontStyle : 'italic',
    		  textAlign : 'center',
    		  color : 'white',
    		  borderColor : 'white',
    		  borderWidth : '3px',
    		  minWidth : '150px',
    		  maxWidth : '200px'
    		};
    	  }
    	);
    })
    
    // APPLY GLOBAL STYLES
    dashboard.on('initialized', (dash) => {
        const styles = `
    	body {
    		background-color: black !important;
    	}
    	widget-header {
    		background-color: black !important;
    		color: white !important;
    	}
    	.widget-title {
    		color: white;
    	}
    	.widget-body {
    		background-color: black !important;
    	}
    	.widget-chart-container {
    		background-color: black !important;
    	}
    	text {
    		color: white;
    		font-size: 18px;
    		fill: white;
    	}
    	.x-axis text {
    		text-anchor: middle;
    	}
    	.pivot-container {
    		border: none !important;
    	}
    	.pivot-header, .pivot-cell, .pvtVal {
    		background-color: green;
    	}
    	.pivot-header, .pivot-cell, .table-grid_row {
    		color: white;
    		fille: white;
    	}
    	.table-grid.table-grid--fixed.table-grid--columns.table-grid--top.table-grid--right.active {
    		background-color: black !important;
    	}
    	.tablewidget-widget-content, .tablewidget-widget-content tr, div#grid_paginate {
    		background: black !important;
    	}
    	.tablewidget-widget-content tr th, .tablewidget-widget-content td {
    		color: white !important;
    	}
    	.tablewidget-widget-content tr:hover td {
    		color: black !important;
    	}
    	`
    	const styleSheet = document.createElement("style")
        styleSheet.innerText = styles
        document.head.appendChild(styleSheet)
    })
    

    Previously, you were using jQuery to modify the styles of elements. If you instead, inject it to the header as a style as above you won't need to worry about applying the style to the element before the element exists. This is why the dashboard previously appeared white for a split second before switching to style specified in the jQuery. Additionally, you can run into race conditions where the style is never changed because the jQuery runs before the element is on the document.

    I added style consistent with table widgets and pivots, but pivot controls required a little extra - please see above leveraging transformPivot() method.

    We've also made all sorts of fantastic looking dashboards for customers for use specifically on TV screens like your use case, with nice big BloX indicators with sparklines, arrows and logos that were very well received. If you'd like to see some of what we've done for others, we'd love to provide a demo. Please send me an email if you're interested and we can organize a call and compare notes?

    Let me know how this goes for you.

    Thanks,

    Julian

    RAPID BI

    [email protected]

    RAPID BI - Sisense Professional Services | Implementations | Custom Add-ons

    • ascott011's avatar
      ascott011
      Cloud Apps

      Hey Julian, I don't see how it could hurt to hear about some of the solutions you have seen. I will send you an email.