Introduction : Many times consultants can be in a situation where the preferred UI Technology is SAPUI5 but services are exposed as WebServices rather than an OData model. The below blog will help you understand how you can consume a WebService from SAPUI5 via an XML model and show it in SAPUI5 user interface. Although some code samples are scattered here an there, one has to spend quite some time to make a scenario work. By the end of this blog you will have a fair understanding of the scenario and code to make it work.
Target Audience : Beginners to Experts alike.
Environment : Eclipse (Mars) with SAPUI5 plugins, Google Chrome browser.
Date Created: 4 Jan 16
I used the following publicly exposed WebServices to create a scenario :
http://www.w3schools.com/xml/tempconvert.asmx
http://www.w3schools.com/xml/tempconvert.asmx?WSDL
A convenient online WebService client :
You need to have the WSDL and then you can easily generate XML request and response. This is one of many options but it is interesting that with this site you can work without a Web Service client installation.
When dealing with XML in string format you might have issues using double quotes " as XML also has them and diving your XML into multiple line. The problem can be resolved by using single quotes to represent strings and using string concatenation :
http://www.w3schools.com/js/js_strings.asp
Key code that does the job :
Sample Code (Thanks to Navya Krishna):
var request = "<Your input xml to the webservice>”; // more info in the appendix section
var response = "";
$.ajax({
url : "Your webservice wsdl url",
type : "POST",
data : request,
dataType : "text",
contentType : "text/xml; charset=\"utf-8\"",
success : function(data, textStatus, jqXHR) {
response = data;
console.log("SUCCESS");
},
error: function(xhr, status)
{
console.log("ERROR");
},
complete: function(xhr,status) {
console.log("COMPLETE");
}
});
NOTE:
1). Since the WebService is not on the same machine as the SAPUI5 application it causes a "No 'Access-Control-Allow-Origin' header is present on the requested resource." error
It can be resolved by using the inbuilt proxy. For e.g. url : "proxy/http/www.w3schools.com/xml/tempconvert.asmx?WSDL", in the above code.
2). For using the mentioned WebService I had to get rid of </SOAP-ENV:Envelope> and </SOAP-ENV:Body> tags in my response to make the scenario work.
response = response.replace('<soap:Envelope xmlns:soap="http://schemas.xmlsoap.org/soap/envelope/" xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xmlns:xsd="http://www.w3.org/2001/XMLSchema">', '');
response = response.replace("<soap:Body>", "");
response = response.replace("</soap:Body>", "");
response = response.replace("</soap:Envelope>", "");
3). Do not forget to add the libraries required for running the scenario in the Bootstrap
data-sap-ui-libs="sap.m, sap.ui.commons,sap.ui.table"
Sample code that can consumes a WebService Response, converts it into an XML model and displays the data in a Table :
NOTE: The code here does not run in a sequence if written right after Ajax call. Please use the success or complete functions to ensure code runs in a sequence.
var oModel = new sap.ui.model.xml.XMLModel();
function uicontrols(){
oModel.setXML(response);
}
var oTable = new sap.ui.table.Table({
id: "table1"
});
oTable.addColumn(
new sap.ui.table.Column({
label: new sap.ui.commons.Label({text: "Label1"}),
template: new sap.ui.commons.TextField().bindProperty("value", "Tag1/text()")
})
);
oTable.addColumn(
new sap.ui.table.Column({
label: new sap.ui.commons.Label({text: "Label2"}),
template: new sap.ui.commons.TextField().bindProperty("value", "Tag2/text()")
})
);
oTable.setModel(oModel);
oTable.bindRows({path: "/the main XML tag under which Tag1 and Tag2 are present/"});
Appendix :
Sample Request XML based on above mentioned public WebService
var request = '<?xml version="1.0" encoding="UTF-8"?>' +
'<SOAP-ENV:Envelope xmlns:SOAP-ENV="http://schemas.xmlsoap.org/soap/envelope/" xmlns:ns1="http://www.w3schools.com/xml/">' +
'<SOAP-ENV:Body>' +
'<ns1:CelsiusToFahrenheit>' +
'<ns1:Celsius>10</ns1:Celsius>' +
'</ns1:CelsiusToFahrenheit>' +
'</SOAP-ENV:Body>' +
'</SOAP-ENV:Envelope>';
Another sample code that simulates consuming a WebService Response, converting it into an XML model and displaying the data in a Table.
(Thanks to Konstantin Anikeev)
https://scn.sap.com/thread/3307300
// start of code
var oModel = new sap.ui.model.xml.XMLModel();
oModel.setXML("<?xml version=\"1.0\" encoding=\"UTF-8\"?>"+
"<config>"+
"<item date=\"January 2009\">"+
"<mode>1</mode>"+
"<unit>900</unit>"+
"<current>1</current>"+
"<interactive>1</interactive>"+
"</item>"+
"<item date=\"February 2009\">"+
"<mode>2</mode>"+
"<unit>400</unit>"+
"<current>2</current>"+
"<interactive>5</interactive>"+
"</item>"+
"<item date=\"December 2009\">"+
"<mode>9</mode>"+
"<unit>5</unit>"+
"<current>100</current>"+
"<interactive>3</interactive>"+
"</item>"+
"</config>");
try{
alert("GETXML>>>>:"+oModel.getXML());
}catch(e){
alert(e.message);
}
oTable.addColumn(
new sap.ui.table.Column({
label: new sap.ui.commons.Label({text: "Date"}),
template: new sap.ui.commons.TextField().bindProperty("value", "@date") }
)
);
oTable.addColumn(
new sap.ui.table.Column({
label: new sap.ui.commons.Label({text: "Mode"}),
template: new sap.ui.commons.TextField().bindProperty("value", "mode/text()") }
)
);
oTable.addColumn(
new sap.ui.table.Column({
label: new sap.ui.commons.Label({text: "Unit"}),
template: new sap.ui.commons.TextField().bindProperty("value", "unit/text()") }
)
);
oTable.addColumn(
new sap.ui.table.Column({
label: new sap.ui.commons.Label({text: "Current"}),
template: new sap.ui.commons.TextField().bindProperty("value", "current/text()") }
)
);
oTable.addColumn(
new sap.ui.table.Column({
label: new sap.ui.commons.Label({text: "Interactive"}),
template: new sap.ui.commons.TextField().bindProperty("value", "interactive/text()") }
)
);
oTable.setModel(oModel);
oTable.bindRows({path: "/item/"});
// End of code
- SAP Managed Tags:
11 Comments
