Former Member

September 27, 2012 8 minute read

MII meets up SAPUI5!

It’s been a while that the Beta version of SAPUI5 is released and many of the technologies already completed their introduction with SAPUI5 except SAP MII. So a blog can make it possible. To make this occasion nice and easy, I have prepared a very simple example showing how easily we can bind a SAP MII BLS transaction output with new SAPUI5 sap.ui.table.DataTable editable grid.

All of us, who work with SAP MII display templates like iGrid, iBrowser know very well what are the limitations and shortcomings. SAPUI5 with its robust set of support for technologies like JavaScript, HTML5, CSS, jQuery, Google Web Toolkit, JSON, XML, OData and OpenAJAX gives us a new dimension of developing user interfaces for SAP MII based solutions. Adopting any open source is always difficult, particularly in any client specific implementation. But SAPUI5 with its robust set of APIs, UI control libraries and specially support for multiple SAP Product standards, is like a deep breath of relief. Without getting into any further details let’s see how we can easily connect a SAP MII BLS output with sap.ui.table.DataTable grid using a sap.ui.model.json.JSONModel. We will follow the next few steps to achieve our goal.

Note: As a prerequisite download the trial version (SAPUI5 beta) and unzip the downloaded file HTML5Evaluation_complete.zip. Open the folder with extracted content. Unzip ‘sapui5-static.zip’. You will need the ‘resources’ folder for development.

Step 1: Create a SAP MII BLS transaction to prepare a set of data to be displayed using the DataTable grid. I have taken a set of SAP Process Order details like Process Order number, Material, Batch, Planned Quantity, Actual Quantity, Storage Location, Operation number. Here I have used a very simple SQL query to read Process Order details from a database table. Next I have defined the XML document with all the data columns from my query. Now loop through the data using a Repeater and add the data rows in the XML document.

Step 2: The only intelligence lies in the BLS is to transform the XML document data into JSON format which we can achieve very easily by using a MII XSL Transformation action block. For using the XSL Transformation action block we need to write a small XLS transformation code in a .xsl file as shown below and point the file location inside the action block.

<?xml version='1.0' encoding="iso-8859-1"?>
<xsl:stylesheet version="1.0" xmlns:xsl="http://www.w3.org/1999/XSL/Transform" >
<xsl:output method="html" indent="yes"  />
<xsl:template match="/">
    <xsl:for-each select="Rowsets/Rowset">
            [<xsl:for-each select="Row">
            <xsl:if test="position() > 1">,</xsl:if>{
                processorder: "<xsl:value-of select="AUFNR" />",
                material: "<xsl:value-of select="MATNR" />",
                batch: "<xsl:value-of select="CHARG" />",
                storageloc: "<xsl:value-of select="LGORT" />",
                planqty: "<xsl:value-of select="BDMNG" />",
                actqty: "<xsl:value-of select="MENGE"/>",
                uom: "<xsl:value-of select="UOM" />",
                operation: "<xsl:value-of select="POSNR" />",
                giid: "<xsl:value-of select="ZGIID"/>" }</xsl:for-each>];
    </xsl:for-each>
</xsl:template>
</xsl:stylesheet>
At the very last assignment action block of the BLS don’t forget to assign the output of XSL action block to the BLS output (string type).

Step 3: Once we are done with Step 1, we will now prepare the .irpt file with required SAPUI5 UI controls. As mentioned above we will use the sap.ui.table.DataTable control(editable) to display the BLS output including update fucntionality of the data inside the grid and save directly to database.


<html>
<head>
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<title>sap.ui.table.Table Test Page</title>
<link rel="shortcut icon" type="image/x-icon" href="images/controls/sap.ui.table.Table.gif">
<script id="sap-ui-bootstrap"
    type="text/javascript"
    data-sap-ui-libs="sap.ui.commons,sap.ui.table"
    data-sap-ui-theme="sap_goldreflection"
    src="/XMII/CM/Test/resources/sap-ui-core.js">
