Tableau Custom Views gone wild on embedded solution

If you are reading this post your Tableau Custom Views seem to be behaving really weird under certain scenarios. This happens to be particularly common on Embedded Solutions that expose Custom Views on their UI.

In this post I’ll explain why this issue happens and how you can mitigate it.

If you aren’t familiar, a Custom View saves all of the filter choices, parameters, and other user actions. The next time this custom view is used, Tableau will recreate and fire the same query to pull data from the data source. Users can set their own default custom view and can even share their views with colleagues.

But sometimes you will notice that clicking on a custom view doesn’t really show the correct filter choices, but rather a different (and consistent) state of filter selections, initially you just won’t understand what’s going on.

The issue happens when the very first time the dashboard loads, it already contains filters. In this rather unique scenario, no matter which custom view a user activates, Tableau will always default back to render the initially loaded view state (i.e. with the filters set on load).

This can become particularly troublesome on Tableau Embedded Analytics solutions, because a very common user flow involves allowing users to set a number of filters on a given dashboard and then letting them navigate to a different page that contains a completely different dashboard, but the filters selections should be brought over. The developer of the portal will instantiate that new dashboard including the filters, and then when the users decide to click and activate a custom view, no matter how hard they try, it keeps showing the initial set of filters.

The same happens if you open a view with a URL that contains filters and parameters. If you then click to load a custom view, it will basically always show the initially loaded view instead, not really what the end-user expects :(

Here’s a quick demo of this issue in action with the solution for the embedded scenario:

So now it’s clear. You really can’t mix and match. You either load the view with filters and settle for not using Custom Views, or if you do need to expose custom views, you need to ensure the viz is loaded using the unique url of that custom view (and do not pass any filters on load either). You can’t simply start from a base url + url fiters and then use JS to activate a custom view.

Translating this into code, this is the kind of logic you need to implement when the user clicks to activate a custom view:

1) if viz exists, dispose it. e.g. if(viz) viz.dispose();

2) Then create a new viz with the specific Custom View URL, for example it would look something like this: url = "https://<my-tableau-url>/views/Regional/Obesity/71a44c2b-c921-489a-9b8f-ca37c9e10e19/v_Midwest"

To programatically get the list of Custom View URLs for that particular user in javascript, you can do the following (sample code for JS api v2):

In summary, you either load the viz:

a) with filters , using the base url

or

b) without filters, using the custom view url

Have you experienced this issue as well? If so, how did you overcome it?