Escritura de código para insertar vistas
El código para insertar de Tableau Server 2022.3 y versiones posteriores y Tableau Cloud ha cambiado para usar la API de inserción 3. Para obtener información actualizada sobre cómo insertar una vista con la API de inserción 3, consulte Inserción básica en la ayuda de la API de inserción. La información de este tema es para versiones anteriores de inserción (usando la API de JavaScript de Tableau 1 y 2).
Si escribe su propio código de incrustación, puede considerar uno de dos enfoques:
Use Tableau JavaScript: Éste es el enfoque preferido. Usar el código de incrustación que genera Tableau como punto de partida de su propio código y agregar o editar parámetros de objeto que controlan las barras de herramientas, las pestañas, etc. El código incrustado predeterminado, el cual depende del archivo de Tableau JavaScript, también es la única forma de controlar el orden de carga de múltiples vistas incrustadas.
Especifique la URL de la vista: inserte una vista utilizando una categoría iFrame o de imagen, donde el origen es la URL que obtiene al hacer clic en Compartir en una vista y, a continuación, en Copiar enlace. Si no puede usar JavaScript en el sitio web, es posible que quiera hacer esto. Es posible que en algunos casos solo pueda especificar una dirección URL.
Al incrustar una vista, se debe definir una anchura y una altura que se usarán para mostrar la vista. De otro modo, el navegador del cliente usará una anchura y una altura arbitrarias.
Nota: Si necesita especificar el nombre del servidor para Tableau Cloud en el código de incrustación (por ejemplo, para indicar la ubicación de la API de JavaScript), especifique la URL https://online.tableau.com.
Usar Tableau JavaScript
En el siguiente código se muestra un ejemplo de código de incrustación generado al hacer clic en Compartir en una vista publicada. Los caracteres especiales del parámetro host_url
tienen codificación URL, mientras que los de los parámetros site_root
y name
se escriben como referencias de caracteres numéricos HTML.
Ejemplo de 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>
Ejemplo 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 fuente de la categoría <script>
es la URL del archivo JavaScript de Tableau Server y Tableau Cloud, viz_v1. El archivo JavaScript manipula el ensamblado de la dirección URL completa de la vista que se muestra a sus usuarios. Los parámetros de objeto name
y site_root
son los únicos parámetros requeridos; todos los demás parámetros son opcionales.
Especificar la URL de la vista
A continuación se muestra un ejemplo de cómo insertar la misma vista mediante un iFrame; el origen es la URL que se obtiene al hacer clic en Compartir en una vista y, a continuación, en Copiar enlace.
Ejemplo de Tableau Server:
<iframe src="http://myserver/t/Sales/views/MyCoSales/SalesScoreCard ?:embed=yes&:tabs=yes&:toolbar=yes" width="800" height="600"></iframe>
Ejemplo 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>
El parámetro URL embed
es obligatorio, pero es opcional incluir parámetros que controlen la barra de herramientas y reviertan opciones, entre otros. También puede agregar filtros a la URL que controla los datos específicos que se muestran cuando se carga una vista.
Sugerencia: cuando utilice este método, añada el atributo HTML allowfullscreen="true"
al elemento iFrame para habilitar en la vista el botón Pantalla completa.