In the world of technological innovations, sometimes it becomes so difficult to keep ourselves updated with the relevant technologies. In this blog, I would like to share my story and the difficulties that I had faced during my first SAPUI5 application development and integrating the same with SAP system through XML/JSON models.
There is so much information available in the web about the same, and sometimes it is very difficult to digest too much of information.
Problem 1: To find out the structured content in web.
Though there are lots of documents and How To guides available, however, I still feel that it is not structured for beginners like me. However, the following links turned out to be very useful. Anyone who wants to learn SAPUI5 should give the below links a glance.
- https://sapui5.hana.ondemand.com/sdk/ - This is very good starting point and specially SAPUI5 Runtime section clears much of the fundamentals required.
- After reading above, it makes more sense to develop Hello World application by following https://sapui5.hana.ondemand.com/sdk/#docs/guide/HelloWorld.html
Problem 2: Dealing with cross domain issues.
I was not aware of the problems that one can face by calling model service of SAP system from my local test environment. Googling and SCN helped me so much to understand the problem and provided me much needed input at right time. As modern browsers have same-origin policy and they don’t permit running java scripts from different domains because of web application security. Refer Wikipedia - http://en.wikipedia.org/wiki/Same-origin_policy
After setting response header field to “Access-Control-Allow-Origin:*” and Access-Control-Allow-Methods:GET', I found workaround to deal with SOP.
Problem 3: Dealing with XML/JSON Model
XML model proved to be quite easier to implement, however, the JSON was really tricky to implement. Due to restrictions, we cannot call the JSON directly from SAPUI5 Javascript and thus we have to use JSONP (JSON with padding) and a callback service.
Following AJAX query can be used to call the JSON service in your SAPUI5 project.
var oModel = new sap.ui.model.json.JSONModel();
$.ajax({
url: url,
method: "GET",
jsonpCallback : 'getJSON',
contentType : "application/json",
dataType:'jsonp',
success: function(json) {
oModel.setData({modelData: json});
oTable.setModel(oModel);
oTable.bindRows("/modelData");},
error: function(json) {
console.log(json); }
}
);
To post the data back to SAP, we can use POST type as follows:
var formData = {name:"test",age:"31"}; //Array
$.ajax({
url : url,
type: "POST",
data : formData,
success: function(response)
{
console.log(response);
},
error: function (response)
{
console.log(response);
}
});
This is my story of learning SAPUI5, feel free to share yours.