SAP Manufacturing Integration and Intelligence, Manufacturing, SAP NetWeaver

Insights on SAP UI5


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.

Detail on SAPUI5

SAP Manufacturing Integration and Intelligence,  Manufacturing, SAP NetWeaver

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.

SAP Manufacturing Integration and Intelligence,  Manufacturing, SAP NetWeaver

Sample Chart development #1

SAP Manufacturing Integration and Intelligence,  Manufacturing, SAP NetWeaver

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{
// 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

wherin HTML page code sample

… <BODY>
<DIV ID=”sample1″ > </DIV>

Leave a Reply

Your email address will not be published. Required fields are marked *