OData Model and Data Binding

[SandipAgarwalla]

hi

how to bind the values from the odata model to different UI controls? e.g. to populate the data in Tree or a shell element. Currently stuck in binding the UI elments with the values retrieved from oData.

My odata returns the data with multiple entries in the following structure

<?xml version="1.0" encoding="utf-8"?>
    <id>http://server:port/sap/opu/odata/sap/ABC_DEMO/ZLot_Querys</id>
    <title type="text">ZLot_Querys</title>
 <updated>2013-08-13T04:50:45Z</updated>
    <author>
        <name/>
    </author>
    <link href="ZLot_Querys" rel="self" title="ZLot_Querys"/>
    <entry>
 <id>http://server:8007/sap/opu/odata/sap/ABC_DEMO/ZLot_Querys(YardNo='1501',Lot='50000762',Vin='WDBHA24G...')</id>
        <title type="text">ZLot_Querys(YardNo='1501',Lot='50000762',Vin='WDBHA24GXYA814180')</title>
 <updated>2013-08-13T04:50:45Z</updated>
        <category term="ABC_DEMO.ZLot_Query" scheme="http://schemas.microsoft.com/ado/2007/08/dataservices/scheme"/>
        <link href="ZLot_Querys(YardNo='1501',Lot='50000762',Vin='WDBHA24GXYA814180')" rel="edit" title="ZLot_Query"/>
        <link href="ZLot_Querys(YardNo='1501',Lot='50000762',Vin='WDBHA24GXYA814180')/Z_LOT_REVIEW_READ" rel="http://schemas.microsoft.com/ado/2007/08/dataservices/related/Z_LOT_REVIEW_READ" type="application/atom+xml;type=entry" title="Z_LOT_REVIEW_READ"/>
        <content type="application/xml">
 <m:properties>
 <d:YardNo>1501</d:YardNo>
 <d:Mandt>400</d:Mandt>
 <d:Lot>50000762</d:Lot>
 <d:Vin>WDBHA24GXYA814180</d:Vin>
 <d:YardName>KINGSPORT</d:YardName>
 <d:ModelYear>2007</d:ModelYear>
 <d:LicenseNo>1ABC1234</d:LicenseNo>
 <d:ClaimNo>0021256-01-D</d:ClaimNo>
 <d:LossDate>2013-05-24T00:00:00</d:LossDate>
 <d:FirstNoticeDate>2013-05-27T00:00:00</d:FirstNoticeDate>
 <d:SellerId>0001000185</d:SellerId>
 <d:VehicleType>V</d:VehicleType>
 </m:properties>
 </content>
    </entry>
<entry>
        <id>http://server:8007/sap/opu/odata/sap/ABC_DEMO/ZLot_Querys(YardNo='1502',Lot='50000763',Vin='WDBHA24G...')</id>
        <title type="text">ZLot_Querys(YardNo='1502',Lot='50000763',Vin='WDBHA24GXYA814181')</title>
        <updated>2013-08-13T04:50:45Z</updated>
        <category term="COPART_DEMO.ZLot_Query" scheme="http://schemas.microsoft.com/ado/2007/08/dataservices/scheme"/>
        <link href="ZLot_Querys(YardNo='1502',Lot='50000763',Vin='WDBHA24GXYA814181')" rel="edit" title="ZLot_Query"/>
        <link href="ZLot_Querys(YardNo='1502',Lot='50000763',Vin='WDBHA24GXYA814181')/Z_LOT_REVIEW_READ" rel="http://schemas.microsoft.com/ado/2007/08/dataservices/related/Z_LOT_REVIEW_READ" type="application/atom+xml;type=entry" title="Z_LOT_REVIEW_READ"/>
        <content type="application/xml">
            <m:properties>
                <d:YardNo>1502</d:YardNo>
                <d:Mandt>400</d:Mandt>
                <d:Lot>50000763</d:Lot>
                <d:Vin>WDBHA24GXYA814181</d:Vin>
                <d:YardName>TORONTO</d:YardName>
                <d:ModelYear>2008</d:ModelYear>
                <d:LicenseNo>1ABC1235</d:LicenseNo>
                <d:ClaimNo>0021257-01-D</d:ClaimNo>
                <d:LossDate>2013-05-24T00:00:00</d:LossDate>
                <d:FirstNoticeDate>2013-05-27T00:00:00</d:FirstNoticeDate>
                <d:SellerId>0001000185</d:SellerId>
                <d:VehicleType>V</d:VehicleType>
            </m:properties>
        </content>
    </entry>

