How to display XML model in UI5 Table

[Former Member]

HI All,

I want to use REST services in UI5 table. I am getting XML response from service, Now i want to  display this content in table , I have written code

          var oModel = new sap.ui.model.xml.XMLModel();

          oModel.setXML("<?xml version=\"1.0\"?><some><xml>data_1</xml><xml>data_2</xml></some>");

          try{

              alert("GETXML>>>>:"+oModel.getXML());

          }catch(e){

              alert(e.message);

          }

          var oTable = new sap.ui.table.Table();

          oTable.addColumn(new sap.ui.table.Column({      label: new sap.ui.commons.Label({text: "Value"}),      template: new sap.ui.commons.TextField().bindProperty("value", "xml")  })); 

          oTable.setModel(oModel); 

          alert(oTable.getModel().getXML()  );

        
          oTable.bindRows({path: "/some"});

          oTable.placeAt('content');  

But i am not getting result what is going wrong

[konstantin_anikeev · Accepted solution]

Hi,

Actually <some> is a root in that case...

following works...

          oTable.addColumn(
                                                            new sap.ui.table.Column({      
                                                                      label: new sap.ui.commons.Label({text: "Value"}),      
                                                                      template: new sap.ui.commons.TextField().bindProperty("value", "text()")  }
                                                            )
                                                  ); 
          oTable.setModel(oModel); 
          oTable.bindRows({path: "/xml/"});

Best Regards

Konstantin

[Former Member · Accepted solution]

Thanks A Lot...

Can you please give more detail how we can  get data from more complex  xml  like

<?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>

[konstantin_anikeev · Accepted solution]

hm...

do not see any problem...

    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);
    }
    var oTable = new sap.ui.table.Table();
    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/"});
    oTable.placeAt('content');
    oTable.getRows();

[konstantin_anikeev · Accepted solution]

[Former Member · Accepted solution]

Thank you for the Snippet Konstantin. This does help me on understanding XML binding.

Thanks,

Venkat.

[konstantin_anikeev · Accepted solution]

ur' welcome

[Former Member]

This message was moderated.

[preethi_ande]

Hi,

If you want to get the data just remove the type: 'POST', and try it.

Thanks,

Preethi

[Former Member]

Hi Preethi,

I tried with removing type : 'POST' it still showing similar error.While running it in chrome it showing parser error and when i try to run it on NWDS internal browser it giving me request xml again in alert message

alert("GETXML>>>>"+oModel.getXML());

I am confuse how this

success : function(data, textStatus, jqXHR) {} and 

function uicontrols(){  } work to generate response.

Webservices properly working on my machine and when it showing request in alert message it not providing input value which i have given in ajax call as parameter of data.

$.ajax({

data : request,

It will helpful if some one can share demo project or code for this.

Another point as per my understanding i have written all the above code in my View JS file, it that is the correct location or need some modification in that also.

[former_member183514]

Hi Swati,

Just check if your xml is well formed or not using online xml validator.  If it also says error similar to yours

Error on-> Line :1 Column :1060

Message :Extra content at the end of the document

Then add root element in your xml

<root>

---your xml comes here--

</root>

I am also working on similar example to consume soap webservice response in XMLModel

[vivek_kalyankar]

Yes , request and response xml is welformed and assessed from some other application properly.

If you get success to consume your saop webservice with UI5 please share details.

[Former Member]

We are using same webservice xml from other application hence it is welformed.

If you have created any application which consuming soap webservice please share details.

[former_member183514]

	onBtnPress: function(oEvent) {
	var oModel = new sap.ui.model.xml.XMLModel();
	oModel = this.webserviceCall();
	this.byId("resultTable").setModel(oModel);
	}
	webserviceCall:function(){
			var request = '<?xml version="1.0" encoding="UTF-8"?>' +
				'<soapenv:Envelope xmlns:soapenv="http://schemas.xmlsoap.org/soap/envelope/" xmlns:urn="urn:sap-com:document:sap:rfc:functions">' +
				'<soapenv:Header/>' + '<soapenv:Body>' + '<urn:ZPRODUCT_DETAILS>' + '<E_HEADER_DTLS>' + '</E_HEADER_DTLS>' + '<E_ITEM_DTLS>' +
				'</E_ITEM_DTLS>' + '<I_PRODUCT_ID>SYSTEM_1</I_PRODUCT_ID>' + '</urn:ZPRODUCT_DETAILS>' + '</soapenv:Body>' +
				'</soapenv:Envelope>';
			var response = "";
			var oModel = new sap.ui.model.xml.XMLModel();
			$.ajax({
				url:"/webservice/sap/bc/srt/rfc/sap/.../../../...",
				type: "POST",
				data: request,
				dataType: "text",
				async: false,
			contentType: "text/xml; charset=\"utf-8\"",

				success: function(data, textStatus, jqXHR) {
					response = data;

				response = response.replace('<soap-env:Envelope xmlns:soap-env="http://schemas.xmlsoap.org/soap/envelope/">',"<firstlevel>");//root tag is added to make well formed xml
				response = response.replace('<n0:ZPRODUCT_DETAILSResponse xmlns:n0="urn:sap-com:document:sap:rfc:functions">',"");
					response = response.replace("<soap-env:Header/>", "");
					response = response.replace("<soap-env:Body>", "");
					response = response.replace("</soap-env:Body>", "");
					response = response.replace("</n0:ZPRODUCT_DETAILSResponse>","");
					response = response.replace("</soap-env:Envelope>", "</firstlevel>");
					console.log("SUCCESS" + response);
				},

				error: function(xhr, status) {
					console.log("ERROR");
				},

				complete: function(xhr, status) {
					console.log("COMPLETE");
					oModel.setXML("<?xml version=\"1.0\" encoding=\"UTF-8\"?>"+response);
					}
			});
			return oModel;
	}
	View.view.xml
	Follow xml namespace and binding path syntax to bind data to table
	https://sapui5.netweaver.ondemand.com/sdk/#docs/guide/b8a2c24356c443228f7819d45697a2b8.html
	<Table id="resultTable" items="{path:'/E_HEADER_DTLS/item'}">//for XML Model do not include root in the path
							<columns>
								<Column>
								<Text text="Sales DoC No" id="nameColumnTitle"/>
								</Column>
								<Column>
								<Text text="Account" id="nameaccount"/>
								</Column>
							</columns>
							<items>
								<ColumnListItem press="onPress">
									<cells>
										<Text text="{SALES_DOC_NO/text()}"/>//text() is used to reference the content text of an element in xmlmodel
										<Text text="{ACCOUNT/text()}"/>
									</cells>
								</ColumnListItem>
							</items>
						</Table>

[former_member183514]

Hi Swati,

your problem is resolved?

I could see that you are passing datatype as xml, please use 'text' in xml and try again.

[former_member183514]

Hi Vivek,

I hope you get some reference to call soap webservice and consume its results in UI5 application. If you are still facing any issues, please post your issues.

[Former Member]

Hi Prabh,

I am still facing issues, i have tried the way you shared now and calling

webserviceCall function from my controller through onInit().

Here it not going into success function directly going into error and complete function and showing 401 and 502 error on chrome debugger for setXML method written in complete function.

oModel.setXML('<?xml version=\"1.0\" encoding=\"UTF-8\"?>'+response);

Below is my controller code-

onInit: function() {
alert("in oniniti..");
  var oModel = new sap.ui.model.xml.XMLModel();
  oModel = this.webserviceCall();
  //this.byId("resultTable").setModel(oModel);
  },

webserviceCall:function(){
  
   alert("in webserviceCall..");
  var request = '<?xml version="1.0" encoding="UTF-8"?>' +
  '<soapenv:Envelope xmlns:soapenv="http://schemas.xmlsoap.org/soap/envelope/" xmlns:urn="urn:sap-com:document:sap:rfc:functions"><soapenv:Header/><soapenv:Body><urn:XXX><!--Optional:--><YYY><!--Zero or more repetitions:--><item></item></YYY><USERID>SomeUserID</USERID></urn:XXX></soapenv:Body></soapenv:Envelope>';
  var response = "";
  var oModel = new sap.ui.model.xml.XMLModel();

  $.ajax({
  url : 'http://hostname:port/sap/bc/srt/wsdl/...?sap-client=200',
  type : 'POST',
                dataType : 'text',
                data : request,
                async: false,
                contentType : 'text/xml; charset=\"utf-8\"',

  

  success: function(data, textStatus, jqXHR) {
  alert("s..");
  response = data;
  

  response = response.replace('<soap-env:Envelope xmlns:soap-env="http://schemas.xmlsoap.org/soap/envelope/">',"<firstlevel>");//root tag is added to make well formed xml
 
  response = response.replace("<soap-env:Header/>", "");                 
  response = response.replace("<soap-env:Body>", "");      
  response = response.replace("</soap-env:Body>", "");   
  response = response.replace("</soap-env:Envelope>", "</firstlevel>");
  console.log("SUCCESS" + response);
  },
  

  error: function(xhr, status) {
  alert("e..");
  console.log("ERROR");
  },
  

  complete: function(xhr, status) {
  alert("c..");
  console.log("COMPLETE");
  oModel.setXML('<?xml version=\"1.0\" encoding=\"UTF-8\"?>'+response);
  }
  });
  return oModel;
  }

I deployed my application to java server and on browser while running it showing me 502 and 401 authorization error.

Can you suggest if i missed something.At view side I have not done anything for now.

Regards,

Swati

[former_member183514]

Hi Swati,

Have you tried to access webservice in browser and SOAP UI?

If HTTP 401 error is coming, it means you are providing incorrect credentials to access webservice.

Also check if you are working behind some proxy to access this webservice. Error code 502 is usually a network related error.

[vivek_kalyankar]

Hi Prabh,

Yes i have tried webservice on browser and soap ui there it's working perfect.

I copied request from soap ui which i put in code, in that credentials are given properly as generating perfectly generating response on soap ui.

I have not set any specific proxy to check this.

[former_member183514]

Hi Vivek,

I am not sure if domain and port are following Cross origin request protocol. Please check webservice response in Network Header tab.

If there is difference in protocol or domain of webservice and your application server, use Sap Hana Cloud Platform destinations as a proxy.

Please let me know if you need any help in destination creation for your webservice.

[Former Member]

This message was moderated.