Question Re: SAPUI5 with JSON or XML Data. in Technology Q&A

SAPUI5 with JSON or XML Data.

Former Member — Tue, 20 Nov 2012 13:49:30 GMT

Hello,

I'm trying to get data into a simple table.

I've used the following tutorial to get the basic layout for the table and the layout:

http://www.plinky.it/blog/2012/10/15/consume-netweaver-gateway-services-via-sapui5-part-1/#axzz2Ckw9mXwC

As you can see it uses an oData connection.

But I want to get the following data into the same table.

I have the following XML:

or JSON Data:

{"RESULTS":[

{"RESULT":{"TGROUP":"0001","TGROUP_TXT":"Hogeschool/Universitair"}},

{"RESULT":{"TGROUP":"0002","TGROUP_TXT":"Stagiairs"}},

{"RESULT":{"TGROUP":"0003","TGROUP_TXT":"Starters/pas afgestudeerden"}},

{"RESULT":{"TGROUP":"0004","TGROUP_TXT":"Leidinggevenden/directie"}},

{"RESULT":{"TGROUP":"0005","TGROUP_TXT":"Specialisten"}},

{"RESULT":{"TGROUP":"0006","TGROUP_TXT":"ICT"}},

{"RESULT":{"TGROUP":"0007","TGROUP_TXT":"Technici"}},

{"RESULT":{"TGROUP":"0008","TGROUP_TXT":"Arbeiders"}},

{"RESULT":{"TGROUP":"0009","TGROUP_TXT":"Zorg"}},

{"RESULT":{"TGROUP":"0010","TGROUP_TXT":"Maatschappelijk werk"}},

{"RESULT":{"TGROUP":"0011","TGROUP_TXT":"Hoger onderwijs"}},

{"RESULT":{"TGROUP":"0012","TGROUP_TXT":"Kleuter/lager onderwijs"}},

{"RESULT":{"TGROUP":"0013","TGROUP_TXT":"Shared Service"}}]}

I have found the following test code:

var oTable = sap.ui.getCore().byId("table");

var oModel = new sap.ui.model.json.JSONModel();

oModel.setData({

firstName: "Peter",

lastName: "Pan"

});

oModel.loadData("data.json");

oTable.setModel(oModel);

rPannel.addContent(oTable);

layout.createRow(rPannel);

this.addContent(layout);

But I don't know if this is correct, nor don't I know how to build the table. Or how to structure the data if it's coming from the online xml or json.

Kind regards,

Vincent

Re: SAPUI5 with JSON or XML Data.

Former Member — Wed, 21 Nov 2012 07:53:29 GMT

Bump

Re: SAPUI5 with JSON or XML Data.

former_member91307 — Fri, 23 Nov 2012 11:24:01 GMT

Hi Vincent,

Please find attached the HTML.

The file type is text change it to HTML.

Re: SAPUI5 with JSON or XML Data.

former_member91307 — Fri, 23 Nov 2012 11:25:10 GMT

Hi Vincent,

Please find the HTML code below.

<!DOCTYPE html>

<title>Table example</title>

src='/sapui5/resources/sap-ui-core.js'

data-sap-ui-theme='sap_goldreflection'

data-sap-ui-libs='sap.ui.commons,sap.ui.table'></script>

// create the DataTable control

var oTable = new sap.ui.table.Table({editable:true});

// define the Table columns

var oControl = new sap.ui.commons.TextView({text:"{RESULT/TGROUP}"}); // short binding notation

oTable.addColumn(new sap.ui.table.Column({label: new sap.ui.commons.Label({text: "Group"}), template: oControl }));

var oControl = new sap.ui.commons.TextView({text:"{RESULT/TGROUP_TXT}"}); // short binding notation

oTable.addColumn(new sap.ui.table.Column({label: new sap.ui.commons.Label({text: "Group Text"}), template: oControl }));

var aData =

