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

To report this post you need to login first.

7 Comments

You must be Logged on to comment or reply to a post.

    1. Swati Joshi

      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

      ParseError.PNG

      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.

      (0) 
    1. Vijaykumar Ratnakar

      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.

      (0) 
  1. Karthik A

    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

    (0) 
    1. Vijaykumar Ratnakar

      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.

      (0) 

Leave a Reply