Simple openUI5 application II. – How to create a frontend in OpenUI5 that will consume an OData service

After the first part of this tutorial, we have created and run an OData service that can write/read data to/from a SAP database table. In this part, I will explain how the frontend of an OpenUI5 application works. Whole source code can be found in my github repository. You will actually see the running demo application at the end of this article.

ui1

Desired look and functionality of an application

Screenshots show how application will look like. It should be able to use all OData CRUD methods – CREATE, PUT, DELETE, GET. That means you will be able to list, create, manage and delete users.

ui2

ui3

Code snippets

First, we need to set up our OData model in order use it further in the application. We will use the link to our service which can be seen in the previous post in transaction /IWFND/GW_CLIENT. This will allow us to connect our frontend part of an application(OpenUI5 in JavaScript) with the backend part (SAP Gateway) using an OData protocol.

Then, we will initialize the table, its columns and bind the rows to user set. It means that the content of a table will be automatically loaded with data from SAP Gateway by using OData calls which are hidden for us, since OpenUI5 handles them in background.

We will prepare CRUD functions that will handle create, update and delete operations. Inside of every function, we will call an appropriate OData method, fill it with new data and specify success and error callbacks.

And this is it! We have running OpenUI5 application that consumes and write data from / to an OData service. Full source codes could be found in my github repository.

Demo application

As a bonus, I have prepared this application for you to try the user experience a little bit. It does not consume the data from SAP Gateway, but from the mockserver which can simulate an OData service with predefined data stored in JSON files. More on that topic you can find in my other article in SCN.

If you miss something in this article, just let me know.

Peter Marcely

ABAP, Python, JavaScript developer