There are multiple entries returned by the oData.

1) How do I get all the Yard Number & Lot Number for all the entries. Number of entries ??

2) How do I get all the fields for a particular entry which is based on Yard and Lot Number

Help is much appreciated.

Thanks

Sandip

[former_member293602 · Accepted solution]

Hi Sandip,

to get information on the fields of a particular entity, you might want to make use of the method "getServiceMetadata()" of the oData model. If you "drill" into the "dataServices" object of the result, you will find the metadata of the service including all fields... .

To get the number of entries of a collection and the collection is bound to a control, you can use the methods "getBinding('rows').getLength()". Here "rows" is the aggregation that the collection is bound to.

Here is a small example that shows how those methods can be used:

<script>
 // This function will be called after the data has been read
 function onRequestCompleted(){
  // Get the table control from the "core"
  var oTable = sap.ui.getCore().byId("idCities");
  // Change the title of the table and add the number of rows
  oTable.setTitle("Number of cities: "+oTable.getBinding("rows").getLength());
 };  
 var oModel = new sap.ui.model.json.JSONModel();
 // Registration for the RequestCompleted event
 oModel.attachRequestCompleted(onRequestCompleted);
 // Here I'm using a nice freely available service...
 // With the uri below, it will search in the "like" mode vor cities
 // with the name "york"
 var uri = "proxy/http/api.openweathermap.org/data/2.1/find/name?q=york&type=like";
 sap.ui.getCore().setModel(oModel);
 oModel.loadData(uri);
 // The UI contains a table, which only displays the city name
 var oTable = new sap.ui.table.Table("idCities", { 
  visibleRowCountMode : sap.ui.table.VisibleRowCountMode.Auto,
  //visibleRowCount: 0,
  columns : [ 
   {label: "City", template: "name" },   
  ]
 });
 oTable.bindRows("/list");
 oTable.placeAt("content");
</script>
<!-- To show the result of "visibleRowCountMode = auto", the parent of
the table needs to have a defined height -->
<style> 
   #content { 
    height: 600px 
  }
</style>

Regards, Frank

[SandipAgarwalla · Accepted solution]

Hi Frank

Thanks for your reply.

In my case, the odata model is bound to any UI control. From the oData output, I need to pick the entries and fields and then populate the UI.

Here, the collection - ZLot_Querys

I tried getting the number of entities using - var noOfEntities = oZLotModel.getBinding("ZLot_Querys").getLength();

but it does not work.

Also to get the value of a property from first entitiy

var yardNo = oZLotModel.getProperty("/ZLot_Querys(YardNo='1501',Lot='50000762',Vin='WDBHA24GXYA814180')/YardNo/");

But this again does not work. I am not sure what is wrong with the path.

Appreciate if you can help

Thanks

Sandip

[former_member293602 · Accepted solution]

Hi Sandip,

to get the number of entries, you can not "ask" the model. Instead you have to "ask" a control (e.g. a table) to get the number of entries. In my example above, this is done by:

oTable.getBinding("rows").getLength()

But this will not work, if the collection you would like to access is not bound to a control. And this is the same reason why the getProperty() method is not working,

I'm wondering if it would be possible on your side, to bind the collection to a control and use filters to select the entries you are interested in. In that case, only the data you want to display would be transferred to the browser. This will improve the performance.

You can check https://sapui5.hana.ondemand.com/sdk/#docs/guide/DataBinding.html for more information on data binding.

If you read all data, e.g. by calling the read() function of the oData model, you might run into performance problems depending on the amount of data transferred to the browser.

Regards, Frank

[SandipAgarwalla · Accepted solution]

Thanks Frank

So if I get it correctly, we need to bind the odata model to a control in UI5, then only we can get the values and all

then, how about controls like Shell, Tree. How would you populate these controls from oData

In my case, I have a Shell, and Form with UI elements which need to be updated with the data from oData.

so, i tried binding the shell with the entity collection

oShell.bindAggregation("ZLot_Querys");

How to get the values from each entity from ZLot_Querys collection??

Regards

Sandip

[SandipAgarwalla · Accepted solution]

Ok, I had to create the dummy table and bind the collection entity set to the rows

oTable.bindRows("/ZLot_Querys");

I can get the number of entities

var entries = oTable.getBinding("rows").getLength();

but how do I reach each specific entity and get the values of the fields, something like

ZLot_Querys/YardNo

