The problem:
How can I store - and then later retrieve - the custom state of a Tableau view through the javascript-API?
Description:
I am working on a site where we currently allow any user to collaborate a set of Tableau views into a PowerPoint-like online presentation for later use. In our current implementation, the state of the Tableau graphs are not stored, and the user therefore has to apply his or hers desired filter, select worksheets etc. while holding the presentation - every time. This is what we now would like to avoid.
The easiest solution for this would be to store and retrieve one of the "Share"-links accessed through the bottom bar interface; these links contains the state of the current view, but so far, we have not been able to do this: firstly, due to domain issues, we cannot simply fetch the Share-links from the embed-code iframe; and secondly, the API-method workbook.getUrl() does not seem to include the state of the current view.
I am currenty looking into the workbook.rememberCustomViewAsync(name) and workbook.showCustomViewAsync(name) methods, which seem like a possible solution. However, I cannot seem to get any sensible results from either of these two methods, as they both end up giving obscure, non-informative 500 errors when run.
An example file, and the errors:
To better illustrate this issue, I have created a minimal demo (snippet below) that attempts to use the second method described above. When opened in Google Chrome, neither of the two buttons ('save state' and 'retrieve state') work for me, and the following errors can be seen in the Developer Tools (the http response message and developer console output, respectively):
Http response:
<br>
2015-11-11 16:14:17.916
(VkNpWQrCQaIAACQo2YYAAAPi,0,0)
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 issue, either by making the provided code example work (the second method described), or through any other means? Any help would be appreciated!
PS: The snippet simulator here will cause a Access-Control-Allow-Origin error. The file has also been 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>
Back