Écrire du code d’intégration pour les vues
Le code incorporé pour Tableau Server 2022.3 et versions ultérieures et Tableau Cloud a été modifié pour utiliser l’API d’intégration v3. Pour obtenir des informations à jour sur l’intégration d’une vue avec l’API d’intégration v3, consultez la section Intégration de base dans l’aide de l’API d’intégration. Les informations de cette rubrique concernent les versions antérieures de l’incorporation (utilisant l’API Tableau JavaScript v1 et v2).
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 Cloud 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=/t/Sales' /> <param name='name' value='MyCoSales/SalesScoreCard/' /> <param name='tabs' value='yes' /> <param name='toolbar' value='yes' /></object></div>
Exemple de 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 de 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.
Conseil : 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.