Data Connectivity to SAPUI5 applications using REST API

SAPUI5 & Fiori

User Experience is the new jargon in the market among the business users while User Interaction has become archaic. When most of the SAP technologies used GUI & a few others were Eclipse-based, the buzz among users to know what SAP would do to match the moving trend towards UX rather than old-school UI, increased.

SAP came back with a strong answer filled with style to facilitate enhanced user experience by introducing SAP Fiori which is based on SAPUI5 – the technology behind it.

SAPUI5 is a combination of HTML5, CSS3, XML and JavaScript, while Fiori uses modern design principles for seamless User Experience.

Connectivity

SAPUI5 can exchange data using XML HTTP Request object to call complete datasets from the backend systems. But, the controls used within SAPUI5 are highly optimized to exchange data using the open data OData protocol, also known as ‘The SQL of the Web’.

SAP has specifically chosen OData as the de facto method of connectivity for all SAP solutions. Having said that, the possibilities within UI5 are limitless. It is possible to integrate SAPUI5 with various JavaScript libraries and protocols without much difficulty. One can also easily integrate any REST API with UI5 to create stunning applications with unparalleled user experience(UX).

Connecting to a MySQL Database

Though there are a lot of databases which can connect with SAPUI5 applications, using REST API, we can get in detail about integrating the SAPUI5 applications with the data that is coming in from a MySQL database in this blog.

The instance of the MySQL database which we are about to consume has data from the “SalesOrderTable” as shown in the screenshot below:

Data Connectivity to SAPUI5 applications using REST API — An Instance of the MySQL database

Creating an SAPUI5 Application

For the purpose of displaying data from the table, we will be creating a very basic SAPUI5 application.

In this application we will use the sap.m.Table control to display the data in the table.

As you can see, the image displays the folder structure within the SAPUI5 applications. As the applications use data binding Model View Controller(MVC), you will be able to see the MVC folders on the structure too, along with the various XML views, JS components, etc.

Using an XML View to bind the data items

You can create a simple XML view linking your SAPUI5 application and the “SalesOrderTable” using the table control which we had already discussed about.

Now, we have created a simple XML view using the sap.m.Table control and bound the aggregation of the data items to a JSON model.

The JSON model is sourced using an API call to fetch data from the MySQL database table.

Once this is done, the data from the MySQL database will be integrated with the SAPUI5 application and you should be able to view the data on the UI5 application as shown in the screenshot below.

Conclusion

This sample SAPUI5 application is just a demonstration to showcase the capabilities of SAPUI5 and its seamless integration with external data.

Any SAPUI5 application can be integrated with data coming in from any source, whereas, creating/consuming OData services is not feasible viz., Oracle, MSSQL, etc.,
If you’d like to explore more about connecting SAPUI5 applications using OData services, the blog- “Playing Around With OData Using SAPUI5 Applications” will be a good read.
You may also want to read “Demystifying SAPUI5 Models – Part 1: JSON Models” for a deeper underatnding of the various models of SAPUI5 applications, focusing more on JSON Models as used in the example discussed earlier in this blog.