Example: Linking Two Applets

You can use Web page scripting to insert a grid object, which contains a list of batches, on which you can click a batch row to view another applet. The other applet displays a line chart of batch parameters.

To create this scripting example, do the following:

Use the Script Assistant wizard in the SAP MII Workbench to create an applet by selecting a query template, such as LotListQuery, and display template, such as LotListGrid. The following HTML is created:
<APPLET NAME="BatchGrid" WIDTH="715" HEIGHT="45" CODE="iGrid" CODEBASE="/Illuminator/Classes" ARCHIVE="illum8.zip" MAYSCRIPT>

<PARAM NAME="QueryTemplate" VALUE="Training/LotListQuery">

<PARAM NAME="DisplayTemplate" VALUE="Training/LotListGrid">

</APPLET>
Use the wizard to insert a trend using a query template, such as BatchTrendQuery, and a display template, such as BatchTrendChart. The wizard inserts following HTML into the page:
<APPLET NAME="BatchTrend" WIDTH="640" HEIGHT="400" CODE="iChart" CODEBASE="/Illuminator/Classes" ARCHIVE="illum8.zip" MAYSCRIPT>

<PARAM NAME="QueryTemplate" VALUE="Training/BatchTrendQuery">

<PARAM NAME="DisplayTemplate" VALUE="Training/BatchTrendChart">

<PARAM NAME="FilterExpr" VALUE="PlasticBottleTrendData.BatchNo=''">

</APPLET>

In the Parametersarea of the Applet tab of the wizard, add the FilterExpr parameter to the BatchTrend applet. The filter expression can be used to change the filter expression of a SQL query. When the applet loads, it sets the filter expression (the SQL query WHERE clause) and the query looks for a particular batch number. In the above HTML, the default batch number is an empty string. No records are returned and the chart does not show results until you set a value for the batch number.
To link the trend applet to the grid applet, add script to the BatchGrid_Selected function to implement a grid selection event. The event changes the batch number filter expression in the chart query when a user selects a batch in the grid.
1. Using the wizard, set the target applet to BatchGrid, which is the applet that initiates the event based on the user action.
  The target event is the iGrid Selected event and the name of the script function is BatchGrid_Selected.
2. Select BatchTrend as the applet.
  Upon grid selection, you want to change a parameter, the filter expression in the SQL query, in this applet.
3. Since it is a query parameter that you want to change, select getQueryObject() as the applet method.
4. To select the specific parameter you want to change, selectsetFilterExpr(NEWVALUE) as the object method, and click .Insert.
5. To replace NEWVALUEwith the correct value by retrieving the selected batch number from the BatchGrid applet, set the following:
  - Applet as BatchGrid
  - Applet Method as getGridObject()
  - Object Method as getSelectedCellValue(COLNUMBER)
6. Click and save the script .Insert

The completed script function is below. Lines preceded with // indicate comments that explain the script function in detail.

function BatchGrid_Selected(){

// We set up variable aliases for the two applets

// to make the reference to the applets in the script simpler

// getGridObject returns a reference to the grid itself

var BatchGrid = document.BatchList.getGridObject();

// the getQueryObject command returns a reference to the

// actual query object - this can then be used to

// refresh the query or change query parameters on the fly

var LotQuery = document.BatchGrid.getQueryObject();

var TrendQuery = document.BatchTrend.getQueryObject();

// get the BatchID, StartDate, and EndDate

// from the selected row of the grid applet

// (you must know the column numbers)

var selBatch = BatchGrid.getSelectedCellValue(1);

var selStartDate = BatchGrid.getSelectedCellValue(6);

var selEndDate = BatchGrid.getSelectedCellValue(7);

// set the FilterExpr and Start and End Dates

// for the BatchTrend applets query object

TrendQuery.setFilterExpr("PlasticBottleTrendData.BatchNo='"+selBatch+'");

TrendQuery.setStartDate(selStartDate);

TrendQuery.setEndDate(selEndDate);

// update the BatchTrend applet

// do an update here because the query IS time sensitive

// you may do a simple refresh if the query is not time sensitive,

// but if it is time sensitive, you should do an updateChart

// so the whole chart, including axes, updates

document.BatchTrend.updateChart(true);

}

To change the title of the trend based on batch selection, add the following and perform an updateChart command:
//change the title on the chart

BatchTrend.setTitle("Profile For "+selBatch);
To pass parameters between applets, insert a chart applet with the following parameters:
<APPLET NAME="CurrentSpeedChart" WIDTH="715" HEIGHT="45" CODE="iGrid" CODEBASE="/Illuminator/Classes" ARCHIVE="illum8.zip" MAYSCRIPT>

<PARAM NAME="Title" value="Current Line Speeds">

<PARAM NAME="YAxisMinorTickCount" VALUE="2">

<PARAM NAME="ShowTagDescription" VALUE="false">

<PARAM NAME="LegendWidth" VALUE="12">

</APPLET>

To add a button named "Show Trend", do the following:

<form>

<input type="button" value="Show Trend" name="B1" onClick="ShowTrend()">

</form>

The onClick parameter for the button references the name of the following script:

<script LANGUAGE="JavaScript">

function ShowTrend() {

//Create a variable that references the chart object

var SpeedChart = document.CurrentSpeedChart.getChartObject();

//Get the selected tag name from the chart object

var selItem = SpeedChart.getSelectedTagName();

//This line creates a session variable with the name "SelectedTag"

document.CurrentSpeedChart.setPropertyValue("SelectedTag",selItem);

//This opens a new HTML page in a second window

window.open("PopUpTrend.htm",null,"height=300,width=720,status=yes,toolbar=no,menubar=no,location=no");

}

</script>

The PopUpTrend.htm page includes the following:

<APPLET NAME="InSQLTrendChart" CODEBASE="/Illuminator/Classes" CODE="iChart" ARCHIVE="illum8.zip" WIDTH="700" HEIGHT="276" MAYSCRIPT>

<PARAM NAME="DisplayTemplate" VALUE="Training/iChartLine">

<PARAM NAME="Server" VALUE="InSQL">

<PARAM NAME="Mode" VALUE="History">

<PARAM NAME="YAxisMinorTickCount" VALUE="2">

<PARAM NAME="LegendWidth" VALUE="25">

<PARAM NAME="ShowTagDescription" VALUE="false">

<PARAM NAME="TagName.1" VALUE="{SelectedTag}">

<PARAM NAME="Title" VALUE="Trend For : {SelectedTag}">

<PARAM NAME="TitleColor" VALUE="#FFFFFF">

<PARAM NAME="MainBackgroundColor" VALUE="gray">

</APPLET>

The key to linking two applets is the {SelectedTag} reference. By placing the session variable created in the other applet in curly brackets, you can reference the variable's value in the new applet. You can see how the {SelectedTag} reference is used for two parameters, PARAM NAME=TagName.1 and PARAM NAME=Title.