{"RESULTS":[

{"RESULT":{"TGROUP":"0001","TGROUP_TXT":"Hogeschool/Universitair"}},

{"RESULT":{"TGROUP":"0002","TGROUP_TXT":"Stagiairs"}},

{"RESULT":{"TGROUP":"0003","TGROUP_TXT":"Starters/pas afgestudeerden"}},

{"RESULT":{"TGROUP":"0004","TGROUP_TXT":"Leidinggevenden/directie"}},

{"RESULT":{"TGROUP":"0005","TGROUP_TXT":"Specialisten"}},

{"RESULT":{"TGROUP":"0006","TGROUP_TXT":"ICT"}},

{"RESULT":{"TGROUP":"0007","TGROUP_TXT":"Technici"}},

{"RESULT":{"TGROUP":"0008","TGROUP_TXT":"Arbeiders"}},

{"RESULT":{"TGROUP":"0009","TGROUP_TXT":"Zorg"}},

{"RESULT":{"TGROUP":"0010","TGROUP_TXT":"Maatschappelijk werk"}},

{"RESULT":{"TGROUP":"0011","TGROUP_TXT":"Hoger onderwijs"}},

{"RESULT":{"TGROUP":"0012","TGROUP_TXT":"Kleuter/lager onderwijs"}},

{"RESULT":{"TGROUP":"0013","TGROUP_TXT":"Shared Service"}}]}

;

// create a JSONModel, fill in the data and bind the Table to this model

var oModel = new sap.ui.model.json.JSONModel();

oModel.setData(aData);

oTable.setModel(oModel);

oTable.bindRows("/RESULTS");

// finally place the Table into the UI

oTable.placeAt("content");

</script>

</head>

</body>

</html>

Re: SAPUI5 with JSON or XML Data.

Former Member — Fri, 23 Nov 2012 11:32:15 GMT

Hello,

This does not seem the problem, the problem is to get the data from a webservice and not hardcoded.

So the question is how do I get the data from a webservice, I could only find an example of this using OData.

Kind regards,

Vincent

Re: SAPUI5 with JSON or XML Data.

AndreasKunz — Fri, 23 Nov 2012 12:40:42 GMT

Hi Vincent,

in Venkatesh's example you can just replace

var aData = ...

oModel.setData(aData);

with:

