tableau API testing

index.html

<div class="buttons">
  <button class="apply_RegionFilter btn" style="background-color: #a8dba2; ">Europe</button>
  <button class="apply_RegionFilter btn" style="background-color: #f5a8a3; ">Middle East</button>
  <button class="apply_RegionFilter btn" style="background-color: #afc8e3; ">The Americas</button>
  <button class="apply_RegionFilter btn" style="background-color: #d0bde0; ">Oceania</button>
  <button class="apply_RegionFilter btn" style="background-color: #ffc898; ">Asia</button>
  <button class="apply_RegionFilter btn" style="background-color: #cdb2ac; ">Africa</button>
  <button class="selectAll_RegionFilter btn btn-outline">All</button>
</div>
<div id="tableauViz"></div>

script.js

$(document).ready(function() {
  var viz, workbook, activeSheet;
  var placeholderDiv = document.getElementById("tableauViz");

  var url = "https://public.tableau.com/views/WorldIndicators/GDPpercapita";
  var options = {
    width: "100%",
    height: "600px",
    hideTabs: true,
    hideToolbar: true,
    onFirstInteractive: function() {
      workbook = viz.getWorkbook();
      activeSheet = workbook.getActiveSheet();
    }
  };
  viz = new tableau.Viz(placeholderDiv, url, options);

  $(".apply_RegionFilter").click(function() {
    activeSheet.applyFilterAsync(
      "Region",
      $(this).text(),
      tableau.FilterUpdateType.REPLACE
    );
  });

  $(".selectAll_RegionFilter").click(function() {
    activeSheet.clearFilterAsync("Region");
  });
});

scripts

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script src="https://public.tableau.com/javascripts/api/tableau-2.2.2.min.js"></script>

style.css

body {
  background-color: '#FFFFFF';
}
.btn {
  margin: 5px;
}

styles

<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.1.3/css/bootstrap.min.css" rel="stylesheet" />

tableau-api-testing.markdown

tableau API testing

basic testing of Tableau API

A Pen by Steve Bastable on CodePen.

License.