Skip to Content

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.

UI5MVC.png

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:

pie.PNG

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.

To report this post you need to login first.

42 Comments

You must be Logged on to comment or reply to a post.

  1. Pradip Ray

    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

    (0) 
    1. Dipankar Saha Post author

      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

      (0) 
  2. Federico Cicerchia

    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.-

    (0) 
    1. Dipankar Saha Post author

      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

      (0) 
      1. Seng Kiang Hoe

        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?

        (0) 
        1. Dipankar Saha Post author

          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

          (0) 
          1. Seng Kiang Hoe

            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&gt;:<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

            (0) 
      2. Swapnil Bodhke

        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.

        (0) 
        1. Dipankar Saha Post author

          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

          (0) 
  3. Anuj Suryawanshi

    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

    (0) 
    1. Dipankar Saha Post author

      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

      (0) 
      1. Anuj Suryawanshi

        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

        (0) 
        1. Dipankar Saha Post author

          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

          (0) 
    1. Salvatore Castro

      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

      (0) 
      1. ANSHUL ARORA

        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

        (0) 
        1. Dipankar Saha Post author

          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

          (0) 
          1. Sumit Gokhe

            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

            (0) 
            1. Dipankar Saha Post author

              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

              (0) 
              1. Sumit Gokhe

                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

                (0) 
                1. Salvatore Castro

                  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

                  (0) 
                  1. Sumit Gokhe

                    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

                    (0) 
                      1. Sumit Gokhe

                        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

                        (0) 
  4. Alex -

    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

    (0) 
    1. Dipankar Saha Post author

      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

      (0) 
      1. Alex -

        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

        (0) 
  5. Nagaraju M

    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

    (0) 
    1. Michael Appleby

      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

      (0) 
  6. Nagaraju M

    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

    (0) 

Leave a Reply