For a long time TeamDesk had a SOAP API to support client-server exchange between the database and applications, however its use on web pages was fairly complicated.
First of all, enabling support for SOAP interchange in JavaScript requires fair amount of extra code – we’ve fit into 1500+ lines. Next problem is a browsers security limitation on requests across domain boundaries – that’s when the web page located on your server calls TeamDesk for a data – Internet Explorers up to version 10 were disabling the use in such scenario. However, with introduction of REST API all of these problems are solved.
While some browsers prevent programmatic access to resources located in another domain, you can still get access to those resources in JSON format by using HTML <SCRIPT> tags – the trick is called JSONP. The idea is based on a fact JSON data is represented in a valid JavaScript syntax; the trick wraps the data with function call syntax, thus generating the code that will be executed when the data is loaded. Let’s see how it works.
Here is an URL to retrieve Id, Text and URL columns from top 5 recently modified records in a table Test from API Test application:
In order to consume the data via <SCRIPT> tag you’ll need to write a little function and include this URL with an extra parameter:
<script>
function onDataReady(apiResult) {
// apiResult parameter has the data, do some work here
}
</script>
<script src=”https://www.teamdesk.net/secure/api/v2/…Modified//DESC&callback=onDataReady“></script>
Order matters: the function must be defined prior to referencing the script. Once API data is loaded, the function will be invoked with the data passed as a function parameter.
Now, let’s do some things with the data, for example, let’s render the table with the data on a page.
While you can iterate over returned data and programmatically build the piece of HTML, we’ve found excellent Mustache template engine quite useful. It’s open source, it’s fast and it’s compact – less than 3Kb when compressed over the wire.
With Mustache you can define table template as:
<table id=”template”>
<tr><th>Id</th><th>Text</th><th>URL</th></tr>
<!–{{#Records}}–>
<tr><td>{{Id}}</td><td>{{Text}}</td><td><a href=”{{URL}}“>{{URL}}</a></td></tr>
<!–{{/Records}}–>
</table>
and invoke template engine as soon as you get the data into the function. The page that renders the table is 25 lines of HTML and JavaScript including comments:
<html>
<head>
<title>Rendering Test</title>
</head>
<body>
<!– table template –>
<table id=”template” border=”1″ cellpadding=”4″ cellspacing=”0″>
<tr><th>Id</th><th>Text</th><th>URL</th></tr>
<!–{{#Records}}–>
<tr><td>{{Id}}</td><td>{{Text}}</td><td><a href=”{{URL}}“>{{URL}}</a></td></tr>
<!–{{/Records}}–>
</table>
<!– scripts –>
<script src=”//cdnjs.cloudflare.com/ajax/libs/mustache.js/2.1.3/mustache.min.js”></script>
<script>
function onDataReady(apiResult) {
var template = document.getElementById(“template”);
template.innerHTML = Mustache.render(template.innerHTML, { Records: apiResult });
}
</script>
<!– API Call –>
<script src=”https://www.teamdesk.net/secure/api/v2/21995/B4B789F795F943B5A1CD0D27C12C8AAF/Test/select.json?top=5&column=Id&column=Text&column=URL&sort=Date%20Modified//DESC&callback=onDataReady”></script>
</body>
</html>
And here is a result of template rendering:
|
Id |
Text |
URL |
| 1 | Test 1 | http://www.teamdesk.net |
| 114 | Test File | http://www.teamdesk.net |
| 115 | Test File | http://www.teamdesk.net |
| 117 | Test Create | |
| 116 | Test 1 |
Enjoy!
