A minor annoyance that can crop up with Tableau dashboards is the inability for an “apply all” filters at once button. As a result, you must wait for the dashboard to load after applying each filter. Granted, Tableau is not designed to be a platform that gives you 100 filter options and then returns a big table of your selections, there are times when you need to set filter values up front and just want to be able to apply them all at once.
This is one idea for accomplishing this in Tableau with the javascript API. Note that, with this solution, you are losing the “only relevant values” option that you can leverage when using default Tableau filters.
There are two ways to go about this. One would be to load the filter values into the webpage straight from the database. My guess is this would be faster, but is not a method that will be covered in this post. The second, which we will discuss here, is pulling the filter values from the Tableau dashboard and then applying them to the same dashboard. In practice, you would probably want to create a dashboard that had one, very simple sheet with every filter a user might want (so that it loads quickly) and your “real dashboard” which will wait for the filters we pass with the javascript API.
I am going to assume a working knowledge of the javascript API and Tableau and mainly discuss the topics at a high level. A working code sample can be found on fiddle, here.
The first section is capturing all the filter names and filter values applied to the dashboard:
The trick here is deciding how you want to handle the asynchronous call and the different types of filters (categorical vs continuous vs actions, etc). In this example, I am only handling dimensional/categorical filters.
Now that we have an object storing our filter names and values, we can build them into our webpage. I am using semantic UI because they have a really easy/nice way to handle multiple value selections, search, and it passes nicely into a viz options object:
Next comes the function that updates an object with the current filter selections:
Now that the filters are all being stored, we can pass that object to our viz. First, we want to do some validation to account for items that were added and removed from our filter selections – this can result in null values being passed which errors everything out:
Once we have cleaned the object up, we can now pass it into the viz.
**Again, I am using the same viz twice in this example, however, you would likely initiate this object with the “real”/desired dashboard after collecting all the values off of a simple dashboard.**
Now you have static, multi-select search filters where you can set all the values up front and pass them into the Tableau dashboard in one go; resulting in a much faster experience in an environment where you are making many filter selections. In this example, you can also delete the selections and pass nothing to reset the dashboard to a default view.
tableau it! 