1 Reply Latest reply on Apr 25, 2018 3:01 PM by Patrick A Van Der Hyde

    consuming user data in tableau WDC

    Bhavesh Joshi

      Hi, I am following https://tableau.github.io/webdataconnector/docs/wdc_multi_table_tutorial I want to get the certain parameters from 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]);

              };

       

       

              // Download the data

              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);

       

       

              // Create event listeners for when the user submits the form

              $(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 get dat function the values are coming as undefined. any idea why is this happening ? thanks