Skip to Content

More so now than ever before I am asked about how best to integrate the new and exciting world of HTML 5 into the SAP MII product.  As you probably already know MII supports a very wide range of UI technologies along with providing a very rich set of UI features and objects via the Java Applet technology along with just about any other web technology you wish to leverage in a mash-up environment.  More recently you have probably heard of and seen SAP moving towards HTML 5 as a standard UI across the SAP Business Suite and the SAP Manufacturing Integration & Intelligence (MII) product is no exception to this.

SAP MII 14.0 can support the following approach today and in 14.0 SP04 (planned for release on the last week of November) we are planning to deliver HTML 5 Display Templates and a JavaScript library that simplifies the below scripts (See the end of this for furhter details).  However, in the immediate short the HTML 5 approach is still supported and the below examples will allow you to extend this reach to additional 3rd party HTML 5 libraries too:

  1. Import the SAP UI5 library into your NetWeaver instance, the one I picked was:  UISAPUI5JAVA09P_2-20009678.SCA.
  2. Import the SAP OData library into your NetWeaver instance (MII 14.0), the one I picked was: ODATACXFEXT09_0-20009755.SCA
  3. Import the third parth HTML 5 library into the Web environment of MII so you can reference their JavaScript library on your page or deploy the JARs to the NetWeaver environment and this guide will walk you through the steps.

Once the above steps are complete the following Java Script will work (Be sure to replace the QueryTemplate path with your path) and JQuery options are outlined here in more detail:

var model = new sap.ui.model.json.JSONModel();

jQuery.ajax({
     type: ‘POST’,

     url: /XMII/IlluminatorOData/QueryTemplate?QueryTemplate=<path/to/QueryTemplate>&$format=json,

     data : parameters,

     dataType: ‘json’,

     cache: false,
async: true,crossDomain : true}).done(function (data, textStatus, jqXHR)
     {
model.setData(data)}).fail(function(data, textStatus, jqXHR){showErrorMessage();});

OR you can use this snippet documented here (Once again simply replace the QueryTemplate path with your path):

var jsonModel = new sap.ui.model.json.JSONModel();
jsonModel.loadData(“/XMII/IlluminatorOData/QueryTemplate?QueryTemplate=<path/to/QueryTemplate>&$format=json“);

oChart.addColumn(new sap.makit.Column({name:”column1″, value:”{Column1}”}));
          
oChart.addColumn(new sap.makit.Column({name:”column2″, value:”{Column2}”}));
          
oChart.addColumn(new sap.makit.Column({name:”column3″, value:”{Column3}”, type:”number”}));

oChart.setModel(jsonModel);

oChart.bindRows(“/d/Rowset/Row“);

Also, you can use this BLOG post as a reference for the above and another great reference example in the area and even though Dipankar uses the Illuminator XML servlet available in MII 12.x and you can change out that call with the one above (this is a BLOG from our SDN Mfg Community Page):   Making Engaging UI on SAP MII with SAPUI5

That should at least get you started with the current versions so onto the next step.  As part of the MII 14.0 SP04 release, planned for the end of November, there are plans to have a new HTML 5 JavaScript library embedded inside of MII that will work with new HTML 5 Display Templates.  This will greatly simplify the method in which calls to the query interface are made and also how display objects are populated on the page.  Here is an example snippet of what you can expect as part of this MII 14.0 SP04 release which is planned to support both HTML 5 Charts and Grids:

<HTML>

<HEAD>

                    <TITLE>MII 14.0 SP04 HTML 5 Example</TITLE>

                    <META http-equiv=”X-UA-Compatible” content=”IE=edge”>

                    <META http-equiv=’cache-control’ content=’no-cache’>

                    <META http-equiv=’expires’ content=’0′>

                    <META http-equiv=’pragma’ content=’no-cache’>

                    <SCRIPT type=”text/javascript” src=”/XMII/JavaScript/bootstrap.js” data-libs=”i5Chart,i5Grid”></SCRIPT>

                    </SCRIPT>

                    <SCRIPT language=”JavaScript” >

                               var test = new com.sap.xmii.grid.init.i5Grid(“<path/To/DisplayTemplate>”, “<path/to/QueryTemplate>”);

                                        test.setGridWidth(“640px”);

                                        test.setGridHeight(“400px”);

                                        test.draw(“div1”);

                    </SCRIPT>

</HEAD>

<BODY>

                    <DIV id=”div1″/>

</BODY>

</HTML>

Hope this helps everyone and please feel free to comment below in case I missed something or would like to know more about any particular area in this BLOG.

Thanks again,

Sam

To report this post you need to login first.

8 Comments

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

  1. Konstantin Chernega

    Hi Sam,

    IMO this is awesome and MII is moving into right direction. Old applet approach has been kinda archaic and embedding modern UI technologies is definitely a step forward.

    Regards,

    Konstantin

    (0) 
  2. christian libich

    I have been having trouble getting the code example linked below to work.

    http://help.sap.com/saphelp_mii140sp04/helpdata/en/0c/3b3052757c755ce10000000a423f68/content.htm?frameset=/en/4d/54cbe9071b60c5e10000000a15822d/frameset.htm

    First it wants to load a properties file named “messages_en_US.properties” that doesn’t exist. There is a messages_en.properties file. I was able to copy the messages_en.properties to get past this.

    Second I get the folowing error:

    “Object doesn’t support property or method ‘getUI5TableElement'”

    Has anyone else encountered these issues?

    Regards,
    Christian

    (0) 
    1. Ria Elezabeth Ninan

      Hi Christian,

      The code snippet in the above link works fine. (However, there is a typo in the script section where the bootstrap.js gets included–  a “==” instead of “=”. This will be corrected in the help document. But the issue you are facing isn’t related to this.)

      I just verified it by creating an i5Grid that uses a TagQuery Template as datasource.

      The new charts and grids that are released with MII 14.0 SP04 have been tested with SAP UI5 1.14.3

      Did you try running the i5Grid directly from MII workbench using “Test” button. Do you get the same error there too.

      Also do check and let us know the version of SAP UI5 that is deployed on your NW server.

      Regards,

      Ria

      (0) 
      1. christian libich

        Hello Ria,

        We are running MII 14.0 SP4 Patch 0 on Netweaver 7.3 EPH1. The UI5 version is 1.16.5. I tested with multiple browsers and the same error occurrs. I also tested with a significant delay before creating the grid in case there was a timing issue with the bootstrapped libraries.

        Regards,
        Christian

        (0) 
        1. Ria Elezabeth Ninan

          Hi Christian,

          i5Grid should work with the UI5 version that you are using.

          Did you try running the i5Grid directly from MII workbench using “Test” button, and did you get the same error there too?

          And is this all you are doing from html page:

          var c = new com.sap.xmii.grid.init.i5Grid(<i5Grid path>, <query template path>);

          c.draw(‘divId’);

          Ideally should have worked for you. Will it be possible for you to share the i5Grid definition xml?

          Regards,

          Ria

          (0) 

Leave a Reply