andre347/index.html

## index.html
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Data-Refresh Tableau</title>
</head>

<body>
    <h1>Hello Tableau!</h1>
    <input type="number" name="refreshTime" id="refreshTime" placeholder="Time in Seconds">
    <button id="btn">Start Refresh!</button>
    <button id="btn-stop">Stop Refresh!</button>
    <p id="info">Please specify seconds till refresh</p>

    <script src="js/tableau-extensions-1.latest.min.js"></script>
    <script src="js/app.js"></script>
</body>

</html>

## script.js
// When the DOM has loaded, run the function load
document.addEventListener("DOMContentLoaded", load);

// Grab the input box, the buttons and paragraph
const input = document.querySelector("#refreshTime");
const btn = document.querySelector("#btn");
const btnStop = document.querySelector("#btn-stop");
const para = document.querySelector("#info");

// Create refresh variable
let refreshInterval = null;

function load() {
  //initialise the tableau object
  tableau.extensions.initializeAsync().then(() => {
    console.log("Tableau object loaded");
    // Eventlistener on the start button
    btn.addEventListener("click", () => {
      if (input.value !== "") {
        para.innerHTML = `Refresh is running every ${input.value} seconds`;
        refreshInterval = setInterval(() => {
          initTableau();
        }, input.value * 1000);
      } else {
        para.innerHTML = "Please specify seconds till refresh";
      }
    });

    btnStop.addEventListener("click", () => {
      if (input.value !== "") {
        clearInterval(refreshInterval);
        console.log("Stopped the refresh..");
        para.innerHTML = "Refresh is not running";
      }
    });
  });
}

function initTableau() {
  // get the Tableau elements
  const dashboard = tableau.extensions.dashboardContent.dashboard;
  const sheets = dashboard.worksheets[0];
  const datasource = sheets.getDataSourcesAsync();
  // refresh said data source
  console.log("Refreshing Datasource..");
  datasource.then(source => source[0].refreshAsync());
}

## tableau-extension-step-5.markdown

      
    Raw
  

              tableau-extension-step-5.markdown
            
          
    Tableau Extension: Step 5

A Pen by Andre de Vries on CodePen.
License.
	<!DOCTYPE html>
	<html lang="en">

	<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<meta http-equiv="X-UA-Compatible" content="ie=edge">
	<title>Data-Refresh Tableau</title>
	</head>

	<body>
	<h1>Hello Tableau!</h1>
	<input type="number" name="refreshTime" id="refreshTime" placeholder="Time in Seconds">
	<button id="btn">Start Refresh!</button>
	<button id="btn-stop">Stop Refresh!</button>
	<p id="info">Please specify seconds till refresh</p>

	<script src="js/tableau-extensions-1.latest.min.js"></script>
	<script src="js/app.js"></script>
	</body>

	</html>
	// When the DOM has loaded, run the function load
	document.addEventListener("DOMContentLoaded", load);

	// Grab the input box, the buttons and paragraph
	const input = document.querySelector("#refreshTime");
	const btn = document.querySelector("#btn");
	const btnStop = document.querySelector("#btn-stop");
	const para = document.querySelector("#info");

	// Create refresh variable
	let refreshInterval = null;

	function load() {
	//initialise the tableau object
	tableau.extensions.initializeAsync().then(() => {
	console.log("Tableau object loaded");
	// Eventlistener on the start button
	btn.addEventListener("click", () => {
	if (input.value !== "") {
	para.innerHTML = `Refresh is running every ${input.value} seconds`;
	refreshInterval = setInterval(() => {
	initTableau();
	}, input.value * 1000);
	} else {
	para.innerHTML = "Please specify seconds till refresh";
	}
	});

	btnStop.addEventListener("click", () => {
	if (input.value !== "") {
	clearInterval(refreshInterval);
	console.log("Stopped the refresh..");
	para.innerHTML = "Refresh is not running";
	}
	});
	});
	}

	function initTableau() {
	// get the Tableau elements
	const dashboard = tableau.extensions.dashboardContent.dashboard;
	const sheets = dashboard.worksheets[0];
	const datasource = sheets.getDataSourcesAsync();
	// refresh said data source
	console.log("Refreshing Datasource..");
	datasource.then(source => source[0].refreshAsync());
	}