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

Peter Marcely OData, OpenUI5 / SAPUI5 Tutorial, SAP Netweaver gateway

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

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

  1. Hi Peter,

    Loved your code, works smoothly. But now i’m trying to create the same application using mvc architecture, with .js, .html, and .controller.js files. Can you help me with that?

    -Nimish Kate

    1. Hi Nimish,

      I try to achieve the same thing and stuck on by passing the control and data between controller.js and view.xml. Please can you help on this one.

      Thanks
      Kanuj

  4. Hi Peter:

    thanks for sharing the amazing code. I’ve only one question. Please, you must suppose that you’ve one field where the content is Boolean (‘X’ to True and ‘ ‘ to False) and you want to change that value for the whole word ‘True’ or ‘False’. could you say how can do that?

  6. Can you please let me know How can i get the Service link for this demo, because i am getting ” No data ” in my output………. thanks for your valuable help.!!

  9. Hi Peter,

    I’m try to change sapui5 resouces to openui5 resouces in my ui5 project,
    but i getting the error, the resources not found…

    can you help me how to change sapui5 resouces to openui5 resources in ui5 project?

    Thanks & Best Regard

  11. Hi ,
    could you please help what needs to be chnaged when I implemented it in SAPUI5 framework, I tried in SAPUI5 framework using Eclipse , It gives error , Create Failed

    Thanks in advance

  12. Hi, I will not want to work with a database but rather with a JSON Datei. How to proceed to have the same result if it pleases you?

Comments are closed.