3 Replies Latest reply on Sep 26, 2017 2:00 PM by Steven Myers

    Use variable inside options when initializing viz?

    Robert Gentile

      Hello,

       

      I am using the Javascript API to embed a viz on my webpage and it is working fine.

       

      I need the ability to apply filters to this code. The filters will be passed in the URL to the webpage. I have javascript that reads the parameters from the url then builds a string of name value pairs that are stored in a variable.  I am trying to use this variable in options but the filters seem to be ignored when the viz is created.

       

      I think this might just be a javascript issue (i.e., not a Tableau Javascript API issue) but in the chance that someone else has already tried this, I thought I'd ask the question here.

       

      Here is my javascript that embeds the viz (works):

      var containerViz1 = document.getElementById("tableauViz1"); var url = "https://dev.blah.com/#/views/blah"; var options = {     hideToolbar: true,     onFirstInteractive: function () {       workbook1 = viz1.getWorkbook();          activeSheet1 = workbook1.getActiveSheet();                }            }; var viz1 = new tableau.Viz(containerViz1, url, options);

       

      Here is the same javascript with a filter added (works):

      var containerViz1 = document.getElementById("tableauViz1"); var url = "https://dev.blah.com/#/views/blah"; var options = {     hideToolbar: true,     "Site":"US-MN-Maplewood",     onFirstInteractive: function () {       workbook1 = viz1.getWorkbook();          activeSheet1 = workbook1.getActiveSheet();                }            }; var viz1 = new tableau.Viz(containerViz1, url, options);

       

       

      But when I put the filter in a variable the filter is no longer being applied (does not work):

      var filter = '"Site":"US-MN-Maplewood"'; var containerViz1 = document.getElementById("tableauViz1"); var url = "https://dev.blah.com/#/views/blah"; var options = {     hideToolbar: true,     filter,     onFirstInteractive: function () {       workbook1 = viz1.getWorkbook();          activeSheet1 = workbook1.getActiveSheet();                }            }; var viz1 = new tableau.Viz(containerViz1, url, options);

       

      note: for my testing I am just hard wiring the filter variable value.  The actual filter value would be something like "Site":"US-MN_Maplewood","Country":"United States","Region":"North"

       

      Is it possible to use a variable in var options{ }?  If so, how?

       

      Thank you for reading and have a great day!

       

      robertg

        • 1. Re: Use variable inside options when initializing viz?
          Steven Myers

          I haven't tried to set the filter in the manner you are attempting. However, in onFirstInteractive you can generate a custom applyFilterAsync to handle the the filtering passed in from your URL. Are you using the URL Object to pass your filters?

          • 2. Re: Use variable inside options when initializing viz?
            Robert Gentile

            Hello Steven,


            Thanks for taking the time to read and reply to my question.

             

            Here is the solution I have come up with (and it seems to be working so far):


            1. On page load I call a function that reads the browser's URL then creates an array containing the filter name and filter values.

            2. InitViz is called

            3. If any filters were passed in the URL, they get appended to the options object

            4. new tableau.Viz is called

             

            Here is the code:

             

            example URL: mypage.html?Site=SG-Singapore-Woodlands&Business=Corporate

             

            1. Get filters from URL - called on page load

             

            function getURLFilters() {

                filters = [];

                if ( location.search ) {

                    location.search.substr(1).split("&").forEach(function(item) {

                        // check if have name value pair without '=' eg. &Site because breaks filter.push(filter)

                        if ( item.indexOf("=") !== -1 ) {

                            var filter = item.split("=");

                            filters.push(filter);

                        }

                    })

                }

                // now initialize the views

                initViz();

            }

             

            2. initViz

             

            function initViz() {

                var containerViz_0A = document.getElementById("tableauViz_0A");

                var url = SERVERNAME + VIEWPATH;

                var options = {

                    width: containerViz_0A.offsetWidth,

                    height: containerViz_0A.offsetHeight,

                    hideTabs: true,

                    hideToolbar: true,

                    onFirstInteractive: function () {

                      workbook0a = viz_0A.getWorkbook();   

                      activeSheet0a = workbook0a.getActiveSheet();           

                    }

                };

                // determine if filters were passed in

                if ( 0 < filters.length ) {

                    var newOptions = appendFilters(options);         

                } else {

                    var newOptions = options;

                }

                // Create viz

                var viz_0A = new tableau.Viz(containerViz_0A, url, newOptions);

            }

             

            3. Append filters to options object

             

            function appendFilters(options) {

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

                    var filtername = filters[i][0];

                    var filtervalue = filters[i][1];

                    options[filtername] = filtervalue;

                }

                return(options);

            }

             

            As I mentioned this seems to be working fine (although we still have some hard testing to do).

             

            Your suggestion about using onFirstInteractive gave me a possible solution for another issue I am working on: how to apply a start and end date (also passed in via URL) to the view. I initially thought I might add the start and end dates to the options object, just like I am doing with the filters, but I think it may make more sense to use something like:

             

            worksheet.applyRangeFilterAsync("Date", {

                min: new Date(Date.UTC(2010, 3, 1)),

                max: new Date(Date.UTC(2010, 12, 31))

              });

             

            in onFirstInteractive.

             

            But I am noob in Tableau so I may be way off.

             

            Thanks again for your time and reply!

             

            robertg

            • 3. Re: Use variable inside options when initializing viz?
              Steven Myers

              Glad to hear the suggestion helped. If you think it went far enough to help you solve the problem, you might want to mark the question answered.