Encapsulez vos dashboards Tableau !

Partager cet article

Vous aimez Tableau, mais vous voudriez surtout encapsuler vos analyses ou Tableaux de bords dans votre propre portail ou applicatif. C’est plutôt simple à faire à condition d’utiliser la bonne API (fournie par Tableau ).

Pour commencer, rendez-vous sur le site de Tableau :https://onlinehelp.tableau.com/current/api/js_api/en-us/JavaScriptAPI/js_api.htm

Tout y est … du tutoriel à l’aide (en passant par la référence de l’API). Bref, c’est le lieu incontournable qu’il faut aller voir en premier. D’ailleurs cet article n’a aucunement pour ambition de se substituer à ce lien mais plutôt de montrer rapidement comment obtenir un résultat.

Vous n’êtes pas un expert en Javascript ? c’est pas grave … suivez le guide et vous verrez comme c’est simple d’utiliser cette API.

Avant de commencer !

Utiliser la bonne API

Avant de songer à encapsuler un Tableau de bord, il faut bien évidemment qu’il existe ! et plus particulièrement qu’il soit déployé sur un serveur. Nous avons donc au moins trois possibilités :

  • Le Tableau de bord est publié sur Tableau Public
  • Le Tableau de bord est publié sur Tableau Online
  • Ou alors vous disposez de votre propre serveur (on-premise)

Selon le serveur sur lequel votre Tableau de bord il faudra faire appel à une API Javascript différente. Voici donc les appels Javascripts que vous devrez inclure selon votre cas d’usage :

Avec un serveur Tableau On Premise :

<script src="https://serveur_on_premise/javascripts/api/tableau-2.min.js"></script><

Avec un serveur Tableau Online:

<script src="https://online.tableau.com/javascripts/api/tableau-2.min.js"></script>

Avec un serveur Tableau Public:

<script src="https://public.tableau.com/javascripts/api/tableau-2.min.js"></script>

Tout va donc se passer via des appels à l’API Javascript. N’essayez donc pas de créer des IFRAME ! à la place nous incluerons dans notre page html des balises DIV qui vont interopérer avec le code de l’API Tableau .

Récupérer l’URL de votre dashboard

Il faut en effet récupérer l’URL de votre viz ou Tableau de Bord. Pour celà je vous conseille d’utiliser la fonction Partager qui vous permet de copier/coller le bon lien directement (Cf. ci-dessous) :

Voilà vous êtes prêt !

Etape N°1 : Encapsuler dans le plus simple appareil

Editons maintenant le code de la page HTML dans laquelle vous voulez encapsuler votre Tableau de bord. Ici je vais prendre une page blanche afin de ne pas poluer le code avec un site externe.

<!DOCTYPE html>
<html>

<head>
    <!-- a utiliser dans Tableau Online -->
	<script src="https://online.tableau.com/javascripts/api/tableau-2.min.js"></script>
    <script>
        var viz,workbook, activeSheet;
		
		function initViz() {
			myurl="https://eu-west-1a.online.tableau.com/t/benoitcayla/views/2019_1_JO_v2_6/Rsultats?iframeSizedToWindow=true&:embed=y&:showAppBanner=false&:display_count=no&:showVizHome=no";
            var containerDiv = document.getElementById("vizContainer"),
                url = myurl,
                options = {
                    hideTabs: true,
					hideToolbar: true
                };
            viz = new tableau.Viz(containerDiv, url, options);
        }
    </script>
</head>

<body onload="initViz();">
    <div id="vizContainer" style="width:800px; height:860px;"></div>
</body>

</html>

Vous voyez le code est vraiment simpliste :

  • J’ai bien sur la référence (cf. ci-dessous) à l’API
  • Ensuite un bloc Javascript permet de préciser les modalités d’appels à l’URL du Tableau de Bord (dans la variable url). A ce propos, vous n’avez qu’à changer ici l’URL du code avec celle que vous avez récupéré dans le chapitre précédent.
  • Pour finir le corps du fichier est simplifié à son extreme, néanmoins 2 choses sont indispensables:
    • L’appel à l’ouverture (onload) de la fonction qui initialise l’API avec le Tableau de bord
    • Le container du Tableau de bord qui n’est autre qu’une balise DIV

Etape N°2 : Ajouter de l’interaction

Notre Tableau de bord est maintenant encapsulé dans une page qui n’est pas gérée par la solution Tableau . Nous allons voir comment rajouter quelques boutons qui permettrons d’interagir avec le Tableau de bord depuis la page.

Commençons par quelque chose de simple et unidirectionnel et ajoutons les boutons standards d’export et de visualisation des données comme ci-dessous:

Rien de plus simple une fois de plus, pour cela nous allons ajouter 3 fonctions javascripts qui feront des appels directs à l’APi :

