Tabber Automatic Switching

[ascott011]

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?

[Benji_PaldiTeam]

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

[rapidbisupport · Accepted solution]

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]

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

 

[rapidbisupport]

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]

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.