Écriture de code intégré

Si vous écrivez votre propre code intégré, vous pouvez suivre l'une des deux approches suivantes :

  • Utiliser JavaScript Tableau : Il s'agit de l'approche à privilégier. Utilisez le code intégré généré par Tableau comme point de départ pour votre propre code, tout en ajoutant ou modifiant les paramètres d'objets permettant de contrôler la barre d'outils, les onglets, etc. Le code intégré par défaut, qui repose sur un fichier JavaScript Tableau, constitue également l'unique manière de contrôler l'ordre de charge de plusieurs vues intégrées.

  • Spécifier l'URL de la vue : Intégrez une vue à l'aide d'un iframe ou d'une balise d'image, où la source est l'URL que vous obtenez lorsque vous cliquez sur Partager dans une vue, puis sur Copier le lien. Vous souhaiterez faire ceci si vous ne pouvez pas utiliser JavaScript sur votre site Web. Il peut aussi arriver que le seul élément que vous puissiez spécifier soit une URL.

Lorsque vous intégrez une vue, vous devez définir une largeur et une hauteur dans lesquelles la vue sera affichée. Si vous ne le faites pas, le navigateur du client choisira une largeur et une hauteur arbitrairement.

Remarque : lorsque vous devez fournir le nom du serveur Tableau Online dans le code intégré (par exemple pour pointer sur l'emplacement du code JavaScript API), spécifiez l'URL https://online.tableau.com.

Utiliser Tableau JavaScript

Le code suivant affiche un exemple de code intégré généré lorsque vous cliquez sur Partager dans une vue publiée. Les caractères spéciaux dans le paramètre host_url sont en encodage URL et ceux dans les paramètres site_root et name sont notés comme des références de caractères numériques HTML.

Exemple Tableau Server :

<script type='text/javascript' src='http://myserver/javascripts/api/viz_v1.js'></script> 
<div class='tableauPlaceholder' style='width:800; height:600;'> 
<object class='tableauViz' width='800' height='600' style='display:none;'>
   <param name='host_url' value='http%3A%2F%2Fmyserver%2F' /> 
   <param name='site_root' value=&#47;t&#47;Sales' /> 
   <param name='name' value='MyCoSales&#47;SalesScoreCard&#47;' /> 
   <param name='tabs' value='yes' /> 
   <param name='toolbar' value='yes' /></object></div>

Exemple Tableau Online :

<script type='text/javascript' src='https://online.tableau.com/javascripts/api/viz_v1.js'></script> 
<div class='tableauPlaceholder' style='width:800; height:600;'> 
<object class='tableauViz' width='800' height='600' style='display:none;'>
   <param name='host_url' value='https%3A%2F%2Fonline.tableau.com%2F' /> 
   <param name='site_root' value='&#47;t&#47;Sales' /> 
   <param name='name' value='MyCoSales&#47;SalesScoreCard&#47;' /> 
   <param name='tabs' value='yes' /> 
   <param name='toolbar' value='yes' />
</object>
</div> 

La source de la balise <script> est l'URL du fichier JavaScript Tableau Server et Tableau Online, viz_v1.js. Le fichier JavaScript file gère l'assemblage de l'URL entière de la vue affichée à l'intention de vos utilisateurs. Les paramètres d'objets name et site_root constituent les seuls paramètres requis. En effet, tous les autres sont facultatifs.

Spécifier l'URL de la vue

Voici un exemple d'intégration de la même vue à l'aide d'un iframe, où la source est l'URL que vous obtenez lorsque vous cliquez sur Partager dans une vue, puis sur Copier le lien.

Exemple Tableau Server :

<iframe src="http://myserver/t/Sales/views/MyCoSales/SalesScoreCard
?:embed=yes&:tabs=yes&:toolbar=yes" width="800" height="600"></iframe> 

Exemple Tableau Online :

<iframe src="https://online.tableau.com/t/Sales/views/MyCoSales/SalesScoreCard
?:embed=yes&:tabs=yes&:toolbar=yes" width="800" height="600"></iframe>

Vous devez spécifier le paramètre d'URL embed et vous pouvez éventuellement inclure des paramètres permettant de contrôler, entre autres, les options de rétablissement et de la barre d'outils. Vous pouvez également ajouter des filtres à l'URL permettant de contrôler l'affichage des données spécifiques lors du chargement d'une vue.

Astuce : lorsque vous utilisez cette méthode, ajoutez l'attribut HTML allowfullscreen="true" à l'élément iframe pour activer le bouton Plein écran dans la vue.

Merci de vos commentaires !