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,661

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 Member
‎2013 Apr 04 5:41 PM
0 Likes

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>

                    <Date>19 jan 2013 </Date>

                    <Headline>SAPUI5</Headline>

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

          </news>

          <news>

                    <Editor>Rex</Editor>

                    <Date>18 jan 2013 </Date>

                    <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

Show replies
Show replies
qmacro
Developer Advocate
Developer Advocate
‎2013 Apr 08 1:43 PM
0 Likes

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

dj

Former Member
‎2013 Nov 18 9:22 PM
0 Likes

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>

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

              

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

                      id="sap-ui-bootstrap"

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

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

               </script>

               <script type="text/javascript">

                    // 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"}),

                                    template: new sap.ui.commons.TextField().bindProperty("value", "Editor"),

                                    sortProperty: "Editor"

                          }));

                          

                         

                          

                          oTable.addColumn(

                               new sap.ui.table.Column({

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

                                    template: new sap.ui.commons.TextField().bindProperty("value", "Date"),

                                    sortProperty: "from"

                          }));

                          

                          oTable.addColumn(

                               new sap.ui.table.Column({

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

                                    template: new sap.ui.commons.TextField().bindProperty("value", "Headline" +

                                                        ""),

                                    sortProperty: "Headline"

                          }));

                          

                          oTable.addColumn(

                                  new sap.ui.table.Column({

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

                                       template: new sap.ui.commons.TextField().bindProperty("value", "Description"),

                                       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 class="sapUiBody" role="application">

          <div id="shellArea"></div>

     </body>

</html>

former_member91307
Contributor
‎2013 Nov 19 2:57 AM
0 Likes

Hi Reda,

Answered in the following post

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

Thanks and Regards, Venkatesh

Ask a Question