2015-11-13 3 views
7

Das Problem:Speichern und Wiederherstellen von aktuellen Ansichtszustand eines Tableau Graph durch JavaScript-API

Wie kann ich speichern - und dann später wieder abrufen - den benutzerdefinierten Zustand eines Tableau Ansicht durch die Javascript-API?

Beschreibung:

ich auf einer Website arbeite, wo wir derzeit mit jedem Benutzer ermöglichen, eine Reihe von Tableau Ansichten in eine Powerpoint-ähnlichen Online-Präsentation für die spätere Verwendung zusammenzuarbeiten. In unserer aktuellen Implementierung wird der Status der Tableau-Graphen nicht gespeichert, und der Benutzer muss daher seinen oder ihren gewünschten Filter anwenden, Arbeitsblätter usw. auswählen, während er die Präsentation hält - jedes Mal. Dies möchten wir jetzt vermeiden.

Die einfachste Lösung hierfür wäre das Speichern und Abrufen eines der "Share" -Links, auf die über die untere Leiste zugegriffen werden kann. Diese Links enthalten den Status der aktuellen Ansicht, aber bisher konnten wir dies nicht tun: Erstens können wir aufgrund von Domain-Problemen nicht einfach die Share-Links aus dem Embed-Code-Iframe abrufen; und zweitens scheint die API-Methode workbook.getUrl() den Status der aktuellen Ansicht nicht zu enthalten.

I currenty Suche in den workbook.rememberCustomViewAsync (name) und workbook.showCustomViewAsync (name) Methoden, die wie eine mögliche Lösung zu sein scheinen. Allerdings kann ich von diesen beiden Methoden keine vernünftigen Ergebnisse erhalten, da beide bei der Ausführung obskure, nicht informative 500 Fehler ergeben.

Eine Beispieldatei, und die Fehler:

besser Um dieses Problem zu veranschaulichen, hat ich ein minimales demo (Snippet unten) erstellt, die das zweite oben beschriebene Verfahren zu verwenden versucht. Wenn sie in Google Chrome geöffnet werden, funktioniert keine der beiden Schaltflächen ('Status speichern' und 'Status abrufen') für mich, und die folgenden Fehler können in den Entwicklertools angezeigt werden (die HTTP-Antwortnachricht bzw. die Entwicklerkonsolenausgabe):

Http Antwort:

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

Console Fehler:

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

Wer weiß, wie ich dieses Problem lösen kann, entweder durch maki ng die zur Verfügung gestellten Codebeispiele (die zweite beschriebene Methode) oder auf andere Weise? Jede Hilfe wäre willkommen!

PS: Der Snippet-Simulator verursacht hier einen Access-Control-Allow-Origin-Fehler. Die Datei wurde auch veröffentlicht 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>

Antwort

2

Okey, so habe ich in Kontakt mit Tableau Customer Support gewesen, und sie scheinen das Problem gefunden zu haben.

Offenbar bestimmte Elemente der javascript-API ist nur für Tableau Online und Tableau Server - nicht Tableau Public.

Mit anderen Worten, die Funktion workbook.rememberCustomViewAsync('customViewName') wird nicht für Graphen unterstützt, die von Tableau Public gehostet werden - wie im obigen Beispiel (https://public.tableau.com/views/...).

+1

Hey, ich habe eine Frage. Ich weiß, dass benutzerdefinierte Ansichten in allen Dashboards in einer Arbeitsmappe gemeinsam genutzt werden. Gibt es eine Möglichkeit, eine benutzerdefinierte Ansicht von Dashboard1 von Workbook1 auf Dashboard2 von Workbook2 mit denselben Filtern anzuwenden? –

+0

@ DeepanshuKalra, ich fürchte, ich kann dir damit nicht helfen. Ich empfehle, dass Sie eine Frage in den offiziellen Support-Foren stellen. Sie haben mir schließlich geholfen! –

Verwandte Themen