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:
- XHR (XMLHttpRequest)
- 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.