Web Scripting with SAP xMII Objects

You can greatly improve the user experience of SAP xApp Manufacturing Integration and Intelligence (SAP xMII) through some simple Web scripting methods. You can use scripting to link applets together, and to pass variables between windows. You can also effect both visual elements and data query parameters based on user actions. Either JavaScript or VBScript may be used. The examples shown in this guide are all in JavaScript for consistency.

Before we go too deeply into scripting examples, you should review the SAP xMII Applet General Reference, particularly the Property/Method Reference, Executing Applet Methods, and the Web Scripting Common Methods sections. It is also important to note that specific applet methods and properties that may be accessed through the Template Editor or through Web script are described in the appropriate applet reference details section of this on-line guide.

There is a new productivity tool, the SAP xMII Script Assistant, which is available as a code helper for creating applet related Web page JavaScript. Please refer to the Script Assistant User's Guide for more information.

Web Scripting Examples

Linking Two Applets

You can get a head start on scripting by using the FrontPage wizard. It allows you to "stub-out" events scripts for applets as you insert them into HTML pages. For example, let's insert a grid object with that contains a list of batches. When we click on a specific row in the batch list, a second applet will display a line chart of batch parameters specific to the selected batch.

Open FrontPage 2000 and select the SAP xMII Object from the Tools menu (This assumes that you have installed the FrontPage Wizard). Insert an SAP xMII applet by selecting a query template and a display template. In the example given, we are using LotListQuery and LotListGrid. (Note: The SAP xMII Wizard can also be run in standalone mode. Please refer the Standalone HTML Wizard User's Guide for more information.)

Press the Create HTML button. HTML that looks like the following will be created:

</APPLET>

Next insert a trend into the page using the FrontPage Wizard. In our case, we are using a query template named BatchTrendQuery and a display template named BatchTrendChart.

Press the Create HTML button. The following HTML code will be inserted into the page:

</APPLET>

You will notice that we added a parameter named "FilterExpr" to the BatchTrend applet by using the Parameters section of the Wizard. The filter expression can be used to change the filter expression of an SQLQuery. In this example, when the applet loads, the filter expression (the SQL query WHERE clause) is being set so that the query is trying to find a particular batch number. In this example, we have set the default batch number to an empty string. This will bring back no records, so until we set the value to a valid batch number, the chart will not show any results. We will set the filter expression to an appropriate value in the script function, which we will demonstrate below.

To link the trend applet to the grid applet, we will add script to the BatchGrid_Selected function. We will implement a grid selection event to change the batch number filter expression in the chart query when a user selects a batch in the grid.

Call up the Script Assistant from the Tools menu in FrontPage. For Target Applet, we will select the BatchGrid, because that is the applet that will fire the event based on the user action. The Target Event is the iGrid Selected event. The name of the script function will be BatchGrid_Selected.

Next, choose BatchTrend (the chart applet) as the Applet, because upon the grid selection, we will want to change a parameter in the BatchTrend applet (specifically, the filter expression in the SQL Query). Since it is a query parameter that we wish to change, select getQueryObject() under Applet Method. To select the specific parameter that we wish to change, select setFilterExpr(NEWVALUE) in the Object Method drop down, and press the insert button. You can then replace NEWVALUE with the proper value by getting the selected batch number from the BatchGrid applet. You may use the Script Assistant to help you with that as well. Choose BatchGrid under Applet, then choose getGridObject() under Applet Method, and then getSelectedCellValue(COLNUMBER) from the Object Method drop down. Then press insert. Make sure you press the Save Script button before closing the Script Assistant.

The completed script function is shown below. This will show some common script language uses in a real example. Lines preceded with "//" indicate comments. The comments explain the script function in detail.

function BatchGrid_Selected(){

// We will 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);

}

General Parameter Access

It is relatively simple to perform a variety of other tasks as well. Let's assume that we want to change the title of the trend depending on which batch is elected. We would need to add the following BEFORE we did an updateChart command:

//change the title on the chart

BatchTrend.setTitle(“Profile For “+selBatch);

Other parameters may be accessed in a similar manner. Refer to the Applet Reference Guide and the specific applet type reference for more information. The new Script Assistant can be of great help when determining what functions you can execute from within the Web page.

Passing Parameters Between Windows

Insert a chart applet with the following parameters:

</APPLET>

Next, add a Button titled “Show Me The Trend!” Add the following HTML:

<form>

</form>

The onClick parameter for the button references the name of a script that we will build as shown below.

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 new PopUpTrend.htm page might look like the following:

</APPLET>

The key to the linking of the two windows is the {SelectedTag} reference. By putting the session variable created in the other window within curly brackets {} we can reference the variable's value in the new window. You can see how the {SelectedTag} reference is used for two parameters, PARAM NAME=TagName.1 and PARAM NAME=Title.