2 Replies Latest reply on Aug 30, 2018 3:13 PM by Eli Brown

    Changing Filters using Tableau JavaScript API

    Eli Brown

      I'm having trouble changing filters of my sheets through the JavaScript API. I've used the examples Tableau has on their website to go by but it still isn't working right. I can get my Sheets to come up just fine, I just can't change the filters using buttons after they have already been created. I'm using Tableau 10.5.2. I've attached my code for more clarity, I have to files, dashboard.html, and Access_Tableau.js. I keep getting the same errors I'll list them below.

       

      Errors:

       

      1) Uncaught ReferenceError: $ is not defined

               at Access_Tableau.js:22

      2) Uncaught TypeError: activeSheet.applyFilterAsync is not a function

               at filterSingleValue (Access_Tableau.js:25)

               at HTMLInputElement.onclick (dashboard.html:11)

       

       

       

      dashboard.html:

       

       

      <!DOCTYPE html>

      <html>

      <head>

          <title>Tableau Dashboard</title>

          <meta http-equiv="refresh" content="900">

          <script src="https://public.tableau.com/javascripts/api/tableau-2.min.js" type="text/javascript"></script>

          <script src="Access_Tableau.js" type="text/javascript"></script>

      </head>

      <body onload="initializeViz();">

          <form name="tableau" id="tableau">

              <input type="button" name="test" value="Run" onclick="filterSingleValue();" />

              <div id="tableauViz"></div>

          </form>

      </body> 

      </html>

       

      Access_Tableau.js:

       

       

      var workbook;

      var activeSheet;

       

      function initializeViz() {

          var containerDiv  = document.getElementById("tableauViz"),

          url = "http://ascendvfq:9001/t/Enterprise/views/PensacolaLabDashboard/SampleTracking?iframeSizedToWindow=true&:embed=y&:display_count=no&:showAppBanner=false&:showVizHome=no";

          var options = {

              "Page": "2",

              //width: "1920px",

              //height: "1080px",

              hideTabs: true,

              hideToolbar: true,

              onFirstInteractive: function () {

                  workbook = viz.getWorkbook();

                  activeSheet = workbook.getActiveSheet();

              }

          };

          var viz = new tableau.Viz(containerDiv , url, options);

      }

       

      $(initializeViz);

       

      function filterSingleValue() {

              activeSheet.applyFilterAsync(

              "Page",

              "1",

              tableau.FilterUpdateType.REPLACE);

      }