What?

You may ask yourself: REST in SAPUI5? Don’t we normaly use OData and maybe JSON to load external data? Well, by using the RestModel for SAPUI5, consuming RESTful-Webservices can be done 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