Community
cancel
Turn on suggestions
Auto-suggest helps you quickly narrow down your search results by suggesting possible matches as you type.
Showing results for 
Search instead for 
Did you mean: 
Read only

SAPUI5 with JSON or XML Data.

Go to solution
Former Member

on ‎2012 Nov 20 1:49 PM

0 Likes
3,660

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/#axzz2Ckw9...

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

Know the answer?

Help others by sharing your knowledge.

Answer

Need more details?

Request clarification before answering.

Show replies
Show replies
View Entire Topic
former_member91307
Contributor
‎2012 Nov 23 11:25 AM
0 Likes

Hi Vincent,

Please find the HTML code below.

<!DOCTYPE html>

<html><head>

    <meta http-equiv='X-UA-Compatible' content='IE=edge' />

    <title>Table example</title>

   

    <!-- Load UI5, select gold reflection theme and the "commons" and "table" control libraries -->

    <script id='sap-ui-bootstrap' type='text/javascript'

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

       data-sap-ui-theme='sap_goldreflection'

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

   

    <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 class='sapUiBody'>

        <div id='content'></div>

    </body>

</html>

Show replies
Show replies
Former Member
‎2012 Nov 23 11:32 AM
0 Likes

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

AndreasKunz
Product and Topic Expert
Product and Topic Expert
‎2012 Nov 23 12:40 PM
0 Likes

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

qmacro
Developer Advocate
Developer Advocate
‎2012 Nov 25 4:21 PM
0 Likes

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

dj

Former Member
‎2012 Nov 26 1:28 PM
0 Likes

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

qmacro
Developer Advocate
Developer Advocate
‎2012 Nov 26 2:35 PM
0 Likes

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

dj

Former Member
‎2012 Nov 26 3:54 PM
0 Likes

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

qmacro
Developer Advocate
Developer Advocate
‎2012 Nov 26 4:06 PM
0 Likes

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

to

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:

dj

Luk11
Active Participant
‎2012 Nov 27 8:33 AM
0 Likes

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.

qmacro
Developer Advocate
Developer Advocate
‎2012 Nov 27 8:55 AM
0 Likes

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'.

dj

AndreasKunz
Product and Topic Expert
Product and Topic Expert
‎2012 Nov 27 3:43 PM
0 Likes

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

Former Member
‎2012 Nov 30 1:03 PM
0 Likes

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

Former Member
‎2013 Dec 11 12:12 PM
0 Likes

hai DJ can you attach the code for this frnd

qmacro
Developer Advocate
Developer Advocate
‎2013 Dec 11 4:09 PM
0 Likes

It's the same code as referenced above. 

Former Member
‎2013 Dec 12 5:10 AM
0 Likes

I am using the Below code ......y its not working Error is comming ........if the cross browser is the issue for this code ,,,,,then tell me how to disable the cross domain issue in browser Friend

<html>

<head>

  <meta http-equiv="X-UA-Compatible" content="IE=edge" />

  <title>SAPUI5 Conditional Databinding</title>

  <script src="resources/sap-ui-core.js"

    type="text/javascript"

    id="sap-ui-bootstrap"

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

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

  </script>

  <script>

    jQuery.sap.log.setLevel(jQuery.sap.log.LogLevel['ERROR']);

        // 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/POSTING}"}); // short binding notation

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

        

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

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

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

   

        var aData = 

        jQuery.ajax({

           url: "http://www.pipetree.com/qmacro/scratchpad/vincent.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);             // fill the received data into the JSONModel

  alert("sparta");

           },

           error: function(jqXHR, textStatus, errorThrown) {

          alert("error");

           }

        });

        oTable.setModel(oModel);

        oTable.bindRows("/RESULTS");

       

        // finally place the Table into the UI

        oTable.placeAt("dataTable");

  </script>

</head>

<body class="sapUiBody">

  <h1>SAPUI5 Conditional Databinding</h1>

  <div id="dataTable"></div>

</body>

</html>

Former Member
‎2013 Dec 12 5:20 AM
0 Likes

when is run the program in chrome the table is coming but after that ......this error is coming [object] [object]   

Former Member
‎2013 Dec 12 2:47 PM
0 Likes

As u said DJ this time i disable my websecurity and run this code its success 😕 buttttttttt i get alert msg SPARTA.......but i dnt get JSON data inside the table why DJ ?

<html>

<head>

  <meta http-equiv="X-UA-Compatible" content="IE=edge" />

  <title>SAPUI5 Conditional Databinding</title>

  <script src="resources/sap-ui-core.js"

    type="text/javascript"

    id="sap-ui-bootstrap"

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

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

  </script>

  <script>

    jQuery.sap.log.setLevel(jQuery.sap.log.LogLevel['ERROR']);

        // 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/POSTING}"}); // 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/TITLE}"}); // short binding notation

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

        

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

        var aData = 

        jQuery.ajax({

           url: "http://www.pipetree.com/qmacro/scratchpad/vincent.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);

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

  alert("sparta");

           },

           error: function(jqXHR, textStatus, errorThrown) {

          

               alert(jqXHR);

               alert(textStatus);

               alert(errorThrown);

           }

        });

        oTable.setModel(oModel);

        oTable.bindRows("/RESULTS");

       

        // finally place the Table into the UI

        oTable.placeAt("dataTable");

  </script>

</head>

<body class="sapUiBody">

  <h1>SAPUI5 Conditional Databinding</h1>

  <div id="dataTable"></div>

</body>

</html>

Ask a Question