<head>
    <title>Basic Embed</title>
    <!-- a utiliser dans Tableau Online -->
	<script src="https://online.tableau.com/javascripts/api/tableau-2.min.js"></script>
    <!-- a utiliser dans Tableau Public -->
	<!-- <script type="text/javascript" src="https://public.tableau.com/javascripts/api/tableau-2.min.js"></script> -->
    <script type="text/javascript">
        var viz,workbook, activeSheet;
		function initViz() {
			myurl="https://eu-west-1a.online.tableau.com/t/benoitcayla/views/2019_1_JO_v2_6/Rsultats?iframeSizedToWindow=true&:embed=y&:showAppBanner=false&:display_count=no&:showVizHome=no";
            var containerDiv = document.getElementById("vizContainer"),
                url = myurl,
                options = {
                    hideTabs: true,
					hideToolbar: true
                };
            viz = new tableau.Viz(containerDiv, url, options);
        }
		
		function exportPDF() {
			viz.showExportPDFDialog();
		}      
		function exportImage() {
		  viz.showExportImageDialog();
		}      
		function exportData() {
		  viz.showExportDataDialog();
		}      
    </script>
</head>

<body onload="initViz();">
	<button onClick="exportPDF();">Export PDF</button>
	<button onClick="exportImage();">Export Image</button>
	<button onClick="exportData();">View data</button>
    <div id="vizContainer" style="width:800px; height:860px;"></div>
</body>

</html>

Il faut aussi bien sur rajouter les 3 boutons dans le code pur HTML.

Etape N°3: Ajoutons un filtre externe

Les boutons rajoutés sont bien pratique mais n’agissent pas sur les données elle-mêmes. Nous allons ajouter deux boutons qui permettrons d’ajouter un filtre sur les données et de le supprimer. Pour cela nous allons utiliser la méthode

activeSheet.getWorksheets().get(&amp;amp;quot;Nom de la Viz dans le TB&amp;amp;quot;).applyFilterAsync( &amp;amp;quot;Nom du champ&amp;amp;quot;,  &amp;amp;quot;Valeur du filtre&amp;amp;quot;,  tableau.FilterUpdateType.REPLACE);

Dans l’exemple ci-dessus nous ajoutons un bouton qui filtre sur la ville de Londres uniquement. Le bouton d’à coté annule ce filtre.

Voici le code :

Voilà qui devrait vous mettre le pied à l’étrier pour vous lancer dans l’embedded Analytic ! A noter que si – contrairement à cet exemple – vous utilisez un Tableau de bord sur Public vous risquez d’avoir certaines restrictions en matière d’interactions.

<!DOCTYPE html>
<html>

<head>
    <title>Basic Embed</title>
    <!-- a utiliser dans Tableau Online -->
	<script src="https://online.tableau.com/javascripts/api/tableau-2.min.js"></script>
    <!-- a utiliser dans Tableau Public -->
	<!-- <script type="text/javascript" src="https://public.tableau.com/javascripts/api/tableau-2.min.js"></script> -->
    <script type="text/javascript">
        var viz,workbook, activeSheet;
		
		function initViz() {
			// Sur Tableau Public
			// myurl="https://public.tableau.com/shared/87NFGWSKK";
			// Sur Tableau Online
			myurl="https://eu-west-1a.online.tableau.com/t/benoitcayla/views/2019_1_JO_v2_6/Rsultats?iframeSizedToWindow=true&:embed=y&:showAppBanner=false&:display_count=no&:showVizHome=no";
            var containerDiv = document.getElementById("vizContainer"),
                url = myurl,
                options = {
                    hideTabs: true,
					hideToolbar: true,
                    onFirstInteractive: function () {
                        workbook = viz.getWorkbook() ;
						activeSheet = workbook.getActiveSheet() ;
                    }
                };
            viz = new tableau.Viz(containerDiv, url, options);
        }
		
		function FilterSingleValue() {
			activeSheet.getWorksheets().get("Par JO").applyFilterAsync(
				"Ville JO", 
				"London",
				tableau.FilterUpdateType.REPLACE);
		}
		
		function clearFilter() {
			activeSheet.getWorksheets().get("Par JO").clearFilterAsync("Ville JO");
		}
		function exportPDF() {
			viz.showExportPDFDialog();
		}      
		function exportImage() {
		  viz.showExportImageDialog();
		}      
		function exportData() {
		  viz.showExportDataDialog();
		}      
		
    </script>
</head>

<body onload="initViz();">
	<button onClick="FilterSingleValue();">London Only</button>
	<button onClick="clearFilter();">Clear filter</button>
	<button onClick="exportPDF();">Export PDF</button>
	<button onClick="exportImage();">Export Image</button>
	<button onClick="exportData();">View data</button>
    <div id="vizContainer" style="width:800px; height:860px;"></div>
</body>

</html>

Comme d’habitude vous pouvez retrouver les codes dans Github.

Partager cet article

Laisser un commentaire

Votre adresse de messagerie ne sera pas publiée.

Ce site utilise Akismet pour réduire les indésirables. En savoir plus sur comment les données de vos commentaires sont utilisées.