- 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.
HTML/CSS has a concept called z-index which determines how elements in a document should stack, if they are occupying the same place on the screen. The highest number will be visible, and then visibility goes down in descending order. In the framework I’m presenting here, I manage visibility with three layers: (1) Visible Tableau Viz (2) cover_div (3) Hidden Tableau vizzes. The cover_div has a defined background-color and always stays in z-index 2, while other DIVs are shifted around. This keeps the “Tableau load” screens hidden as much as possible, particularly when there is already a viz on the page.
The other reason for the cover_div is that while the Viz object continues to exist even if the DIV that contains it has been set so that the CSS visibility property is “hidden”, the Viz object does not always load for the first time properly if the containing DIV has a “hidden” visibility. So the ideal framework will load any new Viz in a DIV that is “visible” but covered by another DIV with a higher z-index, rather than in a “visibility: hidden;” DIV.
There are three objects in the main scope that are used:
- viz_info: Information necessary to load the Viz objects. This in an object so that the named keys can be used later as named keys in the other objects, to refer to the Viz objects themselves as well as the DIVs that contain them
- vizzes: Stores the actual Viz objects
- viz_div_z_index: Simple object to know what z_index DIVs should be set to. The actual changes to the z-index are enacted by the assign_viz_div_z_indexes function, so that it can be called by the onFirstInteractive callback function of each Viz whenever it is loaded or selected
The switch_dashboard function is where most of the work is done. It optimizes for efficiency, by determining whether a given Viz object has ever been created. If it already exists, it simply swaps it to the highest z-index level. If it is has not been created, it creates the necessary DIV and initializes the Viz object, all while it is hidden behind the existing loaded viz and/or the cover_div.
You can find the framework code on GitHub here. For those who aren’t used to GitHub, press the “Raw” button, then press CTRL-S so save the file to disk.