2 Replies Latest reply on Dec 29, 2017 1:15 PM by Zale Zhao Branched from an earlier discussion.

    Re: Quick filter always shows the last date

    Zale Zhao

      Hi Guys,

       

      Run into the same issue, I am using a slide bar as a date range filter and the requirement is to set the slider automatically update itself when the underlying data changed.

      This solution will need some very basic knowledge of Javascript, HTML, and CSS. the basic idea is to embed a litter web page in the dashboard and let the JS do all the work

       

      This thing works, but not perfect, and doesn't come with any warranty, so if you have some idea of how to improve, please spit it out.

       

      Here is how it goes on a summary level:

      1. publish a web data connector, and drag a web page, type in the link, and in the link tell the web page where to get the date range, and where to set the slid bar.

      2. In your workbook, beside the worksheet which you want to update the slid bar, you will need a hidden sheet for the HTML to get the data

      3. publish the workbook and you are done

       

      More detail info is on demand. also, please let me know if you have a better and easier solution:

       

       

      Below is the code,

       

      <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

      <!--Date: 10/10/2017  v0.0e See corresponding changelog for details -->

      <html class="dj_safari" style="height:45px; background-color:white" lang="en">

      <head>

          <title></title>

       

          <meta http-equiv="Expires" content="Thu, 01 Jan 1970 00:00:00 GMT"/>

          <meta http-equiv="Cache-Control" content="no-cache, no-store"/>

          <meta http-equiv="Pragma" content="no-cache"/>

          <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">

       

          <link href="tableau.css.gz" media="screen" rel="Stylesheet" type="text/css">

          <link href="vqlweb.css.gz" media="screen" rel="Stylesheet" type="text/css">

          <link href="jquery-ui.css.gz" rel="stylesheet" type="text/css"/>

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

          <script type="text/javascript" src="jquery-ui.js.gz"></script>

          <script type="text/javascript" src="/javascripts/api/tableau_v8.js"></script>

          <script type="text/javascript" src='/webdataconnectors/alasql.min.js'></script>

          <script type="text/javascript" src='/webdataconnectors/xlsx.full.min.js'></script>

          <script type="text/javascript" src='/webdataconnectors/jquery-3.2.1.min.js'></script>

       

          <script type="text/javascript" src="/javascripts/api/tableau_v8.debug.js"></script>

          <script type="text/javascript">

              if (typeof jQuery === 'undefined') {

                  var errEl = document.getElementById("tabBootErr");

                  var width = 400;

                  errEl.style.width = width + 'px';

                  errEl.style.marginLeft = -(width / 2) + 'px';

                  throw new Error(

                      'Your browser did not allow the loading of the critical resource: javascripts/jquery.js.  Please check your local browser security to ensure that it allows access to this server.');

              }

              // Detect browser for enabling notifications from: https://stackoverflow.com/questions/9638247/is-jquery-browser-deprecated

              ;; (function ($) { if (!$.browser && 1.9 <= parseFloat($.fn.jquery)) { var a = { browser: void 0, version: void 0, mobile: !1 }; navigator && navigator.userAgent && (a.ua = navigator.userAgent, a.webkit = /WebKit/i.test(a.ua), a.browserArray = "MSIE Chrome Opera Kindle Silk BlackBerry PlayBook Android Safari Mozilla Nokia".split(" "), /Sony[^ ]*/i.test(a.ua) ? a.mobile = "Sony" : /RIM Tablet/i.test(a.ua) ? a.mobile = "RIM Tablet" : /BlackBerry/i.test(a.ua) ? a.mobile = "BlackBerry" : /iPhone/i.test(a.ua) ? a.mobile = "iPhone" : /iPad/i.test(a.ua) ? a.mobile = "iPad" : /iPod/i.test(a.ua) ? a.mobile = "iPod" : /Opera Mini/i.test(a.ua) ? a.mobile = "Opera Mini" : /IEMobile/i.test(a.ua) ? a.mobile = "IEMobile" : /BB[0-9]{1,}; Touch/i.test(a.ua) ? a.mobile = "BlackBerry" : /Nokia/i.test(a.ua) ? a.mobile = "Nokia" : /Android/i.test(a.ua) && (a.mobile = "Android"), /MSIE|Trident/i.test(a.ua) ? (a.browser = "MSIE", a.version = /MSIE/i.test(navigator.userAgent) && 0 < parseFloat(a.ua.split("MSIE")[1].replace(/[^0-9\.]/g, "")) ? parseFloat(a.ua.split("MSIE")[1].replace(/[^0-9\.]/g, "")) : "Edge", /Trident/i.test(a.ua) && /rv:([0-9]{1,}[\.0-9]{0,})/.test(a.ua) && (a.version = parseFloat(a.ua.match(/rv:([0-9]{1,}[\.0-9]{0,})/)[1].replace(/[^0-9\.]/g, "")))) : /Chrome/.test(a.ua) ? (a.browser = "Chrome", a.version = parseFloat(a.ua.split("Chrome/")[1].split("Safari")[0].replace(/[^0-9\.]/g, ""))) : /Opera/.test(a.ua) ? (a.browser = "Opera", a.version = parseFloat(a.ua.split("Version/")[1].replace(/[^0-9\.]/g, ""))) : /Kindle|Silk|KFTT|KFOT|KFJWA|KFJWI|KFSOWI|KFTHWA|KFTHWI|KFAPWA|KFAPWI/i.test(a.ua) ? (a.mobile = "Kindle", /Silk/i.test(a.ua) ? (a.browser = "Silk", a.version = parseFloat(a.ua.split("Silk/")[1].split("Safari")[0].replace(/[^0-9\.]/g, ""))) : /Kindle/i.test(a.ua) && /Version/i.test(a.ua) && (a.browser = "Kindle", a.version = parseFloat(a.ua.split("Version/")[1].split("Safari")[0].replace(/[^0-9\.]/g, "")))) : /BlackBerry/.test(a.ua) ? (a.browser = "BlackBerry", a.version = parseFloat(a.ua.split("/")[1].replace(/[^0-9\.]/g, ""))) : /PlayBook/.test(a.ua) ? (a.browser = "PlayBook", a.version = parseFloat(a.ua.split("Version/")[1].split("Safari")[0].replace(/[^0-9\.]/g, ""))) : /BB[0-9]{1,}; Touch/.test(a.ua) ? (a.browser = "Blackberry", a.version = parseFloat(a.ua.split("Version/")[1].split("Safari")[0].replace(/[^0-9\.]/g, ""))) : /Android/.test(a.ua) ? (a.browser = "Android", a.version = parseFloat(a.ua.split("Version/")[1].split("Safari")[0].replace(/[^0-9\.]/g, ""))) : /Safari/.test(a.ua) ? (a.browser = "Safari", a.version = parseFloat(a.ua.split("Version/")[1].split("Safari")[0].replace(/[^0-9\.]/g, ""))) : /Firefox/.test(a.ua) ? (a.browser = "Mozilla", a.version = parseFloat(a.ua.split("Firefox/")[1].replace(/[^0-9\.]/g, ""))) : /Nokia/.test(a.ua) && (a.browser = "Nokia", a.version = parseFloat(a.ua.split("Browser")[1].replace(/[^0-9\.]/g, "")))); if (a.browser) for (var b in a.browserArray) a[a.browserArray[b].toLowerCase()] = a.browser == a.browserArray[b]; $.extend(!0, $.browser = {}, a) } })(jQuery);

            

              var browser, srkWidth0, srkHeight0, expdWidth, expdHeight, dateMinDate, dateMaxDate;

       

              srkHeight0 = "0px";

              srkWidth0 = "0px";

              var expdWidth = "1200px";

              var expdHeight = "60px";

       

              var MinDate;

              var MaxDate;

       

              function loadPage() {

                  sheetName = getUrlParameter('sheetName');

                  resourceSheetName = getUrlParameter('resourceSheet');

                  console.log(sheetName);

                  console.log(resourceSheetName);

                  try {

                  getDataAndSetData(resourceSheetName,sheetName);

                  } catch (err){

                      console.log(err);

                  }

              }

       

              function getDataAndSetData(resourceSheet,targetSheet) {

              console.log('Entered getDataAndSetData');

                  var tableau = parent.parent.tableau;

                  var viz = tableau.VizManager.getVizs()[0];

                  var workBook = viz.getWorkbook();

                  var tableauURL = viz.getUrl();

                  var rSheet = workBook.getActiveSheet().getWorksheets().get(resourceSheet);

                  var tSheet = workBook.getActiveSheet().getWorksheets().get(targetSheet);

                  var options = {

                      maxRows: 0,

                      ignoreSelection: true,

                      includeAllColumns: false

                  }//~options

       

                  rSheet.getSummaryDataAsync(options)

                      .then(function (t){buildMenu(t);})

                      .then(viz.pauseAutomaticUpdatesAsync())

                      .then(tSheet.applyRangeFilterAsync("As Of Date", {min: new Date(MinDate), max: new Date(MaxDate)}))

                      .then(viz.resumeAutomaticUpdatesAsync());

      console.log('Exit getDataAndSetData');

       

              } //~getDataAndSetData

       

       

              function getUrlParameter(name) {

                  name = name.replace(/[\[]/, "\\\[").replace(/[\]]/, "\\\]");

                  var regexS = "[\\?&]" + name + "=([^&#]*)";

                  var regex = new RegExp(regexS);

                  var decodedUri = decodeURIComponent(window.location.href);

                  var results = regex.exec(decodedUri);

                  if (results === null) {

                      return "";

                  } else {

                      return results[1];

                  }

              } //~getUrlParameter

       

              function buildMenu(table)

              {

                  console.log("Entering build menu");

       

                  var columns = table.getColumns();

                  var data = table.getData();

            

                  function reduceToObjects(cols, data)

                  {

                      var fieldNameMap = $.map(cols, function (col) {

                              return col.getFieldName()

                          }

                      ); //~fieldNameMap

                      var dataToReturn = $.map(data, function (d) {

                              return d.reduce(function (memo, value, idx)

                              {

                                  memo[fieldNameMap[idx]] = value.value;

                                  return memo;

                              }, {});

                          }

                      ); //~dataToReturn

                      return dataToReturn;

                  } //~reduceToObjects

       

                  var niceData = reduceToObjects(columns, data);

                  //console.log(niceData);

       

                  var minDate = alasql('SELECT [As Of Date] as [MinDate] FROM ? ORDER BY [As Of Date] ASC limit 1', [niceData]);

                  var maxDate = alasql('SELECT [As Of Date] as [MaxDate] FROM ? ORDER BY [As Of Date] DESC limit 1', [niceData]);

       

                  var MinDate = new Date(minDate[0].MinDate);

                  var MaxDate = new Date(maxDate[0].MaxDate);

       

                  console.log(dateMinDate);

                  console.log(dateMaxDate);

                  console.log("Exit build menu");

              } //~buildMenu

       

              loadPage();

       

          </script>

      </head>

       

      <body>

      </body>