Écriture de code d’intégration pour les vues
Le code d’intégration pour Tableau Server 2022.3 et versions ultérieures et Tableau Cloud a changé de manière à utiliser Embedding API v3. Pour obtenir des informations à jour sur l’intégration d’une vue avec l’Embedding API v3, consultez Intégration de base dans l' aide d’Embedding API. Les informations de cette rubrique concernent les versions antérieures d’Embedding (utilisant l’API Tableau JavaScript v1 et v2).
Si vous écrivez votre propre code d’intégration, vous pouvez suivre l’une des deux approches suivantes :
Utiliser JavaScript Tableau : Il s’agit de l’approche à privilégier. Utilisez le code d’intégration 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 d’intégration 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 pour Tableau Cloud dans le code d’intégration (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 d’intégration 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=/t/Sales' /> <param name='name' value='MyCoSales/SalesScoreCard/' /> <param name='tabs' value='yes' /> <param name='toolbar' value='yes' /></object></div>
Exemple Tableau Cloud :
<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='/t/Sales' /> <param name='name' value='MyCoSales/SalesScoreCard/' /> <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 Cloud, 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 Cloud :
<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.