3

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='&#47;t&#47;ITRD' />
            <param name='name' value='AgileDEStrainingStatus&#47;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

arjun kr
  • 823
  • 1
  • 8
  • 22
  • For how to invoke js,you could refer to:https://learn.microsoft.com/en-us/aspnet/core/blazor/javascript-interop?view=aspnetcore-3.0 – Rena Oct 24 '19 at 08:00
  • @Rena I have already read the doc,but I dint get the idea since we are not manually calling javascript function. – arjun kr Oct 25 '19 at 07:12
  • I assume you see the page and the `div` and `object` tags are rendered? Did you use devtools to check for any 404 or 500 errors in the network list? – Quango Nov 15 '19 at 09:42
  • @Quango There was not errors in console or networking list. – arjun kr Nov 18 '19 at 13:32

1 Answers1

2

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.

Demo

Quango
  • 12,338
  • 6
  • 48
  • 83