Insluitcode schrijven voor weergaven
De insluitcode voor Tableau Server 2022.3 en hoger en Tableau Cloud is gewijzigd om de Embedding API v3 te gebruiken. Zie Basis-insluiting in de hulpsectie van de Embedding API voor actuele informatie over het insluiten van een weergave met de Embedding API v3. De informatie in dit onderwerp is bedoeld voor eerdere versies van insluiting (met behulp van de Tableau JavaScript API v1 en v2).
Als u uw eigen insluitcode schrijft, kunt u een van de volgende twee benaderingen gebruiken:
Tableau JavaScript gebruiken: dit is de voorkeursaanpak. Gebruik de insluitcode die Tableau genereert als startpunt voor uw eigen code. Voeg objectparameters die de werkbalk, tabbladen en meer beheren toe of bewerk deze. De standaardinsluitcode, die afhankelijk is van een Tableau JavaScript-bestand, is ook de enige manier om de laadvolgorde van meerdere ingesloten weergaven te beheren.
De weergave-URL opgeven: sluit een weergave in met behulp van een iframe- of afbeeldingstag, waarbij de bron de URL is die u krijgt wanneer u in een weergave op Delen klikt en klik vervolgens op Link kopiëren. Dit kunt u doen als u JavaScript niet op uw website kunt gebruiken. Er kunnen zich ook situaties voordoen waarin u alleen een URL kunt opgeven.
Wanneer u een weergave insluit, moet u een breedte en hoogte definiëren waarin de weergave wordt weergegeven. Anders kiest de clientbrowser willekeurig een breedte en hoogte.
Opmerking: wanneer u de servernaam voor Tableau Cloud in de insluitcode moet opgeven (bijvoorbeeld om naar de locatie van de JavaScript API te verwijzen), gebruikt u de URL https://online.tableau.com.
Tableau JavaScript gebruiken
De volgende code toont een voorbeeld van de insluitcode die wordt gegenereerd wanneer u in een gepubliceerde weergave op Delen klikt. Speciale tekens in de parameter host_url
zijn URL-gecodeerd en die in de parameters site_root
en name
worden genoteerd als numerieke HTML-tekenreferenties.
Voorbeeld 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>
Voorbeeld 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>
De bron voor de tag <script>
is de URL voor het Tableau Server- en Tableau Cloud JavaScript-bestand viz_v1.js. Het JavaScript-bestand zorgt voor het samenstellen van de volledige URL van de weergave die aan uw gebruikers wordt weergegeven. De objectparameters name
en site_root
zijn de enige vereiste parameters; alle andere parameters zijn optioneel.
De weergave-URL opgeven
Hier is een voorbeeld van het insluiten van dezelfde weergave met behulp van een iframe, waarbij de bron de URL is die u krijgt wanneer u in een weergave op Delen klikt. Klik vervolgens op Link kopiëren.
Voorbeeld Tableau Server:
<iframe src="http://myserver/t/Sales/views/MyCoSales/SalesScoreCard ?:embed=yes&:tabs=yes&:toolbar=yes" width="800" height="600"></iframe>
Voorbeeld Tableau Cloud:
<iframe src="https://online.tableau.com/t/Sales/views/MyCoSales/SalesScoreCard ?:embed=yes&:tabs=yes&:toolbar=yes" width="800" height="600"></iframe>
De URL-parameter embed
is vereist. Optioneel kunt u nog parameters opnemen die onder andere de werkbalk en herstelopties beheren. U kunt ook filters aan de URL toevoegen waarmee u bepaalt welke specifieke data wordt weergegeven wanneer een weergave wordt geladen.
Tip: voeg bij het gebruik van deze methode het HTML-kenmerk allowfullscreen="true"
toe aan het iframe-element om de knop Volledig scherm in de weergave in te schakelen.