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.
Hi Dipankar Da,
Can you please suggest whether we should always work with SAP API or we should use free hand D3JS charting and JQuery coding?
I started writing Plugins to enhance some of the UI features provided by SAP and started thinking should I create a plugin to enhance UI5 functionality or should I create my own library and add it in the package?
Need your suggestion.
Regards,
Pradip
Hi Pradip,
There is no restriction as such on which JavaScript library to use but one may need to consider certain factors such as using impact of using open source libraries in production environments and the support, extensibility, etc provided for the same. Using SAP provided libraries such as SAPUI5 makes it more standardized with support provided by SAP anyway. Also SAPUI5 now includes CVOM charting library in sap.viz which may provide you most of the chart types you may need. However for certain types of specific UI you may need to look for other libraries as well.
Thanks,
Dipankar
Hi Dipankar, how is the average time to build a screen whit one o two grids and one o two graph?.
what are minimum Requirements the hardware and software on client side?
Best Regards.
Federico.-
Hi Federico,
If you are familiar with JavaScript and HTML, picking up UI5 skill is not a big deal. And once you learn the basic tips and tricks of UI5 development it is just a matter of hours or maybe even less depending on the expertise level of the developer to create an UI with couple of tables and a graph.
You need to install the UI-Addon component available in SMP on the server side and it is actually available with the NW server 7.31 SP05 onwards. On the client side you need any of the modern browsers such as Chrome, Firefox, IE9. You can also display the same UI from mobile device browsers also at ease.
Thanks,
Dipankar
Hi Dipankar
Thanks for the blog. After dowloading the SAPUI5 Java Scrip Lib and unzip it, can you tell me which files should import in the workbench? and I assume I have to have it in WEB tab right?
Hi Seng Kiang,
If you are using the trial version from SCN you can use upload the resources folder in the Web catalog. But please note that as it is a trial version for 90 day usage you cannot develop any productive application using it. For using in production you need to use the UI-Addon from SMP.
Thanks,
Dipankar
Hi Dipankar
I was trying your example using the sapui5 eclipse development framework. I have adapt your example in eclipse but I got the local host is not allow by Access-control-origin problem.
The URL is http://<mii>:<port>/XMII/Illuminator?QueryTemplate=path/sapui5/xac_testsapui5&IllumLoginName=<user>&IllumPassword=<password>&Content-Type=text/xml
If I execute the MII transaction in Webbrowser, I am able to see the result.
I am uisng Chrome and I have tried the --diable-web-security in Chrome but sill no luck. Any clue?
thanks
Hi Seng Kiang,
You can try using the URL as /XMII/Illuminator?QueryTemplate=path/sapui5/xac_testsapui5&Content-Type=text/xml as both are in same server.
Thanks,
Dipankar
Hi Dipankar
the .html page is running at local machine and it calls MII at different server.
thanks
sengkiang
sengkiang,
You probably have a crossdomain.xml policy issue and I recommend following the crossdomain steps outlined on this site to get it working:
http://help.sap.com/saphelp_nw73/helpdata/en/71/e6e62b89f84da29aecc97c3338b53e/content.htm
Sam
Hi Dipankar,
As per your suggestion to Federico that we need to install the UI-Addon component available in SMP, do we have any SAP note related to this Addon.
Please help us with any SAP notes related to this we require this for refference to the BASIS team.
We are running MII 14.0 SP4 Patch 2 which requires this Addon for UI5 developments.
Thanks for the blog.
Swapnil.
Hi,
If you are on MII 14.0 SP4 you should be getting the i5 components anyway. Create an OSS ticket if you can't find those in workbench.
Thanks,
Dipankar
Its very helpful blog to begin with SAP UI5.
Thanks!!
Dipankar,
Nice demo and very comprehensive...can you also mention how this would work with the OData interface that is provided standard with MII 14.0:
http://help.sap.com/saphelp_mii140sp02/helpdata/en/44/2e1d2d42994aef85ef91e58db8c7c9/content.htm
This should simplfy your scenario and reduce the network traffic as OData JSON is lighterweight than the Illuminator XML and also an open web standard.
Thanks again,
Sam
Hi Dipankar,
I am exploring SAPUI5 and followed exactly the same steps you have mentioned above.
3 files are PlantView.controller.js,PlantView.view.js and Index.html in the same folder which is 'TestFiles'.
Index.html has the following script:
<script>
jQuery.sap.registerModulePath("kpidashboard","/XMII/CM/resources/TesFiles");
var plantView = sap.ui.view({id:"idPlantView", viewName:"kpidashboard.PlantView", type:sap.ui.core.mvc.ViewType.JS});
plantView.placeAt("plantkpiDiv");
</script>
After I run Index.html, it gives me following error
Help in this regard is much appreciated.
Thanks & Regards,
Anuj
Hi Anuj,
What is the name of the Catalog project where you have stored the files? As of path you have specified it seems to be the project name is resource. Also the foldername you specified is TesFiles (t missing).
Also publish the files from the Web folder before you access the page.
Thanks,
Dipankar
Hi Dipankar,
The project name is 'resources' which is the same resources folder available in SAPUI5 Development kit, as I have not deployed the UI add-on for SAPUI5 in my netweaver. In this project there is a subfolder 'TestFiles' in catalog and web which contains the respective files.
My bad in missing 't' in the path 🙁 . Even after correcting it, I get an error as below
Since I have imported the SAPUI5 libraries as a project in workbench, I think publishing the web files should not be required, but I gave a shot by doing that as well, but of no help.
Thanks & Regards,
Anuj
Hi Anuj,
It seems there is a syntax error in your code in line 20 of index.html, maybe a semicolon is missing or something like that. Please check it using a JS debugger such as Firebug or Chrome debugger.
Thanks,
Dipankar
It is a very helpful blog to begin with MII and SAP UI5, congratulations Dipankar Saha.
If you need to maintain a variable (propertie) in the server side and in the user session, and the users should not see or change this variables, how could it be done ?
Michel,
Have a look at the custom attributes that MII provides that provide variables for various roles with different default values per Role (Custom Attributes - SAP Manufacturing Integration and Intelligence - SAP Library). You can also see these attributes and the rest of the logged in user's session via this URL:
http://<server:port>/XMII/PropertyAccessServlet?Mode=List
From here any of the proeprties/attributes can be referenced on a page with the .irpt extension as explained here by using curly braces to wrap the name on your page:
SAP MII Report (IRPT) - SAP Manufacturing Integration and Intelligence - SAP Library
You can also set/create these values using JavaScript.
Sam
Hi,
For server side variables you can use Session Variables in MII using irpt pages as {var}
Thanks,
Dipankar
Dear Dipankar,
I am working on SAP MII 14.0.
I am trying to run a sample example on SAPUI5 implementation in SAP MII 14.0 taken from link: http://scn.sap.com/community/manufacturing/mii/blog/2013/03/21/making-engaging-ui-on-sap-mii-with-sapui5
But I got an Error when I tested index.html page !!
Problem Description:
index.html code is :
<!DOCTYPE HTML>
<html><head>
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<script src="/sapui5/resources/sap-ui-core.js"
id="sap-ui-bootstrap“ type="text/javascript"
data-sap-ui-libs="sap.ui.commons,sap.ui.table,sap.viz, sap.ui.ux3"
data-sap-ui-theme="sap_goldreflection" >
</script>
</head>
<body class="sapUiBody" role="application">
<div id='plantkpiDiv'></div>
<script>
alert("1"); // this comes
//register the application
jQuery.sap.registerModulePath("kpidashboard", "/XMII/CM/547555/SAPUI5/kpidashboard/webcontent");
alert("2"); // this comes
//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
alert("3"); // this does not come
plantView.placeAt("plantkpiDiv");
</script>
</body>
</html>
.......................................................................................................................
Folder Structure in Workbench is as follows: /XMII/CM/547555/SAPUI5/kpidashboard/webcontent
Inside webcontent I have created three files i.e. PlantView.controller.js , PlantView.view.js and index.html.
Webpage error details
User Agent: Mozilla/4.0 (compatible; MSIE 8.0; Windows NT 6.1; Trident/4.0; SLCC2; .NET CLR 2.0.50727; .NET CLR 3.5.30729; .NET CLR 3.0.30729; Media Center PC 6.0)
Timestamp: Tue, 11 Mar 2014 10:32:30 UTC
Message: Unterminated string constant
Line: 13
Char: 260
Code: 0
URI: http://<host>:<port>/XMII/CM/547555/SAPUI5/kpidashboard/webcontent/index.html?JSESSIONID=G59R-clhqrId7QDW_a_VBOSXQqyvRAEC2ZsB_SAPqh1fgxWruoAQAKceTGLKZ-6J
Message: failed to load 'kpidashboard.PlantView.view' from /XMII/CM/547555/SAPUI5/kpidashboard/webcontent/PlantView.view.js: SyntaxError: Unterminated string constant
Line: 41
Char: 11332
Code: 0
URI: http://<host>:<port>/sapui5/resources/sap-ui-core.js
Thanks and Regards,
Anshul Arora
Hi,
Please check line 13 of your code. It seems possibly a quote or semicolon is missing. Also the HTML page should be outside the webcontent folder.
Thanks,
Dipankar
Hi Depankar,
I'm on SAP MII 14.0 SP04 (NW 7.30 SP09).
To try out the sample SAPUI5 example given here, how to load the UI5 resources in MII workbench ? Do I still need to copy SAPUI5 libraries (/sapui5/resources/sap-ui-core.js etc..) manually to workbench project ?
Thanks,
Sumit
Hi Sumit,
It is not recommended to copy and use the local UI5 library now. From NetWeaver 7.3 EhP1 SP5 the UI5 library is available with the NetWeaver server. So please upgrade the NW server and use the server libraries for UI5.
Thanks,
Dipankar
Hi Dipankar,
Thanks for quick response.
MII 14 is on NW SP08, and SAPUI5 v1.8.7 is installed on NetWeaver.
Still when I try the sample code given here and render it, I get JavaScript error -
Webpage error details
User Agent: Mozilla/4.0 (compatible; MSIE 7.0; Windows NT 6.1; Trident/5.0; SLCC2; .NET CLR 2.0.50727; .NET CLR 3.5.30729; .NET CLR 3.0.30729; .NET4.0C; .NET4.0E; InfoPath.3; .NET CLR 1.1.4322; MS-RTC LM 8)
Timestamp: Wed, 26 Mar 2014 10:27:27 UTC
Message: 'jQuery' is undefined
Line: 13
Char: 5
Code: 0
URI: http://<XXX>:50000/XMII/CM/Test/index.html?JSESSIONID=LCynb53uPBEmQ5GM4xw6DfISKP78RAGKeh4A_SAPDbqPjkGkmYEvXatcU0lEPE5A
It looks the required JS files are missing.
Where might be the issue ?
Regards,
Sumit
HI sumit
you have to deploy UI5.SCA file using SUM.
download and deploy this. Also use ie9 or 10.
regards
G.partheeban
Please verify that your browser is running the page in standard mode and not quirks mode as Quirks mode does not support HTML 5 and will cause the JQuery not found error to occur. For details on how to force a page out of quirks mode and into standard mode see this post:
How do I force Internet Explorer to render in Standards Mode and NOT in Quirks? - Stack Overflow
To see if your web page is in Quirks mode for IE 10 simply press the F12 key to load the built-in developer tool which shows the mode and allows you to change the mode on the fly.
Hope this helps,
Sam
Hi Sam,
I'm using IE9 in standard mode.
The UI5 sca component which is deployed using SUM on our NetWeaver (7.3 SP08 & MII 14.0 SP04) is UISAPUI5JAVA09.sca.
Is this UI5 component a correct one ?
If not, what is the exact UI5 sca component that needs to be searched in SMP for installation ?
Thanks everyone for putting your comments on.
Regards,
Sumit
hi sumit
the v9 should do.
else latest is 11 patch try that.
you can cross check in chrome.
regards
G.partheeban
Hi All,
I'm able the render the page on SAPUI5 now.
Following are some corrections I made in given code -
1) There was issue loading "ap.ui.ux3" components of sapui5 library... so I've removed it from data-sap-ui-libs="sap.ui.commons,sap.ui.table,sap.viz, ap.ui.ux3".
So the final script import statement is
<script src="/sapui5/resources/sap-ui-core.js" id="sap-ui-bootstrap“ type="text/javascript" data-sap-ui-libs="sap.ui.commons,sap.ui.table,sap.viz" data-sap-ui-theme="sap_goldreflection" ></script>
2) Also there are few corrections in PlantView.view.js and PlantView.controller.js in terms of single quotation mark, comma, end of comments... etc due to which these files were not loaded.
All of above were traceable through Google Chrome developer tool, IE 9 couldn't help much.
Thanks all for putting your comments.
Regards,
Sumit
Hi Dinkapar,
didi you ever try Application Cache Buster on MII? We have a hard time getting it to work...
BR
Chris
Hi Dinkapar,
Thanks for this useful blog. I would like to do something similar, but I have some issue on the model initialization:
In your example, the model it's populated like this:
oModel.loadData("/XMII/Illuminator?QueryTemplate=Default/Dipankar/SQL_GetMaterialQty&Content-Type=text/xml");
Would it be possible to share more about this SQL_GetMaterialQty query template? is that an MDO ? Also, would it be possible that i use like this an MDO select for example ? Thank you.
BR,
Alex
Hi Alex,
The query I used for the example is a simple SQL query, but you can actually use any query. Please check if you are using the correct query template path and passing all the input parameters, if required. What is the error you are getting?
Thanks,
Dipankar
Hi Dinkapar,
First of all thanks for you response and sorry for my late answer, I had to double check that I am using the correct path. indeed the path that i was using was not correct, I fixed that and now the model is correctly loaded. Thanks again for this nice tutorial.
BR,
Alex
Hi Dipankar,
i have created a table using ui5 code, in that table i have taken three button (update , delete,save) data is coming in to the table but i m confused what code to be written to function the buttons,using MDO query
Please open a Discussion marked as a Question. Read the documents in the Getting Started link at the top right of each page to learn how to get the most out of your SCN Experience.
Regards, Mike (Moderato)
SAP Technology RIG
Have a look here for ideas on a couple of ways to retrieve data from the MII Query Template layer:
SAP MII and HTML 5 Demystified
Sam
thank you salvatore
Hi sam i am creating three buttons(update,delete and save) in view , what type of logic are writing these buttons using query in controller, please help me
Nagaraju,
You can bury and hide an SAP UI5 or MII i5 object on the page and simply call the query template layer which will handle the CRUD operations with your system. An example of this is here:
Building a HMI Using MII & PCo
Sam
thank you so much sam solved my problem
Hi Dipankar,
can you help me please.
i have a proplem with the data binding. i used the same
data: {path : "/Rowsets/Rowset/Row", factory : function() { } } or
data: {path : "/Rowset/Row", factory : function() { } }
but it dose not work .
regards
Khaled
reg