Geek Answers Handbook

Saving and restoring the current state of the Tableau graph view through the javascript API

Problem:

How can I save and then restore the user state of a Tableau view through the javascript API?

Description:

I am working on a site where we currently allow any user to collaborate with a set of Tableau views in a PowerPoint online presentation for future reference. In our current implementation, the state of the Tableau graphs is not saved, and therefore the user must apply his or any desired filter, select worksheets, etc., while simultaneously holding the presentation - each time. This is what we would like to avoid now.

The easiest solution for this is to store and retrieve one of the Share links available through the bottom panel interface; these links contain the state of the current view, but so far we have not been able to do this: firstly, due to problems with the domain, we cannot just extract Share links from the iframe embed code; secondly, the workbook.getUrl () of the API method does not seem to include the state of the current view.

I am constantly looking at the workbook.rememberCustomViewAsync (name) and workbook.showCustomViewAsync (name) methods, which seem like a possible solution. However, I cannot get any reasonable results from either of these two methods, since both of them ultimately give unclear, uninformative 500 errors at startup.

Example file and error:

To better illustrate this problem, I created a minimal demo (snippet below) that tries to use the second method described above. When I open in Google Chrome, none of the two buttons ("save state" and "get state") does not work for me, and the following errors may appear in the Developer Tools (HTTP response and developer console output):

Http answer:

<br> 2015-11-11 16&#x3a;14&#x3a;17.916 &#x28;VkNpWQrCQaIAACQo2YYAAAPi,0,0&#x29;

Console Error:

 POST http://public.tableau.com/vizql/w/Book6_426/v/YRKE/save_customized_view/sessions/208A699D34E14708A2268AA10A827C99-0:0 500 (Internal Server Error)

Does anyone know how I can solve this problem, either by creating the above code example (described by the second method), or in any other way? Any help would be appreciated!

PS: The snippet simulator here will result in an Access-Control-Allow-Origin error. The file is also published here .

 <html> <head> <title>A simple Tableau API demo</title> <!--script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script--> <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script> <!--script type="text/javascript" src="https://online.tableau.com/javascripts/api/tableau_v8.js"></script--> <script type="text/javascript" src="https://online.tableau.com/javascripts/api/tableau-2.min.js "></script> </head> <body> <H2>Custom view storage demo</H2> <button id="remember-button"> Remember state 'test' </button> <button id="retrieve-button"> Retrieve state 'test' </button> <div id="viz-placeholder" style="width: 1000px; height: 1000px; display: block;"></div> <script> // Render tableau graph function initializeViz() { var placeholderDiv = document.getElementById("viz-placeholder"); var url = "https://public.tableau.com/views/Book6_426/YRKE"; var options = { width: placeholderDiv.offsetWidth, height: placeholderDiv.offsetHeight, hideTabs: true, hideToolbar: true, onFirstInteractive: function() { workbook = viz.getWorkbook(); activeSheet = workbook.getActiveSheet(); } }; viz = new tableau.Viz(placeholderDiv, url, options); } $(initializeViz) // Assign and set up button actions for storing and retrieving the custom view var customViewName = "test"; $('#remember-button').click(function() { console.log("Remembering: ", customViewName); // Try to save state, or print error viz.getWorkbook().rememberCustomViewAsync(customViewName).otherwise(function(err) { console.log("An error occured:"); console.log(err); }); }); $('#retrieve-button').click(function() { console.log("Retrieving: ", customViewName); // Try to retrieve state, or print error viz.getWorkbook().showCustomViewAsync(customViewName).otherwise(function(err) { console.log("An error occured:"); console.log(err); }); }); </script> </body> </html>
+7
javascript api tableau
source share
1 answer

Okey, so I was in contact with Tableau support, and they seemed to find the problem.

Apparently, some javascript API elements are only available for Tableau Online and Tableau Server - not Tableau Public.

In other words, the workbook.rememberCustomViewAsync('customViewName') function is not supported for graphs placed in Tableau Public - for example, used in the example above ( https://public.tableau.com/views/... ).

+2
source share

More articles:


All Articles