如何通过javascript-API存储 – 然后检索 – Tableau视图的自定义状态?
描述:
我正在开发一个网站,我们目前允许任何用户将一组Tableau视图协作到类似PowerPoint的在线演示文稿中供以后使用.在我们当前的实现中,Tableau图的状态不会被存储,因此用户必须在每次持有演示文稿的同时应用他或她的所需过滤器,选择工作表等.这是我们现在想要避免的.
对此最简单的解决方案是存储和检索通过底栏界面访问的“共享”链接之一;这些链接包含当前视图的状态,但到目前为止,我们无法做到这一点:首先,由于域问题,我们不能简单地从嵌入代码iframe中获取Share-links;其次,API方法workbook.getUrl()似乎不包括当前视图的状态.
我目前正在研究workbook.rememberCustomViewAsync(name)和workbook.showCustomViewAsync(name)方法,这看起来像是一种可能的解决方案.但是,我似乎无法从这两种方法中得到任何明智的结果,因为它们最终都会在运行时产生模糊的,无信息的500错误.
为了更好地说明这个问题,我创建了一个最小的demo(下面的代码段),尝试使用上述第二种方法.在Google Chrome中打开时,两个按钮(“保存状态”和“检索状态”)都不适用于我,并且可以在开发人员工具中看到以下错误(分别是http响应消息和开发人员控制台输出):
Http响应:
- <br>
- 2015-11-11 16:14:17.916
- (VkNpWQrCQaIAACQo2YYAAAPi,0)
控制台错误:
- POST http://public.tableau.com/vizql/w/Book6_426/v/YRKE/save_customized_view/sessions/208A699D34E14708A2268AA10A827C99-0:0 500 (Internal Server Error)
有没有人知道如何解决这个问题,或者通过提供代码示例(所描述的第二种方法),或通过任何其他方式?任何帮助,将不胜感激!
PS:此处的片段模拟器将导致Access-Control-Allow-Origin错误.该文件也已于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>
解决方法
显然,javascript-API的某些元素仅适用于Tableau Online和Tableau Server,而不适用于Tableau Public.
换句话说,Tableau Public托管的图形不支持函数workbook.rememberCustomViewAsync(‘customViewName’) – 例如上面示例中使用的图形(https://public.tableau.com/views / …) .