Its bit weird though that you cant get the properties value directly from a model, you need to bind it to a control. This will work fine for Table, List, Combo etc , but how about multiple elements in complex controls, Forms, Shell etc, unless I am missing something here

Regards

Sandip

[former_member293602 · Accepted solution]

Hi Sandip,

to get an example on how to work with collections, you might want to check out the table control: https://sapui5.hana.ondemand.com/sdk/#test-resources/sap/ui/table/demokit/Table.html.

The shell can not be used "directly" for this, but you can place other controls "in" the shell.

To get a more complete example on how to build an application you can take a look at the "Best Practice" app: https://sapui5.hana.ondemand.com/sdk/#docs/guide/BestPractice.html.

I hope this helps.

Regards, Frank

[SandipAgarwalla · Accepted solution]

Hi Frank

Thanks for your help.

I built the Shell with the UI, there is no problem. I am stuck when it comes to binding the data from oData model to the Ui Elements.

For Table, it provides bindRows() functionality which helps in setting the path, and then all column data can be referred by the path & variable name. However I couldnt find something similar for Shell or Form controls which will have multiple ui elements.

I tried setting -

oShell.bindElement(globalContextPath);

  //where global path is the Collections from the oData Model

I also cant seem to get the data from the model. something like

alert("Core Property"+sap.ui.getCore().getModel().getProperty("{IYardNo}")); //this does not work

e.g. If I have a text view in Shell, how do I set the value of this text field from a oData model? This model has collections, and each collection will have multiple fields. One of these field from the collection need to be set in the text Field Element in the Shell.

Appreciate your help.

Thanks

Sandip

[former_member293602 · Accepted solution]

Hi Sandip,

if you have a text view on a shell, you could do the following:

1. First you need to define the model and set it to the core:
   

   var oModel = new sap.ui.model.odata.ODataModel("http://server:8007/sap/opu/odata/sap/ABC_DEMO");
   sap.ui.getCore().setModel(oModel);

2. Then you could bind the shell to a concrete entry of a collection, e.g.:
   

   oShell.bindElement("/ZLot_Querys(YardNo='1502',Lot='50000763',Vin='WDBHA24GXYA814181')");

3. After that you can bind the text view to a property of the entity above.
   

   oTextView.bindText("YardName");

Most probably you would have a view which contains a table and in addition a form. Then you would bind
the table rows to the collection "ZLot_Querys". The fields contained in the form would be bound to
single properties of the collection. To show the details for a table entry, you
would register an event handler for the "rowSelectionChange" event. This event handler would then
set the binding context of the form to context of the selected row... .

Regards, Frank

[SandipAgarwalla · Accepted solution]

Thanks a lot Frank.

Couple of more questions on the same line

1) How to get the length of the collection, lets say /ZLot_Querys

the odata returns me multiple entities of /ZLot_Querys in the format

/ZLot_Querys(YardNo='1502',Lot='50000763',);

/ZLot_Querys(YardNo='1503',Lot='50000763',);

/ZLot_Querys(YardNo='1501',Lot='50000763',);

I am looking to get the count of /ZLot_Querys . I did the following

var oModel = sap.ui.getCore().getModel("oYardModel");

var yardno = oModel.getProperty("/ZLot_Querys").getLength()  //but this returns undefined

2) How to get a context for any of the entity and then get the indivisual property

Thanks

Sandip

[former_member293602 · Accepted solution]

Hi Sandip,

if you bind the collection to a control, the number of entries in that collection can be determined as you already stated:

Ok, I had to create the dummy table and bind the collection entity set to the rows
 oTable.bindRows("/ZLot_Querys");
I can get the number of entities
var entries = oTable.getBinding("rows").getLength();

Alternatively you can read the number of entries via an AJAX jQuery request. Here is an example for the Northwind service:

$.get("proxy/http/services.odata.org/Northwind/Northwind.svc/Orders/$count", 
     function(nCount) {
                 console.log(nCount);
             });

The context of an entry in the collection can be retrieved as follows:

onPress : function(oEvent){
 this.getView().byId("details").setBindingContext(oEvent.getParameter("listItem").getBindingContext());
},

This snippet assumes that the collection is bound to the items of a list. If a list item is selected, you can get the corresponding controls as an event parameter via oEvent.getParameter("listItem") . From there, the context can be retrieved via getBindingContext() .

You can check this post http://scn.sap.com/message/14281224#14281224 for a complete example.

Regards, Frank

[SandipAgarwalla]

any help? Any pointers would be helpful.

Thanks

Sandip