Insights on SAP UI5

[Former Member]

Introduction

SAP is moving towards cloud with the introduction of HANA.With advent of new technologies, SAP is also embarking towards developing new competitive modules for its wide variety of products.

One of them is SAP UI5 framework. In a very lean term SAP UI5 is a Javascript based framework that has collection of libraries. An anology to SAPUI5 framework can be "Sencha" that is used to develop cross platform mobile application user interfaces.

Few points on SAPUI5

1. Rich user interface components available like built in api for Charts, Grids, Layouts and many more.
2. Complete adherence to MVC (Model View Controller) architecture.
3. SAP UI5 can be used to develop user interfaces for all SAP products such as SAP MII, SAP ERP etc.
4. SAP UI5 plugin is available as open source and can be used on Eclipse to do development.
5. One can develop User interface module using SAP UI5 framework and later on can be integrated with Android SDK, ultimately result in an Android mobile application.
6. Very rich online documentation available to help developers.  https://sapui5.hana.ondemand.com/sdk/#content/Overview.html

Detail on SAPUI5
                                                                 

SAPUI5 application will run on browser or browser component. As shown in above diagram, the default page of an application will be index.html. We can call it as the master page. From master page end user can request to server.Based on user request, appropriate controller will be called. For example request to add records will stimulate the AddRecord controller.

Controller are the programs that interface between View and Model.Controller will contain the business logic and connect to appropriate Model to get or set the state of database. Once the model responds to controller, controller will stimulate appropriate View as a response to user.

Here, point to note is that Model and View are totally independent. So any change in view will not affect controller's business logic.

As per the above diagram, the bottom most part is SAP Libraries. These libraries are core for all the files in project.We will see them in below sample code of a chart.

SAPUI5 for Mobile

SAPUI5 libraries are supported on many platforms. SAPUI5's sap.m library is required to define apps, screens and UI controls for SAPUI5 mobile application.

                                  

Sample Chart development #1

Creating the above chart is just four step process-

Step 1- Create a model with business data in it.
var oModel = new sap.ui.model.json.JSONModel({
businessData : [
{Country :"Canada",revenue:410.87,profit:-141.25, population:34789000},
{Country :"China",revenue:338.29,profit:133.82, population:1339724852},
{Country :"France",revenue:487.66,profit:348.76, population:65350000},
{Country :"Germany",revenue:470.23,profit:217.29, population:81799600},
{Country :"India",revenue:170.93,profit:117.00, population:1210193422},
{Country :"United States",revenue:905.08,profit:609.16, population:313490000}
]
});

Step 2- Create a Dataset and Map it to Model.

var oDataset = new sap.viz.ui5.data.FlattenedDataset({
// a Bar Chart requires exactly one dimension (x-axis)
dimensions : [
{
axis : 1, // must be one for the x-axis, 2 for y-axis
name : 'Country',
value : "{Country}"
}
],
// it can show multiple measures, each results in a new set of bars in a new color
measures : [
  // measure 1
{
name : 'Profit', // 'name' is used as label in the Legend
value : '{profit}' // 'value' defines the binding for the displayed value 
},
{
name : 'Revenue',
value : '{revenue}'
}
],
// 'data' is used to bind the whole data collection that is to be displayed in the chart
data : {
path : "/businessData"
}
});

Step 3- Create the Bar chart with the dataset created in step 2.

// create a Bar chart
  // you also might use Combination, Line, StackedColumn100, StackedColumn or Column
   var oBarChart = new sap.viz.ui5.Bar({
width : "80%",
height : "400px",
plotArea : {
//'colorPalette' : d3.scale.category20().range()
},
title : {
visible : true,
text : 'Profit and Revenue By Country'
},
dataset : oDataset });

Step 4- Attach the Chart to a <div> tag in your HTML page.
// attach the model to the chart and display it
oBarChart.setModel(oModel);
oBarChart.placeAt("sample1");

wherin HTML page code sample

<HTML>
... <BODY>
  <DIV ID="sample1" > </DIV>
</BODY>
</HTML>

Conclusion
SAPUI5 is relatively new technology to many clients using SAP products like SAP MII. Many clients in industry were used to devlop UI based on conventional applet views that take more time to load and are relatively heavy on browser. With advent of SAPUI5 many clients are shifting their focus to SAPUI5 because of HTML5 CSS3 like look and feel. As well as with the MVC design pattern it is much easier to maintain and reuse the code. Positive note here is that one can actually download SAPUI5 SDK or plugin or library framework for free and plug it in Eclipse Juno or Kepler to develop very beautiful User interfaces for desktop as well as mobile web applications.