3 Replies Latest reply on Apr 7, 2018 9:30 AM by Kavin Abelak

    Embedding a dashboard with multiple tabs

    Stuardo Herrera

      I've embedded a dashboard with two tabs in a web page using the embed code provided by the share button, but it only shows one tab. I have already added the parameter: <param name="tabs" value="yes"/>, but it still doesn't work.

       

      The complete embed code looks like this:

       

      <script type='text/javascript' src='http://public.tableausoftware.com/javascripts/api/viz_v1.js'>

      </script><div class='tableauPlaceholder' style='width: 1364px; height: 855px;'>

          <noscript>

              <a href='#'>

                  <img alt=' ' src='http:&#47;&#47;public.tableausoftware.com&#47;static&#47;images&#47;MC&#47;MCT2PFCDJ&#47;1_rss.png' style='border: none' />

              </a>

          </noscript>

      <object class='tableauViz' width='1364' height='855' style='display:none;'>

          <param name='host_url' value='http%3A%2F%2Fpublic.tableausoftware.com%2F' />

          <param name='path' value='shared&#47;MCT2PFCDJ' / >

          <param name='toolbar' value='yes' />

          <param name='static_image' value='http:&#47;&#47;public.tableausoftware.com&#47;static&#47;images&#47;MC&#47;MCT2PFCDJ&#47;1.png' / >

          <param name='animate_transition' value='yes' />

          <param name="tabs" value="yes"/>

          <param name='display_static_image' value='yes' />

          <param name='display_spinner' value='yes' />

          <param name='display_overlay' value='yes' />

          <param name='display_count' value='yes' />

      </object><

      /div><div style='width:1364px;height:22px;padding:0px 10px 0px 0px;color:black;font:normal 8pt verdana,helvetica,arial,sans-serif;'><div style='float:right; padding-right:8px;'><a href='http://www.tableausoftware.com/public/about-tableau-products?ref=http://public.tableausoftware.com/shared/MCT2PFCDJ' target='_blank'>Obtener informaci´┐Żn sobre Tableau</a></div></div>

       

      Anyone have any thoughts on the cause and/or solution?

       

      Thanks,

       

      Stuardo

        • 1. Re: Embedding a dashboard with multiple tabs
          Natalia Alvarez

          Hi Stuardo, so far I've found 3 solutions:

          1.- As we talked previously, you could use a web page in a dashboard to link to the webpage given by tableau public (in this case, http://public.tableausoftware.com/views/CNE/AlertaInmediata?:embed=y#1 ), and then embed this "container dashboard" on your webpage.

          2.- Using the javascript API, you could either use buttons or leave the hideTabs parameter. Try copying the following code into an html:

          <html>

              <head>               

                  <script type="text/javascript" src="http://public.tableausoftware.com/javascripts/api/tableau_v8.debug.js"></script>               

              </head>

              <body>

                  <div class='container'>                       

                      <div class='row'>                              

                              <button onClick="switchView('Alerta Inmediata')">Alerta Inmediata</button><br>

                              <button onClick="switchView('Reporte Diario')">Reporte Diario</button>

            <div class='row'><h3 class='offset3 span7 pagination-centered' id='sheetName'></h3></div>

           

            <div id='viz'></div>

                          <script>

                              var vizDiv=document.getElementById('viz');

                              var vizURL= "http://public.tableausoftware.com/views/CNE/AlertaInmediata";

                              var options= {

                                  width:'1400px',

                                  height: '1000px',

                                  hideToolbar: true,

                                  hideTabs: false, //si se muestran o no las pestañas a otros viz

                                  onFirstInteractive: function(){

                                      document.getElementById('sheetName') .innerHTML=viz.getWorkbook().getActiveSheet().getName();

                                  }

                              };

                              viz= new tableauSoftware.Viz(vizDiv, vizURL, options);

                                                 

                              viz.addEventListener('tabswitch',function(event){

                                  document.getElementById('sheetName') .innerHTML=event.getNewSheetName();

                              });

                                     

                              function switchView(sheetName){

                                  workbook=viz.getWorkbook();

                                  workbook.activateSheetAsync(sheetName);

                              }                          

                          </script>

                      </div>

                  </div>

              </body>

          </html>

           

          Have yet to find how to do it with the code given by the Share button ><.

          Hope this helps =p

          • 2. Re: Embedding a dashboard with multiple tabs
            Michael Galarnyk

            Hey Stuardo,

             

            Here is a working example of embedding a dashboard with multiple tabs.

             

            sandiegohearts.github.io/index.html at master · sandiegohearts/sandiegohearts.github.io · GitHub

             

            The actual website it is embedded in is: https://sandiegohearts.github.io/

            One caution I tell people is that every link in html code needs to be https and not http or your browser might not allow the code.

            1 of 1 people found this helpful
            • 3. Re: Embedding a dashboard with multiple tabs
              Kavin Abelak

              Hi Everyone,

               

              Does anyone know how to get this to work on Tableau Server with token based Trusted Authentication?

               

              Thanks,

              Kav