Creating table with SAPUI5 from JSON

[Former Member]

Dear all,

I have created a JSONModel from the data shown below.

<ns2:Project xmlns:ns2="project:model">
     <Id>6</Id>
     <Code>AB12213</Code>
     <Version>0</Version>
     <Name>XXXXX</Name>
     <IsRegionalProject>false</IsRegionalProject>
     <CreatedDate>2013-04-29T00:00:00</CreatedDate>
     <Status>ACTIVE</Status>
     <Locations>
          <ns2:Location>
               <Id>1</Id>
               <IsMain>false</IsMain>
               <GeoLocations>
                    <ns2:GeoLocation>
                         <Id>0</Id>
                         <Longitude>XX.XXX</Longitude>
                         <Latitude>XX.XXX</Latitude>
                    </ns2:GeoLocation>
               </GeoLocations>
          </ns2:Location>
          <ns2:Location>
               <Id>2</Id>
               <IsMain>false</IsMain>
               <GeoLocations>
                    <ns2:GeoLocation>
                         <Id>0</Id>
                         <Longitude>XX.XXX</Longitude>
                         <Latitude>XX.XXX</Latitude>
                    </ns2:GeoLocation>
               </GeoLocations>
          </ns2:Location>
     </Locations>
</ns2:Project>

Now I set the model

sap.ui.getCore().setModel(oModel,"mainModel");

(oModel has the data loaded)

In the table, I bind the rows as below

locTable.bindRows('mainModel>/Locations');

Now in the above table(locTable), I need the rows to display the data in 3 columns : 'IsMain', 'Longitude' and 'Latitude'.

I am able to display the value of  'IsMain', like this : mainModel>IsMain.  But how do I display the Longitude and Latitude and these values lie inside the 'GeoLocations' tag.

Regards,

Noufal

[former_member104694]

Hi Noufal,

Using the XML data you have mentioned, you could try something like the following...

 var oControl = new sap.ui.commons.TextView().bindProperty("text", "mainModel>IsMain");
 var oColumn = new sap.ui.table.Column({label: new sap.ui.commons.Label({text: "IsMain"}), template: oControl});
 oTable.addColumn(oColumn);
 var oControl = new sap.ui.commons.TextView().bindProperty("text", "mainModel>GeoLocations/ns2:GeoLocation/Longitude");
 var oColumn = new sap.ui.table.Column({label: new sap.ui.commons.Label({text: "Longitude"}), template: oControl});
 oTable.addColumn(oColumn);
 var oControl = new sap.ui.commons.TextView().bindProperty("text", "mainModel>GeoLocations/ns2:GeoLocation/Latitude");
 var oColumn = new sap.ui.table.Column({label: new sap.ui.commons.Label({text: "Latitude"}), template: oControl});
 oTable.addColumn(oColumn);
 oTable.bindRows("mainModel>/Locations/ns2:Location");

Cheers,

Ian

[Former Member]

There could be multiple Geolocations under a location as per the xml. So I have created a seperate table and based on the location selection, I display the coordinates.

Now I bind the rows based on the row selection of the location. It works fine now.

locationTable.attachRowSelectionChange(function(oEvent){
     var rowContext = oEvent.getParameter("rowContext");
     url = rowContext+"/GeoLocations";
     coordinatesTable.bindRows(url);
};

Noufal