</script>
<script type="text/javascript">
    /* Call the BLS created in Step 1 using SAP MII Runner service as shown below.  */
    var xmlHttp = new XMLHttpRequest(); 
    var xmlDOM;   
    xmlHttp.open("GET","/XMII/Runner?Transaction=Default/Folder/BLS_Get_GoodsIssueData&OutputParameter=JSONOUTPUT&Content-Type=text/xml", false);       
    xmlHttp.send();
    xmlDOM = xmlHttp.responseXML.documentElement;   
    var opElement = xmlDOM.getElementsByTagName("Row")[0].firstChild;
    var aData = eval(opElement.firstChild.data);
    /* Define the table, with toolbar controls, update button */
    var oTable = new sap.ui.table.DataTable("table", {
            editable : true,
            visibleRowCount :5
    });
    oTable.setSelectionMode(sap.ui.table.SelectionMode.Multi);
    oTable.setToolbar(new sap.ui.commons.Toolbar({items: [
       new sap.ui.commons.Button({text: "Update Data", press: updateData}),
       new sap.ui.commons.Label({text: "First Visible Row"}),
       new sap.ui.commons.TextField({tooltip: "First Visible Row", width: "30px", change: function(oEvent) { oTable.setFirstVisibleRow(parseInt(oEvent.getParameter("newValue"))); }}),
       new sap.ui.commons.Label({text: "Visible Row Count"}),
       new sap.ui.commons.TextField({tooltip: "Visible Row Count", width: "30px", change: function(oEvent) { oTable.setVisibleRowCount(parseInt(oEvent.getParameter("newValue"))); }})
    ]}));
    /* Define the table columns */
    var oControl = new sap.ui.commons.TextView().bindProperty("text", "processorder");
    oTable.addColumn(new sap.ui.table.Column({label: new sap.ui.commons.Label({text: "Process Order"}), template: oControl, sortProperty: "processorder", filterProperty: "processorder", width: "100px"}));
    oControl = new sap.ui.commons.TextView().bindProperty("text", "material");
    oTable.addColumn(new sap.ui.table.Column({label: new sap.ui.commons.Label({text: "Material"}), template: oControl, sortProperty: "material", filterProperty: "material", width: "100px"}));
    oControl = new sap.ui.commons.TextView().bindProperty("text", "batch");
    oTable.addColumn(new sap.ui.table.Column({label: new sap.ui.commons.Label({text: "Batch"}), template: oControl, sortProperty: "batch", filterProperty: "batch", width: "100px"}));
    oControl = new sap.ui.commons.TextView().bindProperty("text", "planqty");
    oTable.addColumn(new sap.ui.table.Column({label: new sap.ui.commons.Label({text: "Planned Quantity"}), template: oControl, sortProperty: "planqty", filterProperty: "planqty", width: "100px"}));
    oControl = new sap.ui.commons.TextField().bindProperty("value", "actqty");
    oTable.addColumn(new sap.ui.table.Column({label: new sap.ui.commons.Label({text: "Actual Quantity"}), template: oControl, sortProperty: "actqty", filterProperty: "actqty", width: "100px"}));
    oControl = new sap.ui.commons.TextView().bindProperty("text", "storageloc");
    oTable.addColumn(new sap.ui.table.Column({label: new sap.ui.commons.Label({text: "Storage Location"}), template: oControl, sortProperty: "storageloc", filterProperty: "storageloc", width: "100px"}));
    oControl = new sap.ui.commons.TextView().bindProperty("text", "uom");
    oTable.addColumn(new sap.ui.table.Column({label: new sap.ui.commons.Label({text: "Unit of Measure"}), template: oControl, sortProperty: "uom", filterProperty: "uom", width: "100px"}));
    oControl = new sap.ui.commons.TextView().bindProperty("text", "operation");
    oTable.addColumn(new sap.ui.table.Column({label: new sap.ui.commons.Label({text: "Operation"}), template: oControl, sortProperty: "operation", filterProperty: "operation", width: "100px"}));
    oControl = new sap.ui.commons.TextView().bindProperty("text", "giid");
    oTable.addColumn(new sap.ui.table.Column({label: new sap.ui.commons.Label({text: "GIID"}), template: oControl, sortProperty: "giid", filterProperty: "giid", width: "100px"}));
    /* Define the JSON model */
    var oModel = new sap.ui.model.json.JSONModel();
    oModel.setData({modelData: aData});
    /* Connect the data table to the JSON model */
    oTable.setModel(oModel);
    oTable.bindRows("modelData");   
    oTable.placeAt("content");
    /* Function to save the updated data in the grid. We have used a very simple SQL update query SQLQRY_Save_Data, executed through MII iCommand */
    function updateData() {
         /* get the selected row context  and using the context read the required values from the selected row*/
         var selRowContext = oTable.getContextByIndex(oTable.getSelectedIndex());
         var selectedId = oModel.getProperty("giid", selRowContext);
         var selectedPO = oModel.getProperty("processorder", selRowContext);
         var selectedQnty = oModel.getProperty("actqty", selRowContext);
         document.icmd_common.setQueryTemplate("Default/Folder/SQLQRY_Save_Data");
         var commCommandQueryTemplate =  document.icmd_common.getQueryObject();
         commCommandQueryTemplate.setParam(1, selectedQnty);
         commCommandQueryTemplate.setParam(2,selectedPO);
         commCommandQueryTemplate.setParam(3, selectedId);
         document.icmd_common.executeCommand();
         /* Display a success message */
         sap.ui.commons.MessageBox.alert("Actual quantity updated successfully.");
    }
