Custom Widget : How to Fetch Tulip Table For Making Charts In JS

Support, Troubleshooting, & Help
1

How do we fetch the Tulip Table Record to Custom Widgets.
Is it possible to fetch the Tulip table / Table Records to custom widgets for making charts/graphs…?

2

Check out this widget, you will need to generate an API token, and add that to the js, but otherwise you should be good to go.

Screen_Recording_2023-07-19_at_11_47_42_AM_AdobeExpress (1)

customWidget-Custom Table Viewer - select multiple rows No Keys.json (5.0 KB)

Pete

2 Likes
3

Hi Pete,

Do you have it on the roadmap to include this feature without API tokens? (We have restriction to use them)

BR
Szabolcs

4

Pete, Thanks a ton for solving the issue.

5 
displayData();

const colsToHide = [];
let selected = [];



async function callAPI() {
  //console.log("in fetch machine data")
  const authorizationBasic =
    "apikey.2_xxxxxxxxxx";

  let myHeaders = new Headers();
  myHeaders.append("Accept", "application/json");
  myHeaders.append("Authorization", "Basic " + authorizationBasic);
  myHeaders.append(
    "Content-Type",
    "application/x-www-form-urlencoded; charset=UTF-8"
  );

  const myInit = {
    method: "GET",
    headers: myHeaders,
    mode: "cors",
    cache: "default"
  };

  let myRequest = new Request(
    `https://{instanceurl}.tulip.co/api/v3/tables/{tableid}/records?limit=100`
  );

  const response = await fetch(myRequest, myInit);
  const data = await response.json();
  return data;
}

@Pete_Hartnett do I have this right? is the Secret go anywhere in the js or just the key?

6

Hello Jordan,

Hope you’re doing very well. Thank you for your support and for sharing your code.

I want to say that with the API key we will need the functionality code for the secret key in JavaScript.

In addition. I’ll tell you if it works without a secret key. I will try to implement your ideas in my code if it runs without any bugs or errors, and by running it we are able to bring the table to a custom widget then it will be really economical and if it happens then I will let you know.

Regards,
Dushyant Deshwal

7

Hey Pete, Thanks for providing us the running product. It would be a great help if you can share the code you wrote in HTML.

9 
 <head>

  <body>
  <div id="body"></div>
  </body>
 
  <script>
             callAPI();

const colsToHide = [];
let selected = [];



async function callAPI() {
//   console.log("in fetch machine data")
  const authorizationBasic =
    "apikey.2_xxxxxxxxxx";


  let myHeaders = new Headers();
  myHeaders.append("Accept", "application/json");
  myHeaders.append("Authorization", "Basic " + authorizationBasic);
  myHeaders.append(
    "Content-Type",
    "application/x-www-form-urlencoded; charset=UTF-8"
 
  );

  const myInit = {
    method: "GET",
    headers: myHeaders,
    mode: "cors",
    cache: "default"
  };

  let myRequest = new Request(
    `https://xxxxxx.tulip.co/api/v3/tables/xxxxxxxx/records?limit=10`
  );

  const response = await fetch(myRequest, myInit);
  const data = await response.json();
  return data;
  console.log("data")

}
document.getElementById("body").value=data
  </script>
 
       
        </head>

This code is not working properly & even I’m not getting data in console. Can you tell me where I’m making mistake or share the correct code?

10

Did you ever figure out a solution to get this working. I think you need to use the Auth Header instead of the API key from the API token.

However, even using that header I still do not get any return data.

@Pete_Hartnett I’m trying to follow along with using your widget. I added in my Auth Header starting with the “YXBpa…” portion but still having issues receiving/displaying data from the table. Not sure if there is a step that I missed.

11

Yeah you need to create a BOT & then create an API to retrieve data from tulip table