Consuming Web service in SAPUI5
This is a useful blog for beginners in ui5. This shows an example to consume the webservice in ui5 application. There are different ways in which this can be achieved. I have shown 2 methods in this blog. In both the methods, the input xml to the webservice is posted and the response is taken.
- Parsing the xml response received from the webservice
var textArea = new sap.ui.commons.TextArea({
id : "textArea1"
});
var request = "<Your input xml to the webservice>”;
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;
},
error: function(xhr, status)
{
console.log("ERROR");
},
complete : function(xhr,status) {
uicontrols();
}
});
function uicontrols(){
parser=new DOMParser();
xmlDoc=parser.parseFromString(response,"text/xml");
var returnVal = xmlDoc.getElementsByTagName("The tag from response xml which you want") [0].childNodes[0].nodeValue;
textArea.setValue(returnVal); //set the value to textArea
}
- Using XML model
var request = "<Your input xml to the webservice>”;
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;
},
error: function(xhr, status)
{
console.log("ERROR");
},
complete : function(xhr,status) {
uicontrols();
}
});
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/"});
Thank you,
Navya
Hi Abhinav,
Please have a look at this thread. It might help you.
how to consume OData service in sapui5
If you want anything else in specific then let me know in detail, will try that out.
Thank you,
Navya
Hi Navya,
Nice post you have shared, I followed same and trying to get response of my webservice in UI5 view but it showing me error
I have created JS view in my ui5 application and there i have writte below code
function(oController) {
var request = '<soapenv:Envelope xmlns:soapenv="http://schemas.xmlsoap.org/soap/envelope/" xmlns:urn="urn:ValidateuserwebserviceVi">'
+'<soapenv:Header/><soapenv:Body>'
+'<urn:Validateuser><urn:Uname>X1801</urn:Uname>'
+'<urn:Password>asdf@123</urn:Password>'
+'</urn:Validateuser>'
+'</soapenv:Body></soapenv:Envelope>';
var response = "";
$.ajax({
url : 'https://10.189.7.13:50101/Validateuserwebservice/ConfigValidate?wsdl',
type : 'POST',
dataType : 'xml'
data : request,
contentType : 'text/xml; charset=\"utf-8\"',
success : function(data, textStatus, jqXHR) {
response = data;
console.log("data"+data);
}
error : function(){
console:log('ERROR');
}
complete : function(xhr,status) {
uicontrols();
}
});
var oModel = new sap.ui.model.xml.XMLModel();
function uicontrols(){
var oModel = new sap.ui.model.xml.XMLModel();
var oModel = sap.ui.model.xml.XMLModel();
oModel.setXML(response);
alert("GETXML>>>>"+oModel.getXML());
var oPage1=new sap.m.Page({
title : "Test Service"
});
return oPage1;
}}
);
Here when i check alert("GETXML>>>>" value it is showing error in parasing .I am using my own webservice which have request
<soapenv:Envelope xmlns:soapenv="http://schemas.xmlsoap.org/soap/envelope/" xmlns:urn="urn:ValidateuserwebserviceVi">
<soapenv:Header/>
<soapenv:Body>
<urn:Validateuser>
<urn:Uname>X1801</urn:Uname>
<urn:Password>asdf@123</urn:Password>
</urn:Validateuser>
</soapenv:Body>
</soapenv:Envelope>
and on running it on soap ui it showing response
<SOAP-ENV:Envelope xmlns:xs="http://www.w3.org/2001/XMLSchema" xmlns:SOAP-ENV="http://schemas.xmlsoap.org/soap/envelope/" xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance">
<SOAP-ENV:Body xmlns:rpl="urn:ValidateuserwebserviceVi">
<rpl:ValidateuserResponse xmlns:rn0="java:sap/standard" xmlns:rn1="http://schemas.xmlsoap.org/soap/encoding/">
<rpl:Response>User verified.</rpl:Response>
</rpl:ValidateuserResponse>
</SOAP-ENV:Body>
</SOAP-ENV:Envelope>
Urgent help needed as without this response i can not possible to proceed with.Please help me step by step process if i am missing some thing or if some demo project avaialble please share that.
Hi Navya,
How tthe ajax is possible if the web-service that i am requesting is cross domain.
Regards,
Vishnu
Hi Navya,
i used the first method ,but i m getting this message on console please help me out.
Regards,
Vinayak
Hi Vinayak,
This is cross domain issue, which is cuased if the requesting website is served from different domain(localhost) and requested resources are served out of different domain (gateway url).quick fix for development could be, opening the chrome with disabled web security.
Execute following command in command prompt ( Make sure that all the instances of chrome are closed before executing following commands)
cd C:\Program Files\Google\Chrome\Application (Change this path accordingly)
chrome --disable-web-security
Now in opened browser execute the localhost url, app should work fine.
One more way is to use proxy servelets :
The information for the same can be found here
Use a SimpleProxyServlet for Testing to Avoid Cross-domain Requests - UI Development Toolkit for HTML5 (SAPUI5) - SAP Li…
Regards,
Vijay.
Hi,
Nice try 🙂 ..But I have few queries.
1. Why you preferred ajax call?
Already SAP have odata methods to call GW/webservices.
OData Model have autoupdate properties as well as more features are appended into oDATA models.
It could be very useful to you if you used odata model instead of ajax call.
Thanks,
Karthik A
Hi Karthik,
I Agree with the argument sapui5 odata model is more matured, it not only helps in CRUD operations, also provides nice binding - templating feature which intern takes care of filtering pagination with ease - by just switching on or off few properties of the control.
How ever above approach could be useful to consume non oData services like SOAP services or simple REST services.
Regards,
Vijay.
Hello Karthik,
Aggree with you, but sometime backend can not provide Odata service for some reason (in my case, they return XS JS service). Hence we need to use ajax call.
I'm finding how to use ajax call & get over cross-domain policy. If you have ideas on this, please help me out.
THanks a lot!
HI Hieu- Thank you for your comments. I really appreciate your effort to bring up this conversation now.
I badly need your help on XMLHTTPREQUEST for SAP_ML_API. Can you please help me on it???
While executing below API call from browser I am getting the attached error, if you have idea please share it with us. 🙂
Code:
Regards,
Karthik A
Hello Karthik,
I'm also trying to consume a machine learning API using a UI5 application.
Were you able to succeed in your effort, if so please provide your insights.
Thanks,
Ashwini
Hello, Navya!
I developed a small application based in your first example using the SAP WEB IDE.
Below follows the source code of my XML view (View1):
Below follows the source code of my view controller:
Could you tell me what I'm doing wrong, please?
Thank you very much!
Rubens
Hi Navya,
For consuming oData services I can create destination and I could able to get the data in component.js,
But in my workflow I am using XSOData ....In my scenario I need to post the data in component.js for Hana database ....Is it possible to call hana services in component.js?
Thanks & Regards,
Raghavendra H K