Introduction

In the past I have talked about how to leverage the power of HTML5 within MII (SAP MII and HTML 5 Demystified) and now I am going to go a step deeper and talk about how to build an HTML5 web page that can interact with and control equipment.  In this document I will explain step by step what it takes to write an HTML5 interface to the SAP MII Logic Engine.  Then from here you have the ability to process multiple commands to any of the systems that MII communicates with, including TagStore (Writes to Control Tags) commands which are used to affect the operation of your equipment.

Architecture

The basic flow of this scenario is that a user logs into MII and opens up a web page that has been designed to pass parameters to the equipment layer via writes to the tag controls (Level 1) system.  These systems can be very tightly controlled in the industrial space and are often separated out for a wide variety of reason all of which are valid but limit the amount of interaction that plant operations personnel can have.  This restriction can very often prevent workers and operations folks from efficiently performing their job, the SAP MII product is designed to securely alleviate this disconnect.

MII Content Design

When developing content for MII always look for ways to reuse and parameterize your content in order to improve the turn-around time for future development tasks and topics.  For example if you plan on handling multiple commands or are looking for ways to quickly interact with ERP, MES, or Automation system then it's best to build out standard components and re-use them across your dashboards and applications (basic, I know ).  Anyway, I built the following transaction in order to ensure that my web page or any other HMI-like page could pass a command parameter that could easily be handled and passed to an execution or automation system.  The transaction at a minimum should have the following Transaction Properties as Inputs and Outputs:

Of course in the real-world you will probably need to have additional context passed in such as Plant, Work Center or Equipment ID in order to properly identify where the control signal will go.  In this example I will omit this in order to keep it simple, but the best solution to manage this mapping is using the SAP MII Plant Information Catalog (PIC) and leverage the search service to identify the tag to use.

Now, the next step is to define a transaction that can handle multiple different types of commands and send them to one or more systems.  I recommend using the Logic -> Switch action so it is very easy to identify commands and handle unsupported ones gracefully, and it should look something like this:

In the OutputDoc XML definition, used for my response XML structure I have two columns "Command" and "Response" both of type String so that I can not only verify the command that was passed in but also capture the response message from the underlying system.  From here the next step is to simply create an Xacute Query template, point to the transaction and map the inputs.  For my example the Xacute Query template looks like this:

From here it's easy to test the technical operation of the system integration you are performing and extending it to work across one or many different MES or Automation systems.  This can be achieved via a wide range of different integration protocols such as HTTP services, PCo (OPC or Native), PAPI, SQL/JDBC, FTP, Flat Files, etc...

Web Page Design

When designing a dashboard or an application for use with the SAP MII product there are a few key design criteria to keep in mind. The main one is that everything in the MII content is exposed as a REST service via the MII Query Template layer (OData and MII XML formats).  This makes developing UIs and dashboards a quick and easy task.  In the above content example I showed a stub of how to create the structure for handling various commands.  The next step is to show how a web page can be used to link HTML buttons and events to the content and pass it a user initiated "Command".  This command parameter will be used to determine what signals are written to the Execution or Control system.

The web page you define for your content will depend on the path to your above defined query template, which I will point out as the area that will vary for you.  Here is my code snippet for an HTML5 page, that will even work on a mobile device:

<!DOCTYPE HTML><HTML><HEAD><TITLE>Kepware Control HMI</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="i5Grid"></SCRIPT><link rel="StyleSheet" type="text/css" href="/XMII/CM/CustomerExamples/Common/SAP.css"><script type="text/javascript">
var debug = false;
function captureButtonCommand(btnCommand) {
try {  // Perform the call to the i5Grid Query Object  var notifsGrid = new com.sap.xmii.grid.init.i5Grid("CustomerExamples/Control/EquipmentControl5Grid","CustomerExamples/Control/EquipmentControlXQuery");  notifsGrid.getQueryObject().setParameter("Param.1", btnCommand);  notifsGrid.draw("commandGrid");  if(debug) {  // Retrieve the response from the system:  var command = notifsGrid.getGridObject().getCellValueByName(1, "Command");  var response = notifsGrid.getGridObject().getCellValueByName(1, "Response");  // Pop-up a box that shows the results of the command  alert("Successfully called command: "+btnCommand+"  Command: "+command+"  Response: "+response);  }
} catch(err){  alert("Error: "+err.message);
}
}</script></HEAD><BODY onload="captureButtonCommand('DoNothing');"><table border="1" class="SAPTable" width="90%"><tr>  <th align="center" class="PageSmHeader">Control Equipment</th></tr><tr>  <td>  <input type="button" value="Reset Environment" class="buttons" onClick="captureButtonCommand('Reset');">  </td></tr><tr>  <td>  <input type="button" value="Test" class="buttons" onClick="captureButtonCommand('test');">  </td></tr></table></div><br><div id="commandGrid" style="display:none"> <!--style="position:relative;top:0px;bottom:0px;left:0px;right:0px;overflow:auto;;" height:1;width:1 --></BODY></HTML>

The fun part about the above page is that it is very extensible and will work for any HMI scenario and you can of course add additional items to this page; or even embed other HMI pages and include this as an extra function to extend your existing operator screens.  In the case of the above scenario the page looks like this (please note I have a CSS defined which controls the look and feel and I purposely omitted this since you will likely have your own requirements):

In my case I am simply writing a value to a Kepware OPC server tag to prove out the operation of the tag store command.  Your scenario can vary widely but is ultimately up to you to decide how you wish to use the MII product in your environment.

I hope that this simple example and the HTML5 JS code snippet is useful for your future SAP MII implementations and as always comments are appreciated.

Sam