How to Use Tableau WDC in a ReactJs app the correct way

Question

I keep getting this error ReferenceError: Can't find variable: Set file: http://localhost:1337/bundle.min.js line: 33098

It looks like window.tableau.getSchema() and myConnector.getData() have never been called. I add a log message, but it has never been executed. Solution from @redec is to add polyfill for react. But I still got error. Here is my html

    <!DOCTYPE html>
    <html>

    <head>
      <meta charset="UTF-8">
      <meta name="viewport" content="width=device-width, initial-scale=1.0">
      <meta http-equiv="X-UA-Compatible" content="ie=edge">
      <title>Dashboard</title>
      <link rel="shortcut icon" href="favicon.ico">
    </head>

    <body>
      <div id="app">
      </div>
      <script src="https://connectors.tableau.com/libs/tableauwdc-2.3.latest.js" type="text/javascript"></script>

  <script src="https://cdnjs.cloudflare.com/ajax/libs/babel-polyfill/7.2.5/polyfill.min.js"
      type="text/javascript"></script>
    </body>

    </html>

Here is the component that will display on Tableu WDC, the route will be enter via WDC on Tableu Desktop app is http://localhost:1337/tableau/wdc

    import React, { Component } from 'react';
class TableauWDC extends Component {
    constructor(props, context) {
        super(props, context);
        this.state = {
            isScriptLoaded: false
        };

    }
    componentDidMount() {
        // Create the connector object
        var myConnector = window.tableau.makeConnector();

        // Define the schema
        myConnector.getSchema = function (schemaCallback) {
            window.tableau.log("getSchema")
            var cols = [{
                id: "id",
                dataType: window.tableau.dataTypeEnum.string
            }, {
                id: "mag",
                alias: "magnitude",
                dataType: window.tableau.dataTypeEnum.float
            }, {
                id: "title",
                alias: "title",
                dataType: window.tableau.dataTypeEnum.string
            }, {
                id: "location",
                dataType: window.tableau.dataTypeEnum.geometry
            }];

            var tableSchema = {
                id: "earthquakeFeed",
                alias: "Earthquakes with magnitude greater than 4.5 in the last seven days",
                columns: cols
            };

            schemaCallback([tableSchema]);
        };

        // Download the data
        myConnector.getData = function (table, doneCallback) {
            window.tableau.log("getData")
            this.loadJSON('https://earthquake.usgs.gov/earthquakes/feed/v1.0/summary/4.5_week.geojson',
                function (data) {
                    var feat = data.features,
                        tableData = [];

                    // Iterate over the JSON object
                    for (var i = 0, len = feat.length; i < len; i++) {
                        tableData.push({
                            "id": feat[i].id,
                            "mag": feat[i].properties.mag,
                            "title": feat[i].properties.title,
                            "location": feat[i].geometry
                        });
                    }

                    table.appendRows(tableData);
                    doneCallback();
                },
                function (xhr) { console.error(xhr); }
            );
        };

        window.tableau.registerConnector(myConnector);
    }
    loadJSON(path, success, error) {
        var xhr = new XMLHttpRequest();
        xhr.onreadystatechange = function () {
            if (xhr.readyState === XMLHttpRequest.DONE) {
                if (xhr.status === 200) {
                    if (success)
                        success(JSON.parse(xhr.responseText));
                } else {
                    if (error)
                        error(xhr);
                }
            }
        };
        xhr.open("GET", path, true);
        xhr.send();
    }
    submit() {
        window.tableau.connectionName = "USGS Earthquake Feed"; // This will be the data source name in Tableau
        window.tableau.submit(); // This sends the connector object to Tableau
    }

    render() {
        return (
            <div style={{
                display: "flex",
                justifyContent: "center",
                alignItems: "center",
                height: "calc( 90vh - 65px)"
            }}>

                <button onClick={() => this.submit()} className="btn btn-success" >Get Earthquake Data!</button>
            </div>
        );
    }
}



export default TableauWDC;

I keep getting these errors.

A snippet from the error is below here

The web data connector has reported an unrecoverable error and cannot proceed. If the connector has reported details of the error, they are displayed in the pane below.
Script error. file: line: 0

redec · Accepted Answer · 2019-07-05T15:53:45.497

2

Unfortunately the browser that tableau uses is not es6 compliant so it is missing some es6 components that react needs (such as Set and Map)...so you need to polyfill them. Add this after your tableau <script> tag:

<script src="https://cdnjs.cloudflare.com/ajax/libs/babel-polyfill/7.2.5/polyfill.min.js" type="text/javascript"></script>�

Currently tableau uses an old version of QtWebKit, but rumors say they'll be switching to chromium within the next couple of releases.

It is also a little weird that your registration is being done from a click handler on a div? I would expect that to be done on componentDidMount so it is done as soon as the WDC loads (otherwise tableau will display a warning banner)

edited Jul 05 '19 at 15:53

answered Jul 05 '19 at 15:43

redec

577
2
13

Thank for your solution. About the registration, the thing is that I have dynamic url data, so for example: when user click a button, the data url will be different. – Winchester Jul 06 '19 at 11:36
I have added the polyfill and move the registration in componentDidMount, but I still got error, any ideas to solve it ? I have updated the post, please check it – Winchester Jul 06 '19 at 11:56
Hmmm I don't see anything obviously wrong, have you tried running it in the simulator? The simulator (with chrome devtools) gives much more useful error messages... do you have this project in a public repo that I could play with easily? – redec Jul 06 '19 at 16:31
I tried to run it in the simulator, it looks like using this.loadJSON doesn't work. I then use fetch and it works well with the simulator. I then tried with Tableau Desktop app for Mac version. I still encounter the same issue. I think it is still a matter of polyfill. I tried to make a reproduce with create-react-app and add polyfill, but now it prompts error about Unexpected token 'const' file. In brief, the simulator works well since I run it on chrome, but using the browser on Tableau Desktop app seems cause error. – Winchester Jul 07 '19 at 12:03
Ahh yes I see it, the "this.loadJSON" is referring to the wrong object...if you change that function to an arrow function it should work "myConnector.getData = (table, doneCallback) => {"...or if you want to use fetch instead you'll need to polyfill that too, as QtWebKit definitely doesn't have that – redec Jul 07 '19 at 16:07
Please have in mind that the Simulator does NOT simulate anything regarding the real world Tableau Desktop WebView. Its only good for checking your WDC registration and submit routines. Since the Simulator runs in your local browser (any browser) it does not resemble the technological base that Tableau Desktops WDC "runtime" does. – Ahab Oct 29 '19 at 13:03

score 1 · Answer 2 · answered Jul 25 '20 at 10:01

1

Starting with Tableau v2019.4, it is using QTWebEngine ~5.10 which supports ES6 so your code should work without any shims.

answered Jul 25 '20 at 10:01

Nick

4,002
4
30
41

This is great news, do you have a source for this information? I've had a hard time finding out the versions being used. – IanVS Oct 08 '20 at 21:48
1

https://tableau.github.io/webdataconnector/news/#/2019/11/05/wdc-webengine – Nick Oct 09 '20 at 01:20

How to Use Tableau WDC in a ReactJs app the correct way

2 Answers2