How to pass data dynamically between pages in xMII 11.5

[abesh]

There are basically two methods to pass data between pages in xMII 11.5

• Session Variables
• xMII Reports

and i shall illustrate both with suitable examples. But first things first, let us start by preparing a little html page which will help us acheive what we've set out to. We'll use the PlasticResin Database and the PlasticBottleBatchData and the PlasticBottleTrendData tables for this purpose. Next, we'll create an SQL Query Template and a corresponding Display Template to display the Batch Data in an iGrid. The Query Template should look like this : and The Display Template should look like this after a little bit of tinkering with the display properties : Generate an HTML page, call it Batch.html and embed the applet in it. Now our target would be to display the Batch Trend for each Batch in two different ways :

• By opening a Popup Window with the Trend Chart.
• Displaying the Trend Chart in a new page.

The first option would require us to use Session Variables and the second xMII Reports (.irpt file) . For the uninitiated, xMII reports provide us with a mechanism to create dynamically generated HTML content for display. Both of these would need some ground work to be done before we venture out and explore the two different mechanisms. As before, we'll create Query and Display Templates for Batch Trend. In the Query Template select the PlasticBottleTrendData table, select all the columns and in the Filter expression type in PlasticBottleTrendData.BatchNo = '[Param.1]' so that we can filter the results by passing the value for the Batch Number. Your Query Template should look like this : Generate an HTML page, call it Trend.html and embed the applet in it. Now add a button to the page Batch.html by inserting the following code after the applet. Now add the following code for the popupTrend function : function popupTrend(){ var BatchNo = document.BatchGrid.getGridObject().getSelectedCellValue(1); if (BatchNo == "") { alert ("Please select a Batch !"); } else { document.BatchGrid.setPropertyValue("BatchNo", BatchNo); window.open ("Trend.html",null,"height=350,width=700,status=yes,toolbar=no,menubar=no,location=no"); } } Here BatchGrid is the name of the Grid Applet i've used in the page. If we take a look at the javascript code we can see that we use the getSelectedCellValue(COLNUMBER) method to get the Batch No., and then we use the setPropertyValue(PROPNAME,PROPVALUE) method to set the session variable. The PROPNAME is any name you want to identify the session variable with, and the PROPVALUE is the value of this session variable. Session variables are available to you as long as the browser is running so you can access it from any page as long as you have not closed the browser in between. Now let us modify the Trend.html page to access the environment variable we've set in Batch.html. Add the following Javascript code for the showTrend() function : function showTrend(){ var BatchNo = document.TrendChart.getPropertyValue("BatchNo"); document.TrendChart.getQueryObject().setParam(1,BatchNo); document.TrendChart.getChartObject().setTitle("Trend for Batch : " + BatchNo); document.TrendChart.refresh(); } Notice that we call the getPropertyValue(PROPNAME,PROPVALUE) method to get the value of the session variable "BatchNo" that we had set in Batch.html. The call to the setParam(INDEX,NEWVALUE) method is to pass on the value of [Param.1] or in other words, the first parameter by which we filter the query in the Query Template. Do not forget to call the refresh() method to refresh the chart display. Now call this function on the onload event of the HTML body. All set and done, let us now check how's our application doing ? The Batch List Grid looks like this : Selecting a line in the grid and clicking on "Popup Trend" shows us the trend for the selected Batch in a popup window ! Seems like our application is working after all ! But let us not rest on our laurels because our job is only half done ! We'll try doing the same for xMII Reports but make things a lot simpler. We'll have an HTML page called BatchInput.html, where we'll input the Batch Number manually and then use both GET and POST to submit the data to an xMII Report file TrendBatch.irpt and generate the Trend Chart for that particular Batch. Note that xMII Reports are nothing but HTML files with an irpt extension. This is what enables xMII to recognise a report file and process it accordingly. The code for BatchInput.html should look like :  

Batch No By GET

Batch No :

Batch No By POST

Batch No :

Now we'll go ahead and prepare the irpt page. We'll use the same Batch Trends Query and Display Templates but we'll add two extra applet parameters using the "SAP xMII Content Generation Wizard". In the Parameters tab select Parameter name as "Param.1" and for the Parameter value, key in "{BatchNo}". Similarly add a parameter for "Title" and it's value as "Trend for : {BatchNo}". Click "Create HTML" and copy paste the code in TrendBatch.irpt. The Code should look like : Notice that the name in the curly braces is the same as that of the textbox in the BatchInput.html page. This is because anything within curly braces in an irpt file is considered as a variable whose value can be passed using GET, POST or the setPropertyValue(PROPNAME,PROPVALUE) method. We are done at last ! Launch the BatchInput.html, input the required Batch No. (e.g. "BATCH00001"), click on any one of the buttons depending on whether you want to send data as GET or POST. Bingo ! TrendBatch.irpt displays the trend for the Batch you entered ! The Data Input page : The xMII report by POST : The xMII report by GET : Now, pamper yourself with a cup of hot coffee, sit back and enjoy !