Making Engaging UI on SAP MII with SAPUI5

SAPUI5 is the HTML5 adoption by SAP which is becoming the de facto UI technology standard for all SAP applications. Some of the key features of SAP UI5 is that it can be rendered in any device with cutting-edge UI controls which is based on standards like HTML5, jQuery and CSS3 and fairly extensible. It also provides standard SAP and third-party system data access via ODATA, XML or JSON models.

SAP MII being a visualization platform for manufacturing, which needs engaging user interfaces for the end-users which can be possibly accessed by different devices e.g. tablets/touch-screen terminals and smartphones, etc. Currently it uses HTML & Java Applet based user interfaces which is not compatible with many browsers or mobile devices. While working with SAPUI5 and learning the development technics it occurred to me why not use the same for MII user interfaces? Apart from the usual controls for tabular display, data entry and data view, a chart library called sap.viz has been added to SAPUI5 recently which provides different types of engaging charts for analytics, typically required by MII.

Though SAPUI5 library is available in NetWeaver Java 7.31 SP05 onwards, it is not available out-of-the-box in earlier releases, on which MII 12.2 installation may be present. So the best way to use that till MII 12.2 release is to upload the SAPUI5 JavaScript library in MII workbench under a project in the workbench. Though standard SAPUI5 application is created using Eclipse plugin, it being a JavaScript library and the application created as web application, it can be created and managed in the Web folder in MII workbench as well.

SAPUI5 follows the Model-View-Controller (MVC) design concept, which has a model object to access backend services, controller for the UI logic and view for the UI design. The models supported in SAPUI5 are JSON, XML, ODATA and Resource. Any of the first three models can be used for MII 14.0 as it supports both OData and JSON interfaces for Query Templates. For older release of MII XML model can be used to execute Query Templates and BLS as Illuminator service or Runner using HTTP.

To start with SAPUI5 development in MII, three files need to be created in MII workbench representing the index.html file which acts as the view container, the appname.view.js file which specifies the view design and appname.controller.js which is the controller file and the model is defined there. The below diagram represents the concept of how MVC pattern is implemented in SAPUI5 in MII.

The controller should instantiate the model using OData, JSON or XML interfaces from MII Query Templates or BLS. The below code shows one sample implementation of the controller which is using a MII Query Template as XML model.

