Overview
We recently adapted a jQuery application using a PHP/mySQL backend to working with XS OData services exposing HANA tables instead. All our files are checked into the HANA server's repository to avoid any cross-domain policy issues. The data read from the service is saved into a client-side database via javascript, or posted back to the service from the client.
Some of the pitfalls we stumbled upon were the exact formats of the JSON payloads in the requests and responses, request and response headers and details of the service definition. We used the native jQuery AJAX function as well as datajs' OData for both reading and writing. Here's a basic overview of how to get it running.
Thanks to Thomas Jung and Martin Strenge for quickly answering all the questions we had.
Prerequisites
To understand this blog post, have some understanding of Javascript and for example the Chrome dev tools, and access to a HANA server.
Service definition
This is as simple as they come, exposing a single table to read from/write to.
service namespace "App.services" {
"App.tables::tables.myTable" as "myTable";
}
Important: Expose the designtime object, not the runtime object. This was one of the mistakes that took us some time to find. Changes made to the designtime table definition were not reflected in the runtime table, and thus the service, and caused errors.
This will of course only work for simple inserts, for anything non-trivial use the create statement to bind e.g. a SQLScript procedure to the service.
Reading from the database via OData
Reading via datajs
OData.read("../services/service.xsodata/myTable", function (data) {
App.saveResultsToLocalDB(data.results);
},
function (err) {
console.log(err);
});
What the Request should look like (in excerpts)
Request URL:http://server:8000/App/services/service.xsodata/myTable
Request Method:GET
Accept:application/json
What the Response should look like (in excerpts)
content-type:application/json
The returned JSON object will look sommething like this:
{"d":{"results":[{"__metadata": {"uri":"http://server:8000/App/services/service.xsodata/myTable('1369226e-8f57-3877-c380-134a64d97b10')","type":"App.services.myTableType"},"key":"value", ...}]}}
So your application needs to drill down into the data object to data.d.results.
Reading via jQuery ajax
$.ajax({
type: "GET",
url: "../services/service.xsodata/myTable",
cache: false,
dataType: "json",
error : function(msg, textStatus) {
console.log(textStatus);
},
success : function(data) {
App.saveResultsToLocalDB(data.d.results);
}
});
What the Request should look like (in excerpts)
Request URL:http://server:8000/App/services/service.xsodata/myTable?_=1387451046241
Request Method:GET
Accept:application/json
What the Response should look like (in excerpts)
content-type:application/json
The returned JSON object will look the same as above:
{"d":{"results":[{"__metadata": {"uri":"http://server:8000/App/services/service.xsodata/myTable('1369226e-8f57-3877-c380-134a64d97b10')","type":"App.services.myTableType"},"key":"value", ...}]}}
Writing to the database via OData
Writing via datajs
Do NOT use JSON.stringify(), rather send the JSON object directly when using datajs. It's important that the JSON object sent is just a single object {...}, not e.g. an array [{...},{...}] for XS to be able to use it.
OData.request( {
headers: {"accept": "application/json"},
requestUri: "../services/service.xsodata/myTable",
method: "POST",
data: data
},
function (data, response) {
console.log(data);
},
function (err) {
console.log(err);
}
);
What the Request should look like (in excerpts)
Request URL:http://server:8000/App/services/service.xsodata/myTable
Request Method:POST
Accept:application/json
Content-Type:application/json
Request Payload:
{"key":"value",...}
What the Response should look like (in excerpts)
The returned JSON object will look the same as with the GET request above:
{"d":{"results":[{"__metadata": {"uri":"http://server:8000/App/services/service.xsodata/myTable('1369226e-8f57-3877-c380-134a64d97b10')","type":"App.services.myTableType"},"key":"value", ...}]}}
Writing via jQuery ajax
Data (the payload sent to the server) needs to be a string, so use JSON.stringify(). It's important that the JSON object sent is just a single object {...}, not e.g. an array [{...},{...}] for XS to be able to use it.
data = JSON.stringify(data);
$.ajax({
type: "POST",
url: "../services/service.xsodata/myTable",
data: data,
cache: false,
dataType: "json",
contentType: "application/json",
error : function(msg, textStatus) {
console.log(textStatus);
},
success : function(data) {
console.log(data);
}
});
What the Request should look like (in excerpts)
Request URL:http://server:8000/App/services/service.xsodata/myTable
Request Method:POST
Accept:application/json
Content-Type:application/json
Request Payload:
{"key":"value",...}
What the Response should look like (in excerpts)
The returned JSON object will look the same as with the GET request above:
{"d":{"results":[{"__metadata": {"uri":"http://server:8000/App/services/service.xsodata/myTable('1369226e-8f57-3877-c380-134a64d97b10')","type":"App.services.myTableType"},"key":"value", ...}]}}
