Calling tableau javascript library

I wanted to embed tableau report in the app. Therefore i created an app with html template. In the properties -> custom html section i pasted the following lines

<center style="font-style:italic; color:#888; margin: 3em;">
  Tableau Report Should be displayed here
 <div id="vizContainer">
 </div> 
</center>
<script>
   var head = document.getElementsByTagName('head')[0];
   var script = document.createElement('script');
   script.onload = function() { 
     
   }
   script.type = 'text/javascript';
   script.src = 'https://public.tableau.com/javascripts/api/tableau-2.min.js';
   head.appendChild(script);
  
 function displaytableau()
 {
    var placeholderDiv = document.getElementById("vizContainer");

    var url = "https://public.tableau.com/views/WorldIndicators/GDPpercapita";
    var options = {
        width: "800px",
        height: "550px",
        hideTabs:true,
        hideToolbar: true,
       
        
    };
     // $(intializeViz);
    var viz = new tableau.Viz(placeholderDiv, url, options);
  
 }
 
function showJsAlert(message) {
  alert(message);
  return 42;
}
 
  
</script>

when the app is run I got the following error
ExternalError: TypeError: tableau.Viz is not a constructor at [Form1, line 17](javascript:void(0))

Can you please let us know the issue and how to fix this.

I don’t know anything about JS, but could you simply use the iFrame component that Meredydd shared, and set its url property to your tableau report?

1 Like

Good suggestion @alcampopiano.

Tableau requires you to add a couple of magic query parameters to your report’s URL (:showVizHome=no&:embed=true).

Here’s an example of doing that:

https://anvil.works/build#clone:LN2SILDYTJXSSX76=E4M6YGFJJG5YPBVPNKANP73T

The Iframe component has been dropped onto Form1, and I’ve set its url property to the URL of your Tableau report (by entering it into the correct place in the Properties window).

1 Like