SAPUI5: How to Use a REST API Which is Not an OData Service?

🏷️

This is how to use any REST API in SAPUI5.

Do you want to connect your SAPUI5 application to another service besides OData?

Then this is the article for you: learn how to own any REST API.

Let’s get started!

Connect any REST API With Your SAPUI5 Application

OData services are a standard for connecting SAPUI5 applications to a backend such as a gateway server.

You can simply use the SAPUI5 OData model to do a CRUD (Create, Read, Update, Delete) request against any OData service.

But an SAPUI5 application can be connected to any kind of API (Application Programming Interface) or service like any other REST API than an OData service.

There are two main ways to connect an SAPUI5 application to another REST service than an OData service:

  1. XHR (XMLHttpRequest)
  2. XHR through jQuery (jQuery is a JavaScript library included with SAPUI5)

The difference between vanilla XHR and jQuery XHR is that vanilla XHR is more lightweight, but not cross-browser compatible.

jQuery XHR is heavier, but it’s cross-browser compatible.

jQuery is already included in the SAPUI5 framework, so it’s preferable to use it for an XHR request.

By the way, the method used for a jQuery XHR is called AJAX (Asynchronous Javascript and XML)—many people think that AJAX is a standalone library, but it is actually just a method in the jQuery library.

AJAX is basically just the whole process of sending an XHR request:

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

XHR was and is a revolution in web development. XHR made it possible to:

  • Request data from the back end after the page loads.
  • Receive data from the back end after the page loads.
  • 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, you can sometimes see if the username is available in real time.

If you change the username that you typed in, it will say that it is available or not available. And the page stays as it is. This was kind of like a miracle.

That’s XHR working—the website asks the back end if the username you typed already exists in the database and gets a reply without any page refresh.

The OData and JSON models in SAPUI5 work with XHR or AJAX.

Now, we’ll see how to use XHR in SAPUI5 to connect to any API:

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

Use XHR to Connect an SAPUI5 Application with a REST API

XHR is a JavaScript object that allows front ends of applications to communicate with back ends like REST APIs.

Despite its name, the XMLHttpRequest object can accept any kind of data, not just XML (Extensible Markup Language) or JSON (JavaScript Object Notation).

Using an XMLHttpRequest, it is possible to send and get data from an URL without reloading the page. So users can send and load data without reloading a page.

Here’s how to do a read request with an XMLHttpRequest in SAPUI5:

// 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 request is just fine
    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 read a XHR is to do this:

// in your controller
...

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 complete documentation on XHR or AJAX—such as how you make a create request or what the different ready states are you’re getting in an XHR response.

Use XHR through jQuery to Connect an SAPUI5 Application to a REST API

jQuery uses exactly the same XHR object as when you don’t use jQuery. But with jQuery you’re cross-browser compatible.

Furthermore, the jQuery AJAX is more readable and 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);

  }

});

...

Here’s the documentation on AJAX in jQuery.

🔥 The Complete SAP ERP Modules Overview Infographic in PDF Format (Free)

Plus, don't miss future infographics and free SAP tips and insights that are available only to newsletter subscribers. 

📚 More Articles

Leave a Comment

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.
You need to agree with the terms to proceed

Menu

altwork_picture_2

The Altwork Station redefines how people interact with their computers by allowing the computer screen and keyboard to physically conform to support the user’s body while working long hours on a computer.

Submission received, thank you!

Close Window