JavaScript API

Embedding Multiple Tableau Views in a Single Page

The Tableau JavaScript API is flexible and lets you embed multiple views, each as its own Viz object, in a single page. You can use this for multiple purposes:

  • Having a “single page application” that just loads the correct Tableau Server view
  • Loading multiple Views at the same time, allowing you to build a “dashboard of dashboards”
  • Have a second workbook that stays hidden until called (possibly triggered by an action on the first that a JS API event listener listens for)
  • Do smooth constant refreshes, by having two Viz objects of the same view, and moving one behind the other until it is has fully refreshed, then swapping it out

What do you need to make any of these work? At minimum, some mechanism for identifying which Viz object is which. In most cases, you’ll also want to track what should be visible at any given time, and what should be on top.



Holy Sheets: Understanding the Tableau Server JavaScript API

I love the JavaScript API tutorial on Tableau’s site, but even though this is my day job, the JavaScript API Reference still takes me in circles sometimes before I’ve figured out exactly how to solve a specific problem. I’m going to share what I’ve learned over the years, both explanations and some code for solving common problems.

How did I find these things out? There is the API Reference, as well as the Concepts page, which both provide different views and examples. I’ve paired that with a lot of testing using Firefox with Firebug and Chrome’s developer tools. Often the best way to understand what is happening is to do console.log(object); on a particular variable and compare against the API Reference to understand exactly what class you are dealing with at that moment.


Setting Filter and Parameters Prior to Load using JavaScript API

Today I took a look at the updated Tableau JavaScript API documentation just for a quick reminder of some syntax, and noticed something I’d never seen before on this page.

“Academic Year” : “” … that seems to be a field name. I changed mine to see if I could set individual values:

options = {
hideTabs: true,
"Gender": "Men",
"College" : ["Arts & Sciences", "Communication"],
"YEAR([Date])" : [2009, 2010],
onFirstInteractive: function () {
console.log("Run this code when the viz has finished loading.");

and sure enough it worked. I’ve tested on 9.1, 9.2 and 9.3. Russell Christopher assures me this has always been possible, just never been documented. This means you can set the values for a filter prior to load, rather than loading the viz and then applying a FilterAsync action, which requires a reload. If you are setting the values of filters programmatically at load time, this could greatly improve your overall load times.

I’ve tested with Parameters as well — the same syntax works. I’m sure that as with URL parameters, you need your Tableau Parameter names to be distinct from any Field Names, otherwise Tableau will apply your value to filter the Field rather than changing the parameter. You can’t yet set continuous or relative date filters this way, but if you use parameters to make the date filter start and end dates, you can set the parameter values prior to load using this technique.

Note on Security: This mechanism is actually just a fast translation method to the existing URL parameters for filters and Tableau Parameters. It has all of the same limitations and definitely passes all the values across in the URL string of the GET request. So don’t ever use it to pass any values that should be secured or hidden.

CSS magic tricks with Embedded Tableau Server views

Tableau 9.2 is right around the corner and one of the biggest changes on the Server side will be an updated toolbar. There is now an Undo and Redo button, and everything has been rearranged in a logical manner. The buttons that appear or disappear based on permissions are now on the right. And all of the export and download buttons are now combined together into a Download drop down menu.

9_2 toolbar

Also, it’s gray. The toolbar has been white for a long time but it’s 100% gray in Tableau 9.2

What isn’t changing? The Download/Save As permission is still one single permission, so if you are exposing Tableau to the outside world and want to allow Web Edit but not Downloading, you’ll still need to hide the toolbar and recreate all of the functionality you want to enable. But with a little ingenuity, we can pinpoint exactly what we’d like to hide and really control what we keep and what we hide.


Using Tableau JavaScript API to Fill Parameter from a Selection

Tableau’s actions are very powerful for creating interactive visualizations, but there are a couple of common use cases that are not possible out of the box in Tableau Desktop.

  1. An Action cannot cause a Parameter to be filled with the results of that selection
  2. An Action from a Primary Data Source cannot be a Filter on a Secondary Data Source.

Using the JavaScript API, you can easily solve the first issue, and from there solve issue #2.

Potential use cases include geospatial calculations where a selected point can become the new reference longitude and latitude for the calculation, or when using data blended onto Custom Polygons.