</script>
</head>
<body class="sapUiBody"  >
<h1 id="header">JSON based BLS output</h1>
<object type="application/x-java-applet" name="icmd_common" codebase ="/XMII/Classes" code="iCommand" archive="illum8.zip" width="0" height="0">
    <param name="DisplayTemplate" value="Default/Folder/ICMD_Common_ExecutionTemplate">
</object>
<div id="content"></div>
<p>
<b>Switch theme:</b>
<a href="javascript:sap.ui.getCore().applyTheme('sap_goldreflection')">Gold Reflection</a>,
<a href="javascript:sap.ui.getCore().applyTheme('sap_ux')">UX</a>,
</body>
</html>
Copy the above code snippet in an .irpt file and run to get the following views.To update the data 
1) select any row 
2) click on the “Actual Quantity” cell value for the selected row 
3) click the “Update Data” button after modifying the value.


A simple success message as shown below, will notify the completion of the update.


Also if you notice, at the bottom of the page I have added 2 links inside “Switch theme:” segment, using which the theme of the application can be change by a simple click!!. For my application default theme is “sap_goldreflection”.


 So far you have seen how easily we can display, update SAP MII BLS transaction data using  the new SAPUI5 table control called sap.ui.table.DataTable. Just imagine the tons of HTML, JavaScript and CSS code we have to write to achieve these simple functionality in a MII application but with SAPUI5 how fast and easy it is.

8 Comments

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

Former Member

June 21, 2013 at 9:23 pm

Hi Avijith

Excellent article and very simple steps. I have a question, how did you manage to get all the contents of the resources folder into the workbench? The workbench imports only files and after I started i noticed there are a lot of subfolders and really large files.

Any suggestion to easily import the complete resources folder into MII workbench?

Suraj

Former Member

Blog Post Author

June 26, 2013 at 4:37 pm

Hi Suraj,

Thanks. One of the ways to import the UI5 source library is as follows

Inside MII workbench --> Select Import-> Naviagate upto the resource folder in the file selection window -> select the resource folder and click "Enter" -> will take some time to import all inside resource folder, so plz don't close the workbench or kill the session.

Hope this will solve your query.

Thanks and Regards

Avijit

Former Member

June 27, 2013 at 7:46 pm

Hi Avijit

Thanks for your response. But your suggestion did not work for me. On Hitting enter in the resources folder in the import selection window in workbench (12.2) it does not start the import, rather it opens the folder and lists all the file.

I tired to do a select all and upload all the files, a few mins later I got a Java Heap Space Error.

I am guessing either the resource folder content has got extremely large since you uploaded it in Sep 2012 or there is some setting in MII 12.2 workbench that I have which is causing this issue.

Hope full sap will soon come with an alternate soon to complete this upload.

Suraj

Former Member

April 18, 2014 at 8:28 am

I guess i am replying to an old thread..but for the the benifit of readers...

Folder import is supported from MII 14.0 and above...

Before that users can only import files using import functionality in workbench

Former Member

July 10, 2013 at 6:55 pm

Hi Avijit, congratulations for the post was very good.

But I created the xsl and received the error "Premature end of file".

Any comment?

Thank you.

Aneilson.

Former Member

December 27, 2013 at 5:26 pm

Hi Avijit,

Thanks for the post i tried it but the inline transformation is not happening

there is some problem with xslt that it is not converting to JSON

could the problem be beacaue of

<xsl:output method="html" indent="yes" />

should it be output method="string"

as we require JSON string

any suggestions

Best Regards,

Namita

Former Member

January 24, 2014 at 10:24 am

Hi! The link to the SAP UI5 trial downloader is brokes, goes anybody know where todownload it? Thanks!!

Former Member

January 26, 2014 at 3:18 pm

Hi Avijith,

Thank you for such good example.I have tried this example.

I have created transaction n irpt pages.But data is not displayed in grid.Grid is blank.

Can you please guide me on this?

Also DisplayTemplate in irpt page,is it a UI5 grid?

Thanks in advance.

Regards,

Neha

MII meets up SAPUI5!

Assigned Tags