Technical Articles
OpenSource RestModel for SAPUI5
Everybody who worked with SAPUI5 outside the boundaries of an OData Service backed model knows that there is a lot of room for improvement in the JSONModel especially when it comes to easily working with REST APIs. Of course OData is also REST based, but plain REST services are something special. We used SAPUI5 on multiple projects running on the SAP Cloud Platform based on the Spring Framework and REST APIs. As we always had to solve the same challenges we have searched for the best REST framework and found out that combining axios with SAPUI5 is a fantastic idea. We are proud to announce that we open sourced our SAPUI5 RestModel under the MIT License. We have encapsulated the axios framework and used an ODataModel like syntax. It would be great if we can enrich SAPUI5 developers life with an easy to use RestModel.
What?
You may ask yourself: REST in SAPUI5? Don’t we usually use OData and maybe JSON to load external data? Well, by using the RestModel for SAPUI5, consuming RESTful-Services and APIs can be done pretty easily.
Why?
Sometimes we have the requirement to build UI5 Apps without using OData-Service as a backend service. However, the UI5 Framework is mainly built to use the OData-protocol to consume data. You can see this on how well SAP has integrated the ODataV2– and ODataV4-Model into the UI5 Framework. But what do you do if you don’t have an ODataService? You could use following approaches.
- JSONModel.loadData(……)
- With the .loadData-method you can load external data into a JSONModel and process it there.
- $.ajax(….)
- By using ajax and jQuery you can send asynchonous requests. Basically all known UI5-models use ajax to process data.
However, these solutions are not always the , as we say in Austria, ‘yellow from the egg’, especially because the JSONModel is more tailored to store and process local data. Because of these problems we have created the RestModel based on the HTTP-client axios . For example, we use the RestModel next to the ODataModel in our CloudDNA OData-Plugin.
How?
The RestModel uses the axios-client to make HTTP-calls against a RESTful-webservice. Axios is an HTTP-client for browsers and node.js developed by Matt Zabrieskie as an open-source-project under the MIT-licence. The RestModel extends the already extensive axios-client and tailores it to an UI5 environment, eg. for the mapping between Destinations and self-definded access-point in the applications neo-app.json file. Following functionalities are provided:
CRUD – the basics
- create – POST to send data,
- read – GET to get data,
- update – PUT to change data,
- remove – DELETE to delete data
The CRUD-methods of the RestModel are syntactically similiar to the ODataModel-CRUD-Methods. This was done so that working with the RestModel seems familiar and already accustomed. A RestModel-read could look like the following code snippet:
this._oModel.read("/Customer", {
success: function (oData) {
oCodeEditor.setValue(JSON.stringify(oData, null, "\t"));
}.bind(this)
});This seems to be an ODataModel-Read on the first sight. But here we have an instance of the RestModel.
this._oModel = new RestModel({
url: "<myservice.com/api>",
});By using the RestModel-instance you can send REST-calls like you would send ODataModel-Calls including headers and parameters. The result of a request can be processed by using callbacks or by making use of the Promise-concept. By using Promises you can take advantage of the features of the Promise-concept in Javascript. The returned data can then be stored in a JSONModel and be bound against a View.
Additionally- the ‘special treats’
- bearerTokenLogin – storage of a bearer token for login-purposes
- setXCSRFTokenHandling – Cross-Site-Ressource-Forging handling
- ….
The RestModel provides additional features like the support of a bearer-token-login, as fas as the REST-service supports it. X-CSRF-tokenhandling is also supported in the RestModel. A fetch-request will be sent and the returned X-CSRF-Token will be set as a request parameter for further requests. This should be known when working with file-uploads in UI5.
Open-Source?
The RestModel is provided as an open-source project and can be cloned at github, where it is updated and provided with new features. Planned features are eg. the storage of requested data in a model alike to the ODataModel to provide similiar features, like binding and view-triggered-requests. We would be glad to have motivated contributors to our github project so that together we can make the best out of the RestModel.
Everything clear
As said in our guideline
– From Devs – For Devs –
The RestModel should be an improvement for developers from developers. So if you need to use REST-services in your UI5-App, the RESTModel seems to be the right for you. A detailed view incl. documentation can be found at the github-repository of the RestModel. We’d be glad to get constructive criticism and suggestions on how to enhance the RestModel, so don’t hesitate to comment down below 
Dear Martin,
I thought RestModel would be similar to JSONModel and could be used directly for model binding... But while JSONModel extends ClientModel, RestModel extends BaseObject.
Oliver