3 Replies Latest reply on Oct 11, 2016 1:32 PM by Trey Askew

    Web data connector for Montage using jsonp

    Parul Panchal

      Hi all,

       

      I have developed below code to make Tableau connect to Montage Health Care solution data, I can see that connection is successfully done and I can see Organization dataset retrieved in my jsonpCallback function in Console, but somehow could not load data, I am new programmer, I get "js:264 Script error.   file:    line: 0", can you please help me out Thanks. Below is the code, I have just kept the dummy url here.

       

       

      {function () { 

      var myConnector = tableau.makeConnector();

          myConnector.getSchema = function (schemaCallback)
      {
        var cols = [
              { id : "Organization", alias : "Org", dataType : tableau.dataTypeEnum.string },
              { id : "Provider", alias : "Reporting Provider", dataType : tableau.dataTypeEnum.string },

           ];

          var tableInfo =
      {
              id : "Montage",
              alias : "Montage data",
              columns : cols
          };

          schemaCallback([tableInfo]);

          };

          myConnector.getData = function (table, doneCallback)
      {


           var head = document.head;
           var script = document.createElement("script");


      script.setAttribute("src", "http://test-test.test.test/api/v1/organization?callback=jsonpCallback");


            head.appendChild(script);

       

         

      var jsonpCallback = function(jsonpdata)
        {

       

          var feat = jsonpCallback.feat
                      tableData = [];
                  for (var i = 0, len = feat.length; i < len; i++) {
                      tableData.push({
                          "organization": feat[i].organization
                      });
                  }

                  table.appendRows(tableData);
          }
        
      doneCallback();
      }

      tableau.registerConnector(myConnector);

      $(document).ready(function(){
        $("#submitButton").click(function() {
          tableau.connectionName = 'Montage';
      tableau.submit();

        });
      });
      })();

        • 1. Re: Web data connector for Montage using jsonp
          Trey Askew

          The first thing I see is an unmatched {. Which is incorrect anyways as you should be starting with a (.

           

          (function () {

           

          this is closed by the last line....

           

          }) ();

           

          Small typo but let's start there and see if that changes things.

          The next thing you'll run into is an extra comma in your column definition.

            var cols = [

                  { id : "Organization", alias : "Org", dataType : tableau.dataTypeEnum.string },

                  { id : "Provider", alias : "Reporting Provider", dataType : tableau.dataTypeEnum.string },    <------- you don't need this comma

               ];

           

          After that, you're going to have to fix your getData function which is not going to work.

           

          I recommend you revisit the documentation and look at some of the Examples that come with the simulator. The first earthquake one should get you going.

          • 2. Re: Web data connector for Montage using jsonp
            Parul Panchal

            Hi Trey,

             

            Thank you for the response, I have fixed both the syntax error point by you, now my code is as seen below, but the output that I get is "No Results Found". I cannot call Montage Data through json , it gives me CORS error, that's why as a work around I have used ajax(). Please advise.

             

            (function() {

            var myConnector = tableau.makeConnector();
            myConnector.getSchema = function (schemaCallback)
            {
              var cols = [
                    { id : "Organization", alias : "Org", dataType : tableau.dataTypeEnum.string },
                    { id : "Provider", alias : "Reporting Provider", dataType : tableau.dataTypeEnum.string }

                 ];

                var tableSchema =
            {
                    id : "Montage",
                    alias : "Montage data",
                    columns : cols
                };

                schemaCallback([tableSchema]);

                };

            myConnector.getData = function(table, doneCallback) {

                  var xhr = $.ajax({
                      url: "http://test-test.test.local/api/v1/organization/?format=jsonp",
                      dataType: 'jsonp',
                      success: function (data)
                {
                          if (data.responseText) {    
                  tableau.log("Connection done");
                     }
                          else {
                              tableau.abortWithError("No results found");
                 }
               
                      },
                      error: function (xhr, ajaxOptions, thrownError) {
                          // If the connection fails, log the error and return an empty set.
                          tableau.log("Connection error: " + xhr.responseText + "\n" +
                                       thrownError);
                          tableau.abortWithError("Error while trying to connect to Montage.");
                      }
                  });
               doneCallback();
              };

            tableau.registerConnector(myConnector);

              $(document).ready(function() {

                  $("#submitButton").click(function() {
                tableau.submit();
                  });
              });
             
             
              })();

            • 3. Re: Web data connector for Montage using jsonp
              Trey Askew

              Good to hear. CORS is a necessary evil I suppose but not easy for javascript to deal with. You have a few options:

               

              1. Enable CORS requests on the web server hosting the url you are trying to get data from.
                1. Doubtful this will work so...
              2. Place your javascript on the same webserver to eliminate the cross origin issue.
                1. Equally unlikely that you have access so...
              3. Write a helper page in something like php (asp, ruby, python, etc) that will make the call for you outside of javascript and return the results
                1. This you can control on your side

               

              I'm sure there are other ways but that was my thought process when I ran into the issue and I ended up with choice #3. Easiest to work with and control. Added bonus is you can do all your authentication in that page and keep things like saved passwords out of javascript which is visible in a browser.

              1 of 1 people found this helpful