0 votes
1 view
in BI by (13.2k points)

I am following https://tableau.github.io/webdataconnector/docs/wdc_multi_table_tutorial I want to get certain parameters from the user and create a URL accordingly. this is my code

<html>

<head>

    <title>USGS Earthquake Feed</title>

    <meta http-equiv="Cache-Control" content="no-store" />

    <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-1q8mTJOASx8j1Au+a5WDVnPi2lkFfwwEAa8hDDdjZlpLegxhjVME1fgjWPGmkzs7"

        crossorigin="anonymous">

    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js" type="text/javascript"></script>

    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js" integrity="sha384-0mSbJDEHialfmuBBQP6A4Qrprq5OVfW37PRR3j5ELqxss1yVqOtnepnHVP9aJ7xS"

        crossorigin="anonymous"></script>

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

    <script>

    (function () {

        // Create the connector object

        var myConnector = tableau.makeConnector();

        myConnector.getSchema = function (schemaCallback) {

            var cols = [{

                id: "MONTH",

                dataType: tableau.dataTypeEnum.string

            }, {

                id: "METRICKEY",

                alias: "METRICKEY",

                dataType: tableau.dataTypeEnum.string

            }, {

                id: "NUMERATOR",

                alias: "NUMERATOR",

                dataType: tableau.dataTypeEnum.float

            }, {

                id: "DENOMINATOR",

                dataType: tableau.dataTypeEnum.float

            }];

            var tableSchema = {

                id: "feed",

                alias: "Feed",

                columns: cols

            };

            schemaCallback([tableSchema]);

        };

        myConnector.getData = function (table, doneCallback) {

            var filters = tableau.filters;

            console.log("filters");

            console.log(tableau.filters);

            var projections = tableau.projections;

            var apicallUrl = 'test/?name=nb&filters=' + filters + '&projections=' + projections;

            console.log(apicallUrl);

            $.getJSON(apicallUrl, function (resp) {

                var feat = resp.DATA,

                tableData = [];

                // Iterate over the JSON object

                for (var i = 0, len = feat.length; i < len; i++) {

                    tableData.push({

                        "MONTH": feat[i].MONTH,

                        "METRICKEY": feat[i].METRICKEY,

                        "NUMERATOR": feat[i].NUMERATOR,

                        "DENOMINATOR": feat[i].DENOMINATOR

                    });

                }

                table.appendRows(tableData);

                doneCallback();

            });

        };

        tableau.registerConnector(myConnector);

        $(document).ready(function () {

            $("#submitButton").click(function () {

                var filters = $('#filters').val().trim();

                var projections = $('#projections').val().trim();

                tableau.filters = JSON.stringify(filters);

                tableau.projections = projections;

                tableau.submit();

            });

        });

    })();

    </script>

</head>

<body>

    <div class="container container-table">

        <div class="row vertical-center-row">

            <div class="text-center col-md-4 col-md-offset-4">

                <h2>Get Earthquake Data for a Time Range</h2>

                <form>

                    <div class="form-inline">

                        <label for="start-date-one" class="text-center">filters</label>

                        <span>&mdash;</span>

                        <label for="end-date-one">projections</label>

                    </div>

                    <div class="form-inline">

                        <input type="text" class="form-control" id="filters" value="">

                        <input type="text" class="form-control" id="projections" value="">

                    </div>

                </form>

                <button type="button" id="submitButton" class="btn btn-success" style="margin: 10px;">Get Earthquake Data!</button>

                <div id="errorMsg"></div>

            </div>

        </div>

    </div>

</body>

</html>

I am trying to get the user data tableau.filters and tableau.projections parameters, but when I try to read them in getting dat function the values are coming as undefined. any idea why is this happening ?

Is there any generic way to get user data and use it in some other function in jquery , which I can use here ?

projections and filters are the tex boxes whose value I am reading them in my code in $(document).ready. when I print tableau.filters and tableau.projection value in this function I get the values but when I print these values in getdata() it comes as undefined.

thanks 

1 Answer

0 votes
by (36.4k points)
  • It is a silly issue we have to write data to connectionData or connectionName parameter of tableau object.

$(document).ready(function() {

            $("#submitButton").click(function() {

              var urlObject = {

                  filters: $("#filters").val().trim(),

                  projections: $("#projections").val().trim(),

              };

                    tableau.connectionData = JSON.stringify(urlObject);

                    tableau.submit();

            });

        });

...