Menu
I am trying to embed tableau object into razor page in blazor application but its not working it shows blank page and it will not log any error in browser console.
Below is the razor page.
Tableau.razor
@page "/tableau"
<h3>Tableau Example</h3>
<body>
<div class='tableauPlaceholder' style='width: 1700px; height: 950px;'>
<object class='tableauViz' width='1700' height='950' style='display:none;'>
<param name='host_url' value='https%3A%2F%2Ftableau.xxxxxx.com%2F' />
<param name='embed_code_version' value='3' />
<param name='site_root' value='/t/ITRD' />
<param name='name' value='AgileDEStrainingStatus/Agilemind-setTrainings' />
<param name='tabs' value='yes' /><param name='toolbar' value='yes' />
<param name='showAppBanner' value='false' />
<param name='filter' value='iframeSizedToWindow=true' /></object></div>
</body>
@code {
}
_host.cshtml
@page "/"
@namespace BlazorApplication.Pages
@addTagHelper *, Microsoft.AspNetCore.Mvc.TagHelpers
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>BlazorApplication</title>
<base href="~/" />
<link rel="stylesheet" href="css/bootstrap/bootstrap.min.css" />
<link href="css/site.css" rel="stylesheet" />
</head>
<body>
<app>
@(await Html.RenderComponentAsync<App>(RenderMode.ServerPrerendered))
</app>
<script src="_framework/blazor.server.js"></script>
<script type='text/javascript' src='https://tableau.xxxxxx.com/javascripts/api/viz_v1.js'></script>
</body>
</html>
What I am doing wrong?
Thanks
849
I can't replicate your exact sample as the URL for your data is obviously private, but I created a Tableau sample at https://github.com/conficient/TableauSample which uses the basic example from the Tableau website
I used Server-side Blazor as per your example and was able to load the sample. What I think you're missing in your code is that there is no initiation of the Tableau library? In the Tableau sample they invoke the setup function:
<body onload="initViz();">
You can't do this in Blazor since embedded JS isn't permitted but you can use JavaScript interop
I created a basic interop file to do this:
window.initViz = function (containerDiv, url) {
// containerDiv: element to update - use @ref in Blazor to get this
console.log("initViz called for " + url);
var options = {
hideTabs: true,
onFirstInteractive: function () {
console.log("Run this code when the viz has finished loading.");
}
};
console.log("initViz calling .Viz()");
var viz = new tableau.Viz(containerDiv, url, options);
}
I also changed the sample by passing an ElementReference rather than an id - if you're going to build a component in future this is good practice since you don't need to name the elements and can have multiple instances on a page.
I then amended the Index.razor page to invoke the initViz function in OnAfterRenderAsync.
113
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