sap.ui.controller("kpidashboard.PlantView", {
/**
* Called when a controller is instantiated and its View controls (if available) are already created.
* Can be used to modify the View before it is displayed, to bind event handlers and do other one-time initialization. */
   onInit: function() {
//start custom code for onInit
    //instantiate model object for specific type
    var oModel = new sap.ui.model.xml.XMLModel();                  
    //set the data service for the model
    oModel.loadData("/XMII/Illuminator?QueryTemplate=Default/Dipankar/SQL_GetMaterialQty&Content-Type=text/xml");
    //add the model to the view
    var view = this.getView();
    view.setModel(oModel);
//end custom code for onInit
},
/**
* Similar to onAfterRendering, but this hook is invoked before the controller's View is re-rendered
* (NOT before the first rendering! onInit() is used for that one!).
*/
//   onBeforeRendering: function() {
//
//   },
/**
* Called when the View has been rendered (so its HTML is part of the document). Post-rendering manipulations of the HTML could be done here.
* This hook is the same one that SAPUI5 controls get after being rendered.
//   onAfterRendering: function() {
//
//   },
/**
* Called when the Controller is destroyed. Use this one to free resources and finalize activities.
//   onExit: function() {
//
//   }
}); 

The controller code follows the standard code template of SAPUI5 JavaScript controller (usually generated by Eclipse plugin for SAPUI5), which has to be implemented by any SAPUI5 controller when JavaScript view is used. Note that an application id is specified with the view name at the very first line of the controller code. This is the application id which is unique for the corresponding view and controller and specified in the view instantiation code in the index.html file. There are different event handler functions in the controller such as onInit, onAfterRendering, onExit as standard event handlers and custom ones can also be added. The model is instantiated in the onInit function which is the default event handler for the application initialization. The Query Template is accessed as XML model via Illuminator service and in similar way BLS can also be executed as Runner service or Illuminator service via Xacute Query. In MII 14.0 JSON or OData interface can also be used if required instead of XML model. The model is bound to the corresponding view so that it can be accessed from the view to bind it to the view elements. If multiple model is used in the controller it can be bound to the global UI context as below.

sap.ui.getCore().setModel(oModel,"myModel");

Next the view needs to be created following the standard template as below:

sap.ui.jsview("kpidashboard.PlantView", {
      getControllerName : function() {
         return "kpidashboard.PlantView";
      },
      createContent : function(oController) {
//start custom code for view design
//array of UI controls
var aControls = [];
//access the model object
var mModel = this.getModel();
//create the dataset and bind to model path
var dataset1 = new sap.viz.ui5.data.FlattenedDataset({ dimensions : [ {  axis : 1, name : 'Product', value : "{Material}“ } ], measures : [ { name : 'Quantity', value : '{PercQuantity}‘ } ], data : {path : "/Rowset/Row", factory : function() { }  } });
// create the viz object
var pie = new sap.viz.ui5.Pie({ width : "800px", height : "400px", plotArea : { 'colorPalette' : d3.scale.category20().range() }, title : {  visible : true, text : 'Share of Products‘ }, dataset : dataset1  });
//set the model
pie.setModel(mModel);
//add the control to the array
aControls.push(pie);
        return aControls;
//end custom code for view design
      }
}); 

Note that the View code also starts with application name and the View name to specify the application the view belongs to. The view has a standard function named createContent, inside which the view design needs to be added. Here the model needs to be accessed and bound to the UI controls as required. Typically for most of the sap.viz controls a dataset object need to created and bound to the model which in turn needs to be bound to the visualization control. It is important to note that while referring to the XPath of the model XML in the dataset, the root element is not used. E.g. for MII XML which is always in the form of Rowsets/Rowset/Row but only Rowset/Row is specified here.

Finally the index.html file needs to be created as below:

<!DOCTYPE HTML>
<html><head><meta http-equiv="X-UA-Compatible" content="IE=edge">
<script src="/XMII/CM/SAPUI5MII/resources/sap-ui-core.js"
                      id="sap-ui-bootstrap“  type="text/javascript"
                      data-sap-ui-libs="sap.ui.commons,sap.ui.table,sap.viz, ap.ui.ux3"
                      data-sap-ui-theme="sap_goldreflection" >
</script>
       </head>
       <body class="sapUiBody" role="application">
      <div id='plantkpiDiv'></div>
<script>
    //register the application
    jQuery.sap.registerModulePath("kpidashboard", "/XMII/CM/SAPUI5MII/kpidashboard/webcontent");
    //instantiate the view
    var plantView = sap.ui.view({id:"idPlantView", viewName:"kpidashboard.PlantView", type:sap.ui.core.mvc.ViewType.JS});
    //add the view to the div
    plantView.placeAt("plantkpiDiv"); 
    </script>
       </body>
</html> 

Note that the SAPUI5 library source is being referred here as the script library. As it is uploaded in MII workbench in a project it is being referred from there. In newer release of NetWeaver where SAPUI5 is already present it can be referred from the server path directly as “sapui5/resources/sap-ui-core.js”. Next the individual UI5 libraries required for the application is specified in data-sap-ui-libs parameter. Depending on the UI controls to be used in the application only those libraries need to be specified.

One of the most important part of the code in this file is registering the application id to its path. The below code does exactly so:

jQuery.sap.registerModulePath("kpidashboard", "/XMII/CM/SAPUI5MII/kpidashboard/webcontent");

Note that all the content for this application e.g. view, controllers, resources, etc needs to be saved in the specified path only. That is how when the view is instantiated in the next line by the application name and view name it automatically finds out the file path where it is available. The view is self-contained unit of a set of UI controls which is instantiated in the container and placed in a div. Similarly multiple views can also be added in a container file if required.

The final output looks as below:

There are lots of cutting-edge UI controls available in SAPUI5 as specified in the help documentation which can be leveraged to make really powerful and engaging user interfaces for SAP MII.