In this tutorial, we explore the features of OData V4 in OpenUI5. We use an OData V4 service that simulates the entity set People of the TripPin sample service, intercept all requests with a mock server, and progressively build a list/detail application with creation, editing, deletion, filtering, sorting, batch groups, and OData operations.
OData is a standard protocol for creating and consuming data using simple HTTP and REST APIs for create, read, update, delete (CRUD) operations.
We start with an initial app that simply retrieves data from an OData V4 service and displays it as a plain list, and progressively grow it across 11 steps.
💡
You don't have to do all tutorial steps sequentially, you can also jump directly to any step you want. Just download the code from the previous step, and start there.You can view and download the files for all steps in the Demo Kit at OData V4.
The tutorial consists of the following steps. To start, just open the first link — you'll be guided from there.
- Step 1: The Initial App — We start by setting up a simple app that loads data from an OData service and displays it in a table. We use a mock server to simulate requests to and responses from the service. (🔗 Live Preview | 📥 Download Solution (TS)📥 Download Solution (JS))
- Step 2: Data Access and Client-Server Communication — In this step, we see how the Table that is bound to the People entity set initially requests its data, and how the data can be refreshed. (🔗 Live Preview | 📥 Download Solution (TS)📥 Download Solution (JS))
- Step 3: Automatic Data Type Detection — In this step, we use the automatic data type detection of the OData V4 model to parse, validate, and format user entries. (🔗 Live Preview | 📥 Download Solution (TS)📥 Download Solution (JS))
- Step 4: Filtering, Sorting, and Counting — In this step, we add features to filter, sort, and count the user data by using the OData V4 model API to apply OData system query options $filter, $orderby, and $count. (🔗 Live Preview | 📥 Download Solution (TS)📥 Download Solution (JS))
- Step 5: Batch Groups — In this step, we have a closer look at batch groups. Batch groups are used to group multiple requests into one server request to improve the overall performance. (🔗 Live Preview | 📥 Download Solution (TS)📥 Download Solution (JS))
- Step 6: Create and Edit — In this step, we will make it possible to create and edit (update) user data from the user interface and send the data to the back end. (🔗 Live Preview | 📥 Download Solution (TS)📥 Download Solution (JS))
- Step 7: Delete — In this step, we make it possible to delete user data. (🔗 Live Preview | 📥 Download Solution (TS)📥 Download Solution (JS))
- Step 8: OData Operations — Our OData service provides one OData operation: the ResetDataSource action. In this step, we add a button that resets all data changes we made during the tutorial to their original state using this action. (🔗 Live Preview | 📥 Download Solution (TS)📥 Download Solution (JS))
- Step 9: List-Detail Scenario — In this step we add a detail area with additional information. (🔗 Live Preview | 📥 Download Solution (TS)📥 Download Solution (JS))
- Step 10: Enable Data Reuse — In this step we avoid unnecessary back-end requests by preventing the destruction of data shown in the detail area when sorting or filtering the list. (🔗 Live Preview | 📥 Download Solution (TS)📥 Download Solution (JS))
- Step 11: Add Table with :n Navigation to Detail Area — In this step we add a table with additional information to the detail area. (🔗 Live Preview | 📥 Download Solution (TS)📥 Download Solution (JS))
- OData Standard Protocol
- OData V4 Reference Services including TripPin
- OData V4 Model (in the OpenUI5 Developer Guide)
- Basic Tutorial on the OData Home Page
Copyright (c) 2026 SAP SE or an SAP affiliate company. All rights reserved. This project is licensed under the Apache Software License, version 2.0 except as noted otherwise in the LICENSE file.