Product Lifecycle Management Blogs by SAP
Dive into product lifecycle management news, learn about digitalizing PLM for the digital supply chain, and stay informed with product updates from SAP.
cancel
Showing results for 
Search instead for 
Did you mean: 

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

8 Comments