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 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’.
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:
This data can be brought into an SAPUI5 application and various operations can be performed on it. To begin with, let us create an application to display the data from the above table.
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.
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.