Introduction
Applet grid is dynamic and interactive in nature but it fails when we want to make them editable. This blog explains in detail on how to create an XSL for a query template, use that in a Servlet to generate a dynamic grid as well as add editable elements to the XSL and read them in JavaScript. Furthermore, the blogs shows you how to use AJAX to send data and retrieve data from a server asynchronously with just refreshing a part of the web page improving by usability and performance of the user interface.
Approach
Though there are different ways to achieve this by using only JavaScript or JSP or even WebDynPro Java. Here, I am going to show how to use XSL to generate dynamic datagrid. XSL can easily render and transform XML and XML is native to MII and hence brings out high performance while processing the data to be shown the screen.
Though the screen shots below refer to MII v12.2, the source code can be used in IRPT pages even in xMII v11.5.
Step by Step procedure:
STEP 1: Create a query template with the required fields from the required datasource.
For this example I have created a query template which is returning 4 rows with 3 columns of ItemNumber, Material and MaterialDescription.
STEP 2: Create an XSL with the headers and elements for each field in the query template and loop them on Row.
- Go to Web > Select a project > Right click New > Blank.
- Copy paste the below XSL code, change the element names to match the field names in query template and save it as “filename.XSL”.
-----------------------------------------
BEGIN OF CODE - XSL
-----------------------------------------
<?xml version="1.0"?>
<xsl:stylesheet version="1.0"
xmlns:xsl="http://www.w3.org/1999/XSL/Transform">
<xsl:template match="/">
<html>
<body>
<table border="1">
<tr>
<th>Item Number</th>
<th>Material </th>
<th>Material Desc</th>
</tr>
<xsl:for-each select=" Rowsets/Rowset/Row">
<tr>
<td><xsl:value-of select="ItemNumber"/></td>
<td><xsl:value-of select="Material"/></td>
<td><xsl:value-of select="MaterialDescription"/></td>
</tr>
</xsl:for-each>
</table>
</body>
</html>
</xsl:template>
</xsl:stylesheet>
-----------------------------------------
END OF CODE
-----------------------------------------
Note: The element names in XSL should match the column names of the query template. For Eg., In <xsl:value-of select="ItemNumber"/> ItemNumber is same the column name in the query template and it is case sensitive.
It is not necessary for you to add all the fields, you may just define the required fields what you want to see in the table grid.
STEP 3: Open the query template created earlier and go to Template Categories > Transformation and load the XSL saved in Step 2 in inline Transform.
If you test the query template after selecting the XSL it will show a blank page, do not panic that is an expected behavior.
STEP 4: Generate a servlet report by selecting the XSL and the query template.
- Go to Web > Right click New > IRPT.
- Drag the below hidden divider to see the below screen.
- Select Report
- Select the XSL saved in step 2 in Report Style Sheet.
- Select the Query template created in step 1 in Query Template.
- Click on Insert button.
This will generate the following code in IRPT page. Save it as “servletPage.irpt”.
-----------------------------------------
BEGIN OF CODE – Servlet IRPT
-----------------------------------------
<SERVLET NAME="Illuminator">
<HR>
Illuminator Content Here
<HR>
<PARAM NAME= "QueryTemplate" VALUE="xsltest">
<PARAM NAME= "Stylesheet" VALUE=" /XMII/CM/testxsl.xsl">
<PARAM NAME= "Content-Type" VALUE="text/xml">
</SERVLET>
-----------------------------------------
END OF CODE
-----------------------------------------
Alternatively, you can simply copy paste the servlet code above in the <body> of the IRPT and replace it with Query template and XSL path.
Test the IRPT. If XSL is correct, you will be able to see a table similar to below image depending on the data in query template.
STEP 5: Making the servlets editable by adding input boxes, radio buttons etc., based on the need.
- Add a <TD> within <TR> with the following code for input box.
<td>
<input type="text">
<xsl:attribute name="maxlength">14</xsl:attribute>
<xsl:attribute name="size">14</xsl:attribute>
<xsl:attribute name="value"></xsl:attribute>
</input>
</td>
- Add a <TD> within <TR> with the following code for radio button.
<td>
<input type="radio" name="RadioButtonName"></input>
</td>
STEP 6: Adding an identifier to each cell or <TD> or element of the dynamic grid to have a control to read the data in each cell.
It is important to have a unique ID for element to access it later. Postion() function in XSL returns the position of the current row and concatenating that with the element name makes it unique.
For each input element or TD have the following attribute embedded.
<xsl:attribute name="id"><xsl:value-of select="concat(InpBox_',position())"/></xsl:attribute>
Final code of XSL looks like this with the new additions marked in red:
-----------------------------------------
BEGIN OF CODE - XSL
-----------------------------------------
<?xml version="1.0"?>
<xsl:stylesheet version="1.0" xmlns:xsl="http://www.w3.org/1999/XSL/Transform">
<xsl:template match="/">
<html>
<body>
<table border="1">
<tr>
<th> </th>
<th>Item Number</th>
<th>Material </th>
<th>Material Desc</th>
<th>Enter Input</th>
</tr>
<xsl:for-each select=" Rowsets/Rowset/Row">
<tr>
<td>
<input type="radio" name="RadioButtonName">
<xsl:attribute name="id"><xsl:value-of select="concat('RadioButton_',position())"/></xsl:attribute>
</input>
</td>
<td><xsl:value-of select="ItemNumber"/></td>
<td><xsl:value-of select="Material"/></td>
<td><xsl:value-of select="MaterialDescription"/></td>
<td>
<input type="text">
<xsl:attribute name="id"><xsl:value-of select="concat('InpBox_',position())"/></xsl:attribute>
<xsl:attribute name="maxlength">14</xsl:attribute>
<xsl:attribute name="size">14</xsl:attribute>
<xsl:attribute name="value"></xsl:attribute>
</input>
</td>
</tr>
</xsl:for-each>
</table>
</body>
</html>
</xsl:template>
</xsl:stylesheet>
-----------------------------------------
END OF CODE
-----------------------------------------
Testing the servletPage.irpt file now should result in:
STEP 7: Populate the dynamic XSL grid into a div within another IRPT using XMLHttpRequest – AJAX Mechanism.
Here we will demonstrate how we can get the servlet in servelt.irpt page into a DIV within another IRPT page say ajaxDemoPage.irpt. With this you can also avoid using iFrames. This brings out all the advantages of using AJAX in terms of page load, speed, user interaction etc.,
We will use XMLHttpRequest object that enables exchange the data asynchronously with web servers.
This mechanism can be used in several ways based on the need. However, for demonstrating the idea behind it here we just have an input box defaulted with the path of servlet.irpt and clicking the button will result in populating the DIV with the servlet generated in servlet.irpt dynamically.
In addition to it we will add a button which we will use to read the data in input fields.
- Create an IRPT page and copy paste the below code and save it as “ajaxDemoPage.irpt”
-----------------------------------------
BEGIN OF CODE – AJAX Demo IRPT
-----------------------------------------
<HTML>
<HEAD>
<TITLE>Your Title Here</TITLE>
<SCRIPT language="JavaScript">
function updateDiv(){
var url = document.getElementById('URLInputID').value;
loadXMLDoc(url);
}
function loadXMLDoc(url)
{
var xmlhttp;
if (window.XMLHttpRequest)
{// code for IE7+, Firefox, Chrome, Opera, Safari
xmlhttp=new XMLHttpRequest();
}
else
{// code for IE6, IE5
xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
}
xmlhttp.onreadystatechange=function()
{
if (xmlhttp.readyState==4 && xmlhttp.status==200)
{
document.getElementById('servletDiv').innerHTML=xmlhttp.responseText;
}
}
- xmlhttp.open("GET",url,true);
- xmlhttp.send();
}
</SCRIPT>
</HEAD>
<BODY>
<table cellpadding="1" cellspacing="5" border="1" width="100%" valign="top">
<tr>
<td>
Enter Servlet URL to be populated:
<input id="URLInputID" type="text" value="/XMII/CM/Prototype/Sandbox/servletPage.irpt" width="500px"> </input>
<input type="button" value="Populate Div" onclick="updateDiv()"> </input>
</td>
<tr>
<tr>
<td>
<div id="servletDiv"></div>
</td>
</tr>
<tr>
<td>
<input type="button" value="Read values" onclick="readValue()"> </input>
</td>
</tr>
<table>
</BODY>
</HTML>
-----------------------------------------
END OF CODE
-----------------------------------------
Testing this ajaxDemoPage.irpt will result in:
STEP 8: JavaScript to read an input value in the input fields.
As you can see onClick on button we are calling a JavaScript function readValue().
---------------------------------------------------------
BEGIN OF CODE – JavaScript to read input Values
---------------------------------------------------------
function readValue(){
var val1= document.getElementById('InpBox_1').value;
var val2= document.getElementById('InpBox_2').value;
var val3= document.getElementById('InpBox_3').value;
var val4= document.getElementById('InpBox_4').value;
alert(" Value in Row 1 is : " + val1 +"\n "+" Value in Row 2 is : " + val2 +"\n "+" Value in Row 3 is : " + val3 +"\n "+" Value in Row 4 is : " + val4 +"\n " );
}
-----------------------------------------
END OF CODE
-----------------------------------------
STEP 9: Making servlets more interactive by passing parameters to servlet.
You can pass parameter to filter data or to use it as an input variable to query template.
- Append “?name=value” to the servlet URL being called from ajaxDemoPage.irpt.
- Eg., XMII/CM/Prototype/Sandbox/servletPage.irpt?itemNum=0001
- Add another parameter with Param.1 in the servlet code to read the ‘itemNum’ variable in the URL.
-----------------------------------------
BEGIN OF CODE – Servlet IRPT
-----------------------------------------
<SERVLET NAME="Illuminator">
<HR>
Illuminator Content Here
<HR>
<PARAM NAME= "QueryTemplate" VALUE="xsltest">
<PARAM NAME= "Stylesheet" VALUE=" /XMII/CM/testxsl.xsl">
<PARAM NAME= "Content-Type" VALUE="text/xml">
<PARAM NAME="Param.1" VALUE={itemNum}>
</SERVLET>
-----------------------------------------
END OF CODE
-----------------------------------------
Now you can use Param.1 in the query template to get the value of itemNum passed from servlet.
THE END
5 Comments
