Javascript Cycle for Spotfire

In this article I explain how to move from page to page automatically after so many seconds. This can be useful when having a dashboard that you want to monitor through different pages, It can be used to quickly showcase different analysis dashboards, charts and visual without needing manual intervention. For example, rotating between critical KPI views for continuous visibility by executives or operation teams. Enables hands-free cycling while focusing attention on the metrics. 

Considerations

• If displaying for long periods of time, you will need to make server configuration changes to avoid timeouts and lock outs. 
• Data is not refreshed. It simply loops through the pages automatically
• You can select which pages to loop through
• Tiled Tabs Navigation must be on
• This script might not work on future version of Spotfire and not supported by our company.
• You cannot change the individual speed for each page. They all loop after a fixed amount of time
• Avoid using very short intervals to be able to stop the cycle 

Technical Explanation

The script uses setInterval, which is a JavaScript function that triggers a process periodically through threads. Be careful when using this function as it might create multiple threads that can lead in memory leaks. All process ids are kept on a global variable in order to stop them all when needed. Sometimes clicking multiple times can create unnecessary treads that can double the speed of the cycle. If for some reason you cannot stop the loop, refresh the browser or press ctrl+alt+shift+F5

Implementation You only need this script once in any page. It uses pure JavaScript to cycle through pages and will keep running in the background even if you go to a different page. Open a text area in html mode and add the following html and javascript

html

<span id="startButton" style="cursor:default">[Start]</span>
<span id="stopButton" style="cursor:pointer">[Stop]</span>

JavaScript

//parameters
var pages = [0, 1, 3];   //◄ Select the pages you want to cycle through. 0 is the first one
var timeout = 10000;      //◄ Select the time in ms to delay between pages. 10000 is 10 seconds

//maintain a registry of interval in case multiple are triggered to stop them all at once with the stop button
window["intervalIds"]??=[];
tmp=[...pages]

function startCycle() {
	(function cycle(){
		page = tmp.shift(); 
		console.log(page)
		if(!tmp.length) tmp=[...pages]
		goToPage(page);
		window.intervalIds.push(setTimeout(cycle, timeout));
	})();
}

function stopCycle() {
	  console.log("Slideshow Ended")
	  window.intervalIds.forEach(clearInterval);
}

function goToPage(x) {
  document.querySelectorAll(".sf-element-page-tab")[x].click();
}

// Hook html buttons to start and stop functions
document.getElementById("startButton").onclick = startCycle;
document.getElementById("stopButton").onclick = stopCycle;

More widgets at JavaScript Component Hub for Spotfire