Consuming Web service in SAPUI5

[former_member200477]

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