How to Use a REST API Which is Not an OData Service in SAP UI5?

OData services are the standard for SAP UI5 applications to connect an SAP UI5 application with a back-end such as a gateway server. You can simply use the SAP UI5 OData model to do a CRUD (Create, Read, Update, or Delete) requests against any OData service.

But an SAP UI5 application can be connected with any kind of API or service such as any other REST API than an OData service.

There are mainly two options to connect an SAP UI5 application with another REST API than an OData service:

  1. XHR (XMLHttpRequest)
  2. XHR through jQuery (jQuery is a JavaScript library that is included in SAP UI5)

The difference between the vanilla XHR and jQuery XHR is that the vanilla XHR is more light-weighted, but it is not cross-browser compatible. jQuery XHR is heavier, but it is cross-browser compatible.

Because the jQuery library is already included in the SAP UI5 framework, it is favorable to use jQuery for an XHR request.

By the way, the method in jQuery which is to use for an XHR in jQuery request is called AJAX (Asynchronous JavaScript and XML). Many get confused and would say that AJAX is a library for its own but, actually it is a method in the jQuery library.

Plus, detached from jQuery refers AJAX to the whole process of an XHR request:

  • XHR request to request data from a back-end
  • JavaScript and HTML to display or use the requested data

XHR was and is a kind of revolution of how websites are built. Because through XHR it was suddenly possible to:

  • request data from the back-end after the page has loaded
  • receive data from the back-end after the page has loaded
  • send data to the back-end behind the scenes
  • update the website without reloading the site

For example, if you register for a website and choose a username, then you can sometimes see in realtime if the username is available.

If you change a character of the username that you typed in the input field, then some text next to the input field says that this username is available or not available. And the page stays as it is. No page reload that you have for example, when you navigate from Google to a website.

That is XHR in work – the website asks behind the scenes the back-end through XHR if the username you typed in exists already in the database and receives the reply from the request – without any page refresh. That is awesome!

The OData and JSON models in SAP UI5 using XHR or AJAX as well.

For the purpose of demonstration, the demo REST API from reqres is used.

XHR to Connect an SAP UI5 Application with a REST API

The XMLHttpRequest object is a JavaScript object that enables the front-end of an application to interact with the back-end, such as consuming a REST API.

Despite the name of the XMLHttpRequest object, it can receive any kind of data and not just XML such as JSON.

Through an XMLHttpRequest it is possible to send and fetch data from an URL without a full page refresh – the page does not reload. Therefore, a user can send and load data without reloading a page and disrupting his flow.

Here is how you do a read request with an XMLHttpRequest in SAP UI5:

// in your controller  

...
  
  onButtonPress: function() {

    // create XHR object
    var xhttp = new XMLHttpRequest();

    // gets everytime fired when the XHR request state changes
    xhttp.onreadystatechange = function() {

      // 4 means request is finished and response is ready
      // 200 means ok
      if (this.readyState == 4 && this.status == 200) {
     
        // this refers here to the XHR object
        sap.base.Log.info(this.responseText);
    
      }
  
    };
  
    // set the XHR request parameters
    xhttp.open("GET", "https://reqres.in/api/products/3", true);
  
    // fire the XHR request
    xhttp.send();

  }

...

Another way to do a read XHR with more option is this:

// in your controller
// XHR read request (GET)

...

  onButtonPress: function {
    
    // create XHR object
    var oXHR = new XMLHttpRequest();

    // tracks progress of the download (GET) or upload (POST) in bytes
    oXHR.addEventListener("progress", this.updateProgress);

    // event gets fired when the XHR request is completed
    oXHR.addEventListener("load", this.requestLoaded);
    
    // event gets fired when the XHR request failed
    oXHR.addEventListener("error", this.requestError);

    // event gets fired when the XHR request is aborted by the user
    oXHR.addEventListener("abort", this.requestAborted);

    // event gets fired when the XHR request is 
    // either loaded, aborted, or failed
    oXHR.addEventListener("loadend", this.requestLoadEnd);

    // set the XHR request parameters
    oXHR.open("GET", "https://reqres.in/api/products/3", true);

    // fire the XHR request
    oXHR.send();

  },

  updateProgress: function(oEvent) {

    if (oEvent.lengthComputable) {
      
      var fPercentComplete = oEvent.loaded / oEvent.total * 100;
      
      sap.base.Log.info("Loading: " + fPercentComplete + "%");
  
    } else {
    
      // total size of the the download or upload is unknown
    
    }

  },

  requestLoaded: function(oEvent) {

    sap.base.Log.info("Request is loaded");

  },

  requestError: function(oEvent) {

    sap.base.Log.info("Request is failed");

  },

  requestAborted: function(oEvent) {

    sap.base.Log.info("Request is either aborted");

  },

  requestLoadEnd: function(oEvent) {

    sap.base.Log.info("Request is either loaded, aborted, or failed");

  },

...

See here for full documentation of XHR or AJAX. For example, how you do a create request or what the different ready states and status are you receive in an XHR response.

XHR through jQuery to Connect an SAP UI5 Application with a REST API

jQuery uses behind the scenes exactly the same XHR object as when you would do it without jQuery. But jQuery provides you with cross-browser compatibility.

Furthermore, the jQuery AJAX is easier to read and more well structured.

// in your controller

...

  // $ is the jQuery object
  // you could do jQuery.ajax( ... ); as well
  $.ajax({
  
    url: "https://reqres.in/api/products/3", 
  
    success: function(sResult) {
    
      sap.base.Log.info(sResult);
  
    }

  });

...

See here for full documentation of AJAX in jQuery.

No Comments

Get Exclusive SAP Tips

Learn about exclusive SAP tips and insights that are only shared with the private newsletter subscribers.

Will SAP UI5 replace the SAP Web UI?

Result

Essential Ressources

Leave a Reply

Your email address will not be published. Required fields are marked *

Fill out this field
Fill out this field
Please enter a valid email address.

Menu