New RESTful API in Code Pages?
Hi, QB Folks! Anyone know if you can use the new API inside your Code Pages? I'm getting a CORS error when I try. I need to combine a few existing QB reports into a single table for reporting, ...
Forum Discussion
It is possible to access the API from a code page. I'm actually using it now to map results from user inputs of zip codes using Google's Distance Matrix API and the 'Query for data' QB API.
Another thing is that you're using jQuery with this call which uses the older 'XMLHttpRequest' API. It's likely that this is causing CORS error you're seeing. You can try using ES6 which uses the Fetch API. The Fetch API allows you to make no-cors requests. I noticed that you placed your script tags inside of your html <head> tags. You don't want to do that when you're writing JavaScript. Because JavaScript is asynchronous, in this case your jQuery, by placing it inside of your <head> tags, JavaScript will run before the html inside of the <body> tag and will throw errors. Try placing your <script> tags after your h2 and table tags inside of the <body> tag.
Here's a sample of the same request using the Fetch API:
------------------------------
AR
------------------------------
Another thing is that you're using jQuery with this call which uses the older 'XMLHttpRequest' API. It's likely that this is causing CORS error you're seeing. You can try using ES6 which uses the Fetch API. The Fetch API allows you to make no-cors requests. I noticed that you placed your script tags inside of your html <head> tags. You don't want to do that when you're writing JavaScript. Because JavaScript is asynchronous, in this case your jQuery, by placing it inside of your <head> tags, JavaScript will run before the html inside of the <body> tag and will throw errors. Try placing your <script> tags after your h2 and table tags inside of the <body> tag.
Here's a sample of the same request using the Fetch API:
<body>
<h2>Table will go here.</h2>
<table></table>
<script>
var headers = {
'QB-Realm-Hostname': 'xxxxx',
'User-Agent': 'API-Explorer',
'Authorization': 'QB-USER-TOKEN xxxxxxxxxxxxxxxxxxxxxxxx',
'Content-Type': 'application/json'
}
fetch('https://api.quickbase.com/v1/reports/10/run?tableId=xxxxxxxxx&skip={skip}&top=10', {
method: 'POST',
headers: headers,
})
.then(res => {
if (res.ok) {
return res.json().then(res => console.log(res));
}
return res.json().then(resBody => Promise.reject({
status: res.status,
...resBody
}));
})
.catch(err => console.log(err))
</script>
</body>​If that doesn't work, try what Rick mentioned. You might have to add the 'Access-Control-Allow-Origin' inside of your headers object, but remember to add your <script> tags inside of the <body> after your html.
------------------------------
AR
------------------------------
