Search code examples
odatasapui5

Sorting OData model in SAPUI5

Dear SAPUI5 Developers,

I developed a SAPUI5 Fiori Worklist project by using WebIDE template projects.

In the Component.js file the OData model has been fetched.

var sServiceUrl = this.getMetadata().getManifestEntry("sap.app").dataSources.mainService.uri;
        var oModel = new sap.ui.model.odata.ODataModel(sServiceUrl, {
            json: true,
            loadMetadataAsync: true
        });
        oModel.attachMetadataFailed(function() {
            // Call some functions from APP controller to show suitable message
        }, this);
        this.setModel(oModel, "BrandSet");

This part of code causes a call to OData server to fetch data from the remote server. Now I want to order the data in backend and then receive the data. Assume the sorting function has been implemented correctly in the backend. Thus, if I use $orderby=name or $orderby=price it has to be sorted by name or price respectively.

In some toturial they said for ordering use sorter option inside of the XML view file. Like here: https://sapui5.hana.ondemand.com/#docs/guide/c4b2a32bb72f483faa173e890e48d812.html

Now my questions are:

  1. How to apply this sorting inside of the Component.js file where the Model is initiated?

  2. The second question is how to apply this ordering when we apply a filter to the model? Like the example that in the following link applied filter: https://sapui5.hana.ondemand.com/#docs/guide/5295470d7eee46c1898ee46c1b9ad763.html

In fact I am looking for a function or any kind of method that add the $orderby=xxx to the OData service call.

I found a way here: https://sapui5.hana.ondemand.com/docs/api/symbols/sap.ui.model.odata.ODataModel.html#constructor

If I use mParameters.serviceUrlParams then I can add some URL parameter to the service request but it has been said "these parameters will be attached to all requests". Does it mean if I add the $orderbywith this method then I can not get rid of that in the further requests on that data model for example for filtering?

Solution

  • An app would normally be structured a bit differently to what you propose. The general assumption is that there is a lot of data available from the backend and to load all this data at once can cause performance problems, particularly when used over a mobile phone network. Furthermore, the data is an oData Entity Set, that is, a list of many items of the same type, so the data would be presented in the UI with a list or table.

    Typically the app would then show the data in some kind of list, such as sap.m.List or sap.m.Table. These controls are designed to work with large volumes of data and would load initially the first 20 items from the entity set. Only when the user scrolls down the list of data would additional items be loaded. Also, with these controls the user can decide to sort or filter the data according to certain fields in your data.

    Assuming that your app is work like this, here is the standard approach.

    The Main model (as defined in the manifest) would not be loaded in Component.js, but loaded via the binding defined in the xml views of the app. In the views you could define a fixed sort and/or filter in the binding or you could allow the user to set the sort and filter criteria. This would be handled programmatically in the respective controllers. Normally the changes that the user makes to the sort and filter would be applied separately. For example, he/she chooses an new sort order, the oData is reread and the new sort order shown in the UI. Then the user may chose a filter criteria, and this is applied too. Of course, in your programming logic in the controllers you would need to have applied any default sort and filter criteria and then maybe combine or replace these with the criteria selected by the user.

    To see an example of this, I would suggest to look at the Template Application “SAP Fiori Master-Detail Application” in the WebIDE.