2 Replies Latest reply on Jun 17, 2019 10:11 AM by Khalil Itani

    Creating a connector with JSONP

    Peter Sonenstein

      Hi!  I need some help understanding the flow of creating a WDC using JSONP to get around the CORS issue with a host I don't control.  I have done the tutorials and looked through the examples, and while my coding skills are rusty at best, I am having trouble putting all the pieces together.  Here are the details:

       

      I am trying to connect to a Zoho Creator database.  I have confirmed (via Postman) that the Zoho REST API supports a callback parameter.

      I have also confirmed (by putting it into a script tag in the head of an otherwise blank HTML page) that the JavaScript from the JSOP example found here delivers data without a CORS issue:

       

      var scriptTag = document.createElement('script');

      scriptTag.src = "https://creator.zoho.com/api/json/myapplication/view/My_Report?authtoken=myauthtoken&scope=creatorapi&zc_ownername=myownername&callback=myCBFunction";

      document.getElementsByTagName('head')[0].appendChild(scriptTag);

       

      So far so good.

       

      Now I am trying to integrate this into my WDC JS file, which is where I get confused.  I know I'm going to start with:

       

      (function() {

          // Create the connector object

          var myConnector = tableau.makeConnector();

       

          // Define the schema

          myConnector.getSchema = function(schemaCallback) {...mySchema...};

          schemaCallback([tableSchema]);

          };

          tableau.registerConnector(myConnector);

       

      Normally, my next step would be to run the getData method for the connector:

       

      myConnector.getData = function(table, doneCallback) {

       

      But how do I integrate the callback function (in this case myCBFunction) into this?  And what tasks does it need to perform?  I am guessing it needs to parse the JSONP into an object that it can hand to the getData function somehow? 

       

      And where do I put the JavaScript from the JSOP example that gets the data from the server?  Not sure how the flow/scope applies here.  It is going to call the callback function (again, myCBFunction) directly, so I would think it comes after the callback function has been defined.  Maybe at the very end of the WDC JS file?

       

      I have searched all over for some example of this kind of code being implemented in a WDC but come up empty-handed.  The StandardConnectionsExample seems to use JSONP but uses a jquery/AJAX method rather than the one I am trying to use.  I tried that method, but still had CORS issues.

       

      I am guessing that because the answer to my question is so obvious no one has thought to post an example like this.  Any thoughts or explanations would be GREATLY appreciated.  Thank you!

        • 1. Re: Creating a connector with JSONP
          Peter Sonenstein

          Just an update - I figured this out.

           

          Here's some pseudocode to help others in the same situation, especially those using the ZOHO REST API which seems to have CORS issues with AJAX calls forcing me to use this JavaScript 'injection' method:

           

          In the WDC JS file I declared an array variable and my callback function outside of the (function() {}); structure, so the file starts with:

           

          var returnedData = [];

          function myCallbackFunction(jsonpData) {

           

          Loop though the jsonpData object and push the elements onto the returnedData array.

           

          }

           

          And then back to the code from the example:

           

          (function() {

              // Create the connector object

              var myConnector = tableau.makeConnector();

           

              // Define the schema

              myConnector.getSchema = function(schemaCallback) {...mySchema...};

              schemaCallback([tableSchema]);

              };

           

          myConnector.getData = function(table, doneCallback) {

               table.appendRows(returnedData);

               doneCallback();

          };

          tableau.registerConnector(myConnector);

           

          And then the code to inject my callback function call with the JSONP data:

           

          var scriptTag = document.createElement('script');

          scriptTag.src = "https://creator.zoho.com/api/json/myapplication/view/My_Report?authtoken=myauthtoken&scope=creatorapi&zc_ownername=myownername&callback=myCBFunction";

          document.getElementsByTagName('head')[0].appendChild(scriptTag);

           

          And then the example code that creates the event listener for the submit button and close out the function call.

           

          Hope this saves someone some time!

          • 2. Re: Creating a connector with JSONP
            Khalil Itani

            Could you message me to elaborate on this?

             

            I cannot seem to figure out what the syntax of the CB function should be when you write:

             

            function myCallbackFunction(jsonpData) {

             

            Loop though the jsonpData object and push the elements onto the returnedData array.

             

            }

             

             

            Ideally I was hoping to get a copy of your code and adapt it to my needs

            Thanks