Inserting OData query options into your SAPUI5 app

Details

You will learn

The previous tutorial introduced a number of OData query options that developers can use to offload logic from the client to the OData service. In this tutorial, you will learn how to incorporate one or more query options into your SAPUI5 application.

Step 1: Log into SAP Cloud Platform

Log into your SAP Cloud Platform account and open SAP Web IDE tab in a Google Chrome browser. Ensure that your latest code has been committed to your git repository. If so, you should have green dots next to the folders and files in your project (as shown below). If not, commit your files to Git now.

Step 2: Examine master view XML file

Open the northwind project folder and then the view folder. Double-click on Master.view.xml. Locate the items attribute in the List element.

The items attribute points to the primary collection (Products) of the Northwind OData service which is displayed in the “master” list of the app. Since this is the last part of the OData query, you will insert any query options in this attribute.

You may want to add some line breaks in your code to match the image below. It will make it simpler to change the items attribute in the steps below.

Step 3: Change the sort parameters

If you run your app, you will notice that the OData results are returned sorted by the ProductID field. This default behavior is driven by the PropertyRef in the Key element of the data model (ProductID in this case). You can see the key in the Northwind metadata document or your northwind/model/metadata.xml file.

It is easier for a user to find a given product by name if the list is in alphabetical order. To implement this through a query option, you could append the items attribute in Main.view.xml with ?$orderby=ProductName.

However, the proper way to make the change is to use the UI5 Sorter for list bindings. In Master.view.xml, modify the items attribute of the List element as shown below.

Save your change and run the app (remember to empty the cache and reload if necessary). You will see that the master list is now sorted by product name.

Step 5: Get the view to add additional filters

To add additional query options as a filter requires a different approach because the List element doesn’t support the a Filter value as a binding path. The way to add one or more filter query options is add a function in the view controller (Master.controller.js). In the Web IDE, open northwind/view/Master.controller.js and locate the onInit: function().

To sort by the product name and exclude products that are out of stock, insert the lines below to create a variable with a reference to the view.

// get the view for filtering
this._oView = this.getView();

Step 6: Add the filter

At the bottom on the onInit function, insert the code snippet below which adds an attachAfterRendering function which defines the parameters for the UI5 Filter, creates a new Filter object, gets the list binding and applies the filter:

Save your change, switch to the app preview tab and select Hard Reload or Empty Cache and Hard Reload. Your app should now look like this:

Step 8: Add another filter

Suppose there is a need to support a particular sales team in an operating unit that only sells products from specific suppliers. You can add in a second logical test. To add an additional filter to exclude products from Supplier IDs 1 and 2, modify the attachAfterRendering function to create a second filter, then apply both to the list binding:

Note the addition of the square brackets in the when applying the second filter.

Step 9: Save and reload

Save your change, switch to the app preview tab and select Hard Reload or Empty Cache and Hard Reload. Your view file and app should now look like this:

Step 10: Keep or discard changes

You can keep these edits if you would like, or to roll back to the previous state by using Git. To use Git, click on the Git icon in Web IDE, click the arrow under Discard in the Git pane and click OK on the Git confirmation dialog box. After clicking the discard arrow, the green dot (indicating the version in your project folder is the same as that in Git) will reappear next to Master.view.xml and Master.controller.js (as well as the view and northwind folders).