4 Replies Latest reply on Sep 16, 2019 1:54 AM by Akshar Jamgaonkar

    Passing Filters from One Embedded Visualization to Other Embedded Visualizations

    Tyler Meyers

      Hi,

      I am relatively new to JavaScript and the Tableau JS API.  I am trying to get the filters from one embedded visualization and pass it to other visualizations on the web page.

       

      I am initializing my main visualization with this code.

       

      function initViz() {

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

              url = "https://tableau.Viz",

       

              options = {

                  hideTabs: true,

                  loadorder: -1,

                  hideToolbar: true,

                  onFirstInteractive: function () {

                      workbook=SumDash.getWorkbook();

                      activeSheet = workbook.getActiveSheet().getWorksheets()[0];

                      SumDash.addEventListener(tableau.TableauEventName.FILTER_CHANGE,onFilterChange);

                      console.log("Run this code when the viz1 has finished loading.");

                  }

              };     

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

       

      When filters are changed on the main visualization I am getting the field names and applied values and updating the other visualizations with this code.

       

      This code works, but it is very slow.  I think part of my problem is that the dashboard I am getting the filters from has multiple worksheets and the below code is looping through each worksheet in the dashboard (21 worksheets on the dashboard and console.log(1) is printing 21 times). 

       

      Is there a way to only pass the field names and values from one worksheet and not each worksheet in the dashboard?  Is there a more efficient way to do this?

       

      function onFilterChange(){

           activeSheet.getFiltersAsync()

          .then(function(promise) {

              console.log(1);

              var fieldName = [];

              var fieldValArr = [];

              for (var i=0;  i< promise.length; i++) {

                  fieldName.push(promise[i].getFieldName());

                  var  fieldValues = [];

                  for (var j=0;  j< promise[i].getAppliedValues().length; j++) {

                      fieldValues[j] = promise[i].getAppliedValues()[j].value;

                  }

              fieldValArr.push(fieldValues);

              for (var k=0; k<fieldName.length; k++){

                  activeSheet1.applyFilterAsync(fieldName[k], fieldValArr[k], tableau.FilterUpdateType.REPLACE);

                  activeSheet2.applyFilterAsync(fieldName[k], fieldValArr[k], tableau.FilterUpdateType.REPLACE);

              }

          }

          })

      }

       

      Thanks!

      Tableau Desktop version =  2018.1

      https://public.tableau.com/javascripts/api/tableau-2.min.js