Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

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

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&#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 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>
like image 589
Tormod Haugene Avatar asked Nov 13 '15 15:11

Tormod Haugene


1 Answers

Okey, so I have been in contact with Tableau Customer Support, and they seem to have found the issue.

Apparently, certain elements of the javascript-API is only available for Tableau Online and Tableau Server - not Tableau Public.

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

like image 192
Tormod Haugene Avatar answered Nov 02 '22 22:11

Tormod Haugene