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.
- SAP Managed Tags:
8 Comments
