CODEWITHSUNDEEP
jsondata-bindingodatasapui5
fc67
fc67

Reputation: 419

Data binding with xsodata on SAP UI5

I have a backend that runs on SAP HANA, which uses a xsodata service to communicate with the frontend (coded with SAP UI5). The xsodata service outputs data in the following format:

{
  "d": {
    "results": [
      {
        "__metadata": {
          "type": "music.Music_infoType",
          "uri": "***/odata/music.xsodata/Music_info('10020')"
        },
        "ID": "10020",
        "TITLE": "Music 1"
      },
      {
        "__metadata": {
          "type": "music.Music_infoType",
          "uri": "***/odata/music.xsodata/Music_info('10026')"
      },
    "ID": "10026",
    "TITLE": "Music 2"
  }
}

In my manifest.json file I load this information into a model:

"sap.app": {
  ...
  "dataSources": {
    "topmusics": {
        "uri": "/path/to/odata/music.xsodata/Music_info",
        "type": "JSON"
    }
  }
},
"sap.ui5": {
  ...
  "models": {
   "topmusics": {
        "dataSource": "topmusics"
    }
  }
}

At the XML view I try to pass a parameter to filter the top 5 musics and load the data to a list. However, since the data doesn't start at the "root" of the file but at "d/results" (see the json snippet), I also have to pass this information, which leads me to the following code:

<List headerText="Top 5 Musics" 
  items="{
    path : 'topmusics>/d/results',
    parameters : {  
        $top : '5'
    }}"
  class="sapUiResponsiveMargin">
  <CustomListItem type="Navigation" press="onClick">
      <Link text="{topmusics>TITLE}"
            press="onClick" />
  </CustomListItem>
</List>

However, with this code I get the full music list and not just the top 5, which leads me to believe that since I have to pass "/d/results" the xsodata parameter ("$top : '5'") is ignored. Is there any way I can accomplish this?

On a side node, I don't set the "$top : '5'" parameter on the manifest.json file because I also want to be able to use the same model with other xsodata parameters.

Edit: Code of the controller:

onClick: function(oEvent) {
    var oItem = oEvent.getSource();
    var oRouter = sap.ui.core.UIComponent.getRouterFor(this);
    oRouter.navTo("musicDetails", {
        musicPath: oItem.getBindingContext("topmusics").getPath().substr(11)
    });
}

Upvotes: 0

Views: 1356

Answers (1)

Stephen S
Stephen S

Reputation: 3994

The $top parameter in the binding parameters seems to be ignored by UI5. Also the documentation does not specify the existense of such a parameter. However there appears to be a undocumented property 'length' which can be provided in the binding string.

{ path : '/Collection', length: 5 }

Also since you are using an OData service, it's ideal to use the OData model instead of the JSON model. The service URL should be upto the .xsodata path excluding the EntitySet(/Music_info).

So your manifest should look like this: 

"topmusics": {
    "uri": "/path/to/odata/music.xsodata",
    "type": "OData"
}

And your XML will be set like this

<List headerText="Top 5 Musics" 
  items="{
  path : 'topmusics>/Music_info',
  length : 5
  }"
 class="sapUiResponsiveMargin">
 <CustomListItem type="Navigation" press="onClick">
     <Link text="{topmusics>TITLE}"
           press="onClick" />
 </CustomListItem>
</List>

Upvotes: 1

Related Questions