jQuery.ajax({

url: "/path/to/data.json", // for different servers cross-domain restrictions need to be handled

dataType: "json",

success: function(data, textStatus, jqXHR) { // callback called when data is received

oModel.setData({data: data}); // fill the received data into the JSONModel

error: function(jqXHR, textStatus, errorThrown) {

alert("error occurred");

}

});

Regards

Andreas

Re: SAPUI5 with JSON or XML Data.

qmacro — Sun, 25 Nov 2012 16:21:03 GMT

Hey Andreas

Was just curious: how does this use of jQuery.ajax compare with the SAPUI5 loadData method of sap.ui.model.json.JSONModel? Or did you just use the explicit ajax() call to highlight handling errors, etc?

cheers

Re: SAPUI5 with JSON or XML Data.

Former Member — Mon, 26 Nov 2012 13:28:01 GMT

Hello Andreas,

I think we are getting closer to the final result I'm looking for.

I have Implemented your code like this

http://pastie.org/5437098

But it is still not showing anything except for the errors.

Other information:

The link is via VPN so you will not be able to access it from your location but in FF the output looks like this:

{"RESULTS":[

{"RESULT":{"POSTING":"00505686209A1ED285EE08B57B223FB1","TITLE":"Test requisition Remsis","LANGUAGE":"en"}},

{"RESULT":{"POSTING":"00505686209A1ED283D768A973517FB1","TITLE":"Bouwkundige","LANGUAGE":"en"}},

{"RESULT":{"POSTING":"00505686209A1ED283D76F64FE01BFB1","TITLE":"Assistant Broker","LANGUAGE":"en"}},

{"RESULT":{"POSTING":"00505686209A1ED283D78AA0000BFFB1","TITLE":"Dynamic Implementation Engineer","LANGUAGE":"en"}},

{"RESULT":{"POSTING":"00505686209A1ED283D797A35D6A9FB1","TITLE":"Legacy Functionality Developer","LANGUAGE":"en"}},

{"RESULT":{"POSTING":"00505686209A1ED283D7A36F559F7FB1","TITLE":"Diensthoofd Preventieadviseur","LANGUAGE":"en"}},

{"RESULT":{"POSTING":"00505686209A1ED283D7A8EFC6559FB1","TITLE":"Senior Configuration LiasonSenior Configuration LiasonSenior Configuration LiasonSenior Configuration LiasonSenior Configuration LiasonSenior Configuration Liason","LANGUAGE":"en"}}]}

And I debugged the call to the SAP Backend via Firebug and it gives me back an OK as you can see below or via this http://i.imgur.com/utiWq.png , but the answer (antwoord) is empty.

Kind regards,

Vincent

Re: SAPUI5 with JSON or XML Data.

qmacro — Mon, 26 Nov 2012 14:35:44 GMT

Hi Vincent

Permit me to have a go at replying.

With the code you used (http://pastie.org/5437098) there are couple of small issues:

(1) you didn't declare the oModel

(2) the oModel.setData({data: data}) call is setting the data, but not as you're expecting to bind to it (bearing in mind you're about to call bindRows with "/RESULTS".

To fix (1), just add the declaration like this:

var oModel = new sap.ui.model.json.JSONModel();

To fix (2), the easiest way would be to adjust the JSON you're supplying in the setData() call to something like this:

oModel.setData(data);

so that the bindRows() call finds the records.

To be extreme, and to underline how this works, you could also specify the following in the setData() call:

oModel.setData({RESULTS: data.RESULTS});

but that would be of course crazy ... although it sort of illustrates the relationship 🙂

cheers

Re: SAPUI5 with JSON or XML Data.

Former Member — Mon, 26 Nov 2012 15:54:15 GMT

Hello DJ,

Again much thanks for your input into this mather, do you have access to a JSON link yourself for testing purposes?

Since the link I use for testing, works perfectly in FF (just shows the data in the window), but with the JQuery I don't get any return message in the SAPUI5 or via Firebug.

So I'm wondering if the code is the problem or my link is the problem.

The updated code looks like this: http://pastie.org/5437820

I would appreciate it if someone could test the code with another JSON link.

Kind regards & thanks again for the fast reply,

Vincent

Re: SAPUI5 with JSON or XML Data.

qmacro — Mon, 26 Nov 2012 16:06:00 GMT

Yes, I used my own copy of your JSON, served it from my own domain.

So I took your latest code, changed the URL from

http://delyo001.you.local:8000/sap/bc/youconsulting/ws/rest/anonymous/yr_hot_jobs

http://www.pipetree.com/qmacro/scratchpad/vincent.json

and started Chrome with --disable-web-security (as Andreas said previously: "for different servers cross-domain restrictions need to be handled")

I got the data OK.

Also it works within the Eclipse-local web browser, which is IE based:

Re: SAPUI5 with JSON or XML Data.

Luk11 — Tue, 27 Nov 2012 08:33:07 GMT

Hey Vincent,

You're experiencing XSS issues with the JSON calls.

You can work around this by packing your request. http://remysharp.com/2007/10/08/what-is-jsonp/

Add a parameter to your jQuery call: callback=?

If you have access to the backend coding, you can simply wrap the response

READ TABLE me->parameters INTO lw_param_format WITH KEY name = 'callback'.

IF sy-subrc IS INITIAL.

CONCATENATE lw_param_format-value '(' lv_result ')' INTO lv_result.

ENDIF.

Re: SAPUI5 with JSON or XML Data.

qmacro — Tue, 27 Nov 2012 08:55:04 GMT

And if you're going to return JSONP like this, don't forget to set the content type to 'text/javascript' rather than 'application/json'.

Re: SAPUI5 with JSON or XML Data.

AndreasKunz — Tue, 27 Nov 2012 15:43:19 GMT

Hi DJ,

yes, I just used jQuery.ajax(...) to make things easier to understand without knowing UI5 specifics.

oModel.loadData(url);

or even just

var oModel = new sap.ui.model.json.JSONModel(url);

would be shorter and easier to write.

Cheers

Andreas

Re: SAPUI5 with JSON or XML Data.

Former Member — Fri, 30 Nov 2012 13:03:39 GMT

Hello Andreas Kunz

What if I want to post now, I have edited your code like this:

 var aData =  
            jQuery.ajax({
              type: "POST",
              contentType: "application/xml",
                url: "http://delyo001.you.local:8000/sap/bc/youconsulting/ws/rest/anonymous/z_names_post",  // for different servers cross-domain restrictions need to be handled
          data: {firstname:"ezfzef",lastname:"efzefzef",callback:"?"},
                dataType: "json",

                success: function(xml) { // callback called when data is received
                  //oModel.setData(data);             // fill the received data into the JSONModel
                  alert("success to post");
                },
            
                error: function(xml) { // callback called when data is received
                  //oModel.setData(data);             // fill the received data into the JSONModel
                  alert("fail to  post");
                  alert(xml);
                }
            });

But I'm not able to get data into the system, I've tested the link via SOAPUI (a tool for webservice testing, and it worked).

The only error I get back from SAP via Firebug is this one:

NetworkError: 405 Method not allowed - http://delyo001.you.local:8000/sap/bc/youconsulting/ws/rest/anonymous/z_names_post

Kind regards,

Vincent

Re: SAPUI5 with JSON or XML Data.

Former Member — Thu, 04 Apr 2013 16:41:38 GMT

Hello,

I am new in SAPUI 5 world and searching for the same thing as Vincent. But instead of JSON data type I am using XML.

"Rss_Reader.xml"

<Rss_Reader>

<news>

<Editor>Rahul</Editor>

<Headline>SAPUI5</Headline>

<Description>Started Working on this new Platform</Description>

</news>

<news>

<Headline>SAPUI</Headline>

<Description>Platform</Description>

</news>

</Rss_Reader>

and using the following UI5 specifics

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

oModel.loadData("RSSReader.xml");

instead of AJAX

To check I am using the code :

Var oData = oModel.getProperty("Editor");

alert(oData.value);

Thanks in advance

Re: SAPUI5 with JSON or XML Data.

qmacro — Mon, 08 Apr 2013 12:43:49 GMT

Hi Rahul

I might have misunderstood what you're trying to do, but all you need to do is specify the correct path to the property. I implemented a little data table and assigned an XML data model to it, with the XML above as the source.

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

oModel.loadData("rssreader.xml", "", false);

sap.ui.getCore().setModel(oModel);

oTable.bindRows("/news");

oTable.placeAt("dataTable");

Screenshot attached

Re: SAPUI5 with JSON or XML Data.

Former Member — Mon, 18 Nov 2013 21:22:48 GMT

I 've been trying to make this code work , but i don't know why i can't get any data , can anyone please run it and tell me if it works , thanks

<!DOCTYPE HTML>

<html>

<head>

id="sap-ui-bootstrap"

data-sap-ui-libs="sap.ui.ux3, sap.ui.commons, sap.ui.table"

data-sap-ui-theme="sap_goldreflection">

</script>

// Create a SAP UI5 shell element

var oShell = new sap.ui.ux3.Shell("newsAppShell", {

appIcon : "http://www.sap.com/global/images/SAPLogo.gif",

showSearchTool:false,

appTitle : "news", });

// Just take the shell and place it in the html area called shellArea

oShell.placeAt("shellArea");

sap.ui.localResources("sitmil");

var layout = new sap.ui.commons.layout.MatrixLayout('layout');

layout.setWidth('80%');

// Pannel for Results

var rPannel = new sap.ui.commons.Panel('rPannel');

// Result Pannel

var rTitle = new sap.ui.commons.Title('rTitle');

rTitle.setText('News');

rPannel.setTitle(rTitle);

// Data table

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

oTable.addColumn(

new sap.ui.table.Column({

label: new sap.ui.commons.Label({text: "Editor"}),

sortProperty: "Editor"

}));

oTable.addColumn(

new sap.ui.table.Column({

label: new sap.ui.commons.Label({text: "Date"}),

sortProperty: "from"

}));

oTable.addColumn(

new sap.ui.table.Column({

label: new sap.ui.commons.Label({text: "Headline"}),

""),

sortProperty: "Headline"

}));

oTable.addColumn(

new sap.ui.table.Column({

label: new sap.ui.commons.Label({text: "Description1"}),

sortProperty: "Description"

}));

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

var sXML = "<news><Editor>Rahul</Editor><Date>19 jan 2013 </Date><Headline>SAPUI5</Headline><Description>Started Working on this new Platform</Description></news>"

oModel.setXML(sXML);

oTable.setModel(oModel);

oTable.bindRows("/news");

// add oTable content to the resultPannel

rPannel.addContent(oTable);

layout.createRow(rPannel);

oShell.addContent(layout);

</script>

</head>

</body>

</html>

Re: SAPUI5 with JSON or XML Data.

former_member91307 — Tue, 19 Nov 2013 02:57:22 GMT

Hi Reda,

Answered in the following post

http://scn.sap.com/thread/3456181

Thanks and Regards, Venkatesh

Re: SAPUI5 with JSON or XML Data.

Former Member — Wed, 11 Dec 2013 12:12:26 GMT

hai DJ can you attach the code for this frnd