Back

Explore Courses Blog Tutorials Interview Questions
0 votes
1 view
in BI by (17.6k points)

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>

1 Answer

0 votes
by (47.2k points)
  • Some elements of the javascript-API are only available for Tableau Online and Tableau Server but not for Tableau public

  • 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/...).
Welcome to Intellipaat Community. Get your technical queries answered by top developers!

28.4k questions

29.7k answers

500 comments

94.1k users

Browse Categories

...