Download as pdf or txt
Download as pdf or txt
You are on page 1of 216

SAP xMII Training Labs

Table of Contents
Lab 1 Creating a Web Page .................................................................. 3
Lab 2 Images and Image Maps ............................................................. 11
Lab 3 Tables .................................................................................. 17
Lab 4 Frames ................................................................................. 21
Lab 5 Forms ................................................................................... 25
Lab 6 Style Sheets ........................................................................... 35
Lab 7 SAP xMII Installation Guide ......................................................... 39
Lab 8 Getting Connected ................................................................... 69
Lab 9a Building Queries Using the Template Editor .................................. 75
Lab 9b Building Displays Using the Template Editor.................................. 91
Lab 9c Using the Dynamic Page Generator ............................................ 119
Lab 10a Web Page Design ................................................................. 123
Lab 10b Web Page Design (on your own) .............................................. 127
Lab 11a Scripting with xMII ............................................................... 129
Lab 11b More Scripting with xMII ........................................................ 137
Lab 11c Still More Scripting with xMII .................................................. 143
Lab 12a Personalization - Setting Up Roles ........................................... 147
Lab 12b Personalization - Setting Up Users ........................................... 149
Lab 12c Personalization Assign Users to Roles...................................... 151
Lab 13 Editing the Style Sheets .......................................................... 153
Lab 14 Security.............................................................................. 155
Lab 15 Personalization Navigation Editor............................................ 157
Lab 16 Data Manipulation / Inline Transform ......................................... 163
Lab 17 xMII Reports ........................................................................ 171
Lab 18 iCommand........................................................................... 181
2006 SAP Americas.
All Rights Reserved.
These materials may not be reproduced without the express
written permission of SAP.

2006 SAP Americas. All Rights Reserved.

Page 1

SAP xMII Training


Rev 08/06

2006 SAP Americas.


All Rights Reserved.
These materials may not be reproduced without the express
written permission of SAP Americas.

2006 SAP Americas. All Rights Reserved.

Page 2

SAP xMII Training

Lab 1 Creating a Web Page


Purpose
This lab provides the student an introduction to some basic web page design
concepts. Students will use Microsoft FrontPage 2003 to create web page content
and edit the properties of each.

Topics Covered
This lab will cover

Page (Document) Sections

HTML Tag Syntax

Changing Properties (font types/colors, background colors, etc.)

Procedure
1. Start Microsoft FrontPage the instructor will be able to guide you to its
location on the training computer.
2. Well begin by creating a template page that well use for creating additional
pages. Templates allow you to maintain the consistency of web pages on a web
site. If a new page isnt already opened, from the icon bar menu, select the
new page icon.

2006 SAP Americas. All Rights Reserved.

Page 3

SAP xMII Training


FrontPage should look like this:

3. Click on File and choose Open Site.


4. In the Site Name text box enter \\<servername>\Training (check with the
trainer for the <servername>).
5. Create a folder to save all the webpages that you create.

2006 SAP Americas. All Rights Reserved.

Page 4

SAP xMII Training

6. You should note 4 tabs at the bottom of your new page labeled Design,
Split, Code and Preview. Select the Code tab and review the code that
was entered by FrontPage.
Notice the HTML tags prefixed with the <meta> tag. The page editor inserted
these entries into the page source. Since they are contained in the header
section of the page between the <head> and </head> tags, this information is
not actually displayed on the page. <meta> tags contain information regarding
the web editing software, language, and web site theme that are applied to the
web page.
The text in between the <title> and </title> tags makes up a string that is
displayed at the top of the clients web browser. We will customize the title on
every new page that we create in this Lab. Enter an interesting title for your
template page.

2006 SAP Americas. All Rights Reserved.

Page 5

SAP xMII Training


7. Since we will be using this page as a template for the other pages we will
create, we will define the properties (e.g. fonts, colors, etc.) that we want. In
the<body> tag:
- Add a background color to the page by including the bgcolor parameter.
- Setup the font properties for the text within the body of the page by adding
the <font> tag with the parameters (face, color, size) you want. Dont forget
the closing </font> tag.

2006 SAP Americas. All Rights Reserved.

Page 6

SAP xMII Training


8. Switch back to the Design tab and view the effects of the changes to your web
page.

9. Now right-click on the page (in Normal view). In the pop-up window, select
Page Properties This will allow you to set some more document defaults
within the Template page. Review the tabs and the properties in each. You
will note the Page Properties is an easy place to change the title, background
color, fonts, etc.

2006 SAP Americas. All Rights Reserved.

Page 7

SAP xMII Training

10. Lets save this as our template page. From the File menu, select Save As and
enter a File name: BasePage.htm. Save all work in the Training folder that
you created.

**Note: To view our BasePage.htm, open the browser (Internet Explorer) and type:
http://<servername>/training/<yourfolder>/BasePage.htm

2006 SAP Americas. All Rights Reserved.

Page 8

SAP xMII Training

11. Now lets create our other web pages from the BasePage.htm template. Well
start with a page that will be the header for our web site. Modify the
BasePage.htm by changing the text (example: My SAP xMII Page), background
color, fonts, etc. Use your imagination. When you are done making your
changes to the header page, Save As Header.htm.

HINT:

When saving the page, use the Change title button to modify the Page title.

12. Repeat the above step to create additional pages for the Table of Contents
(TOC.htm) and two new base pages (Page1.htm and Page2.htm).

2006 SAP Americas. All Rights Reserved.

Page 9

SAP xMII Training

2006 SAP Americas. All Rights Reserved.

Page 10

SAP xMII Training

Lab 2 Images and Image Maps


Purpose
This lab will introduce the student to the basics of adding web graphics to a web
page. We will investigate images (graphics) and image maps (hotspots or hyperlink
regions) that can be used as part of a web site navigation system.

Topics Covered
This lab will cover

Adding web images or graphics

Image pathing and sizing

Creating / Editing Image Maps

Procedure
1. Well begin by inserting a graphic divider to separate the web pages header
information from the rest of the page. Open the Header.htm page and place
the cursor at the bottom of the page. From the Insert menu, select the
Picture\Clip Art option. Select Go to view the clip art currently installed on
your server.

2006 SAP Americas. All Rights Reserved.

Page 11

SAP xMII Training


2. Search through the available border clipart images and find one that you like.
Click on the image and select Insert to add it into your web page document.

3. Switch to the CODE tab and note the syntax of the <image> tag we just added.
You should see something similar to the following
<img border="0"
src="../../../Documents%20and%20Settings/I808636/Local%20
Settings/Temporary%20Internet%20Files/FrontPageTempDir/j0
157995.wmf" width="480" height="28">
The src parameter contains the image file path. Because we have not yet
saved our page, the image file is currently stored in a temporary file location.
When we save the page, you will be prompted to specify another file storage
location. We will save the file and note the new image later in this lab.
You should also note the height and width parameters. By default, these
parameters are set in pixels, resulting in a fixed image size, however they can
also be set as a percentage of the page, resulting in an image size relative to
the size of the page.
4. Modify the width parameter of your image to 90%. To see the effect of the
new setting, switch to the Preview tab and resize the width of your web page.
As you resize you should see the width of the image scale with the page. This
functionality is useful when developing sites for multiple resolutions.

2006 SAP Americas. All Rights Reserved.

Page 12

SAP xMII Training

5. Now Save the Header.htm page. You will be prompted to save the embedded
image to a location on the server. The location where you save the file will
determine the final path setting for the image (ie: src parameter). The image
path is saved relative to the source HTML page.

Example 1:
If you save the image in the same folder as the HTML page, the image tag
should look like this
<img border="0" src="j157996.gif" width="90%"
height="30">
Since the image file is in the same folder as the HTML page, no additional path
information is required in the src parameter.

2006 SAP Americas. All Rights Reserved.

Page 13

SAP xMII Training

Example 2:
If you chose to store the image file in an alternate location, the image tag
should look something like this
<img border="0" src="../images/ j157996.gif" width="90%"
height="30">
Since the image file in this example was not stored in the same location as the
HTML page, additional path information was included in the src parameter.
The path defines the location of the image file relative to the HTML page. In
this example, the image file named j157996.gif is stored up one folder level
(represented by ..) from the Header.htm page, in the /images folder.
6. Next were going to add another image that we will use to navigate our web
site. Open the TOC.htm page. From the Insert menu, select Picture\From
File., navigate to the Training folder and select the LinkMenu.gif file. Click
OK.

7. Well add a few hotspots or hyperlink regions to the LinkMenu image for
navigation. To do this, select the LinkMenu image. From the View menu, select
Toolbars\Pictures to display the Picture Toolbar

Hotspot
Tools

2006 SAP Americas. All Rights Reserved.

Page 14

SAP xMII Training


8. Select the Rectangular Hotspot tool and draw a rectangle around the Link 1
text on the LinkMenu image. After drawing the rectangle, a dialog box will
popup allowing you to enter a Hyperlink URL. Select the Page1.htm file from
your training folder that you created earlier and click OK.

9. Switch to the Code tab and review the <img> and the <map> tags. You should
see something that looks like this
<map name="FPMap0">
<area href="Page1.htm" shape="rect" coords="10, 36, 88,
62">
</map>
<img border="0" src="../images/LinkMenu.gif"
usemap="#FPMap0" width="100" height="130">
The map tag can contain several area tags. The area tags contain the actual
hotspot link information. The area tag includes parameters for the linked page
(href), the shape of the hotspot, and the coordinates (cords) for the
hotspot touch region. The coordinates are defined in X1, Y1, X2, Y2 sequence
and use the top left corner of the image as the origin.
The <img> tag was also updated to include a new usemap parameter that
references the <map> tag that was just created.

2006 SAP Americas. All Rights Reserved.

Page 15

SAP xMII Training

10. Switch back to Normal view and add another rectangular hotspot region
around Link 2. Create a hyperlink to Page2.htm. In the HTML view, you
should note a new area tag has been added after the existing area tag, but
before the </map> tag. The final HTML code should look something like this
<map name="FPMap0">
<area href="Page1.htm" shape="rect" coords="10, 36, 88,
62">
<area href="Page2.htm" shape="rect" coords="10, 65, 88,
91">
</map>
<img border="0" src="../images/LinkMenu.gif"
usemap="#FPMap0" width="100" height="130">
Save your TOC.htm page.
11. Open Page1.htm and enter any information that you want to be shown.
Experiment with the formatting tools located on the toolbars.
12. Open Page2.htm and enter information regarding the author of the web site,
credits to the instructor, etc

2006 SAP Americas. All Rights Reserved.

Page 16

SAP xMII Training

Lab 3 Tables
Purpose
Tables can be used to organize the layout of web pages. In this lab the student will
learn how to add tables and become familiar with defining spacing, borders,
background images, and hyper-linking cells.

Topics Covered
This lab will cover the following topics

Table creation

Cell text justification

Table/Cell backgrounds

Hyper-Linking cells

Procedure
1. Open the Header.htm page and switch to the Normal view.

2. First, well create a table that well use for organizing the text in our title.
Place the cursor in front of the title information on the page. From the Table
menu, select Insert\Table

2006 SAP Americas. All Rights Reserved.

Page 17

SAP xMII Training


3. Create a 1 row by 2 column table and click OK to insert the table and close the
dialog. The page should look similar to the following

Switching to the Code tab, you will see the <table> tag can contain many
<tr>(table row) and <td> (table data) tags. The number of <tr> </tr> pairs
determine the number of rows in the table and the number of <td> </td>
pairs determine the number of columns in the row.
The information between the <td> and the </td> tags defines the cell
contents. By default, FrontPage inserts &nbsp; as a placeholder for the cell
data.
4. Switch back to the Design view to modify the cell contents. Highlight and cut
the title text on your page, then paste it in the first cell of the table. Add
some additional text in the second cell.

2006 SAP Americas. All Rights Reserved.

Page 18

SAP xMII Training

5. You can change the settings of the entire table or of each individual cell by
right-clicking and selecting either Table Properties or Cell Properties from
the popup menu. This will display the dialog box

HINT: Setting the Border Size to 0 will eliminate the appearance of the
border so only the text will be displayed in the browser.

6. Open Page1.htm and add a 1-row x 2-column table at the top of the page. In
the left cell, type the text To TOC. In the right cell type the text To Page
2.
2006 SAP Americas. All Rights Reserved.

Page 19

SAP xMII Training


7. Next, well create hyperlinks to both the TOC.htm and Page2.htm page. To
create the hyperlink, highlight the appropriate text in the cell. From the Insert
menu, select Hyperlink to display the hyperlink dialog box, and then select
the appropriate page you wish to hyperlink to. Click OK to complete.

8. Open up Page2.htm and repeat the table creation and hyperlink procedure
(make sure you change the text in the right cell to To Page 1).
**Hint: To change hyperlink color: from File menu choose properties, then choose
the Background tab.

2006 SAP Americas. All Rights Reserved.

Page 20

SAP xMII Training


Lab 4 Frames
Purpose
The student will explore the use of Frames in a web page. Frames can be used to
organize the layout of your web site. A Frames page divides the browser window
into different sections (e.g. frames), each of which can display its own page. We
will create the Home page for the web site.

Topics Covered
This lab will cover the following topics

Creating a Frames page

Frame syntax

Creating Hyperlinks to target frames

Procedure
1. First well create the Frames page. From the File menu, select New > Page.
to open the New page dialog box. Select the More page templates option, then
Frames Pages tab (note the variety of templates you can choose from). Click
on the Banner and Contents page and then click OK to create the new Frames
page.

2006 SAP Americas. All Rights Reserved.

Page 21

SAP xMII Training


Your new page should look like this

2. Next well need to Set Initial Page for each frame section. In the Banner
Frame (top section), click the Set Initial Page button and set the page to the
Header.htm webpage from your training folder.
NOTE: The full path to the page will be shown in the URL. This will be adjusted when the
page is saved much like the image file path.

2006 SAP Americas. All Rights Reserved.

Page 22

SAP xMII Training


3. Repeat this step to set the Contents Frame (left frame) initial page to TOC.htm
and the Target Frame (right frame) initial page to Page1.htm.
After setting the initial pages, the page should look something like this

4. Before we save our file, lets review the HTML code generated for the frames
pages. Switch to the Frames Page Code tab. It should look like this
<frameset rows="107,*">
<frame name="banner" scrolling="no" noresize
target="contents"
src="file:///C:/Inetpub/wwwroot/Training/Header.htm">
<frameset cols="174,*">
<frame name="contents" target="main"
src="file:///C:/Inetpub/wwwroot/Training/TOC.htm"
scrolling="no" noresize>
<frame name="main"
src="file:///C:/Inetpub/wwwroot/Training/Page1.htm">
</frameset>
<noframes>
<body>
<p>This page uses frames, but your browser doesn't
support them.</p>
</body>
</noframes>
</frameset>
Note the frame name and target parameter values. These will be important
when creating hyperlinks.

2006 SAP Americas. All Rights Reserved.

Page 23

SAP xMII Training


5. Now we can save the page as Main.htm in the your training folder.
6. Switch back to the Frames Page HTML view and note the modified paths to the
initial HTML pages (defined in the src parameter).
<frameset rows="107,*">
<frame name="banner" scrolling="no" noresize
target="contents" src="Header.htm">
<frameset cols="174,*">
<frame name="contents" target="main" src="TOC.htm"
scrolling="no" noresize>
<frame name="main" src="Page1.htm">
</frameset>
<noframes>
<body>
<p>This page uses frames, but your browser doesn't
support them.</p>
</body>
</noframes>
</frameset>

2006 SAP Americas. All Rights Reserved.

Page 24

SAP xMII Training


Lab 5 Forms
Purpose
The purpose of this lab is to introduce the basics of gathering information from a
Form and submitting the data to a server.

Topics Covered
This lab will cover the following topics

Html Forms

Html Form Elements

Basic JAVA Applets

Referencing objects on the web page

Gather information from a user and submitting it to the web server.

Procedure
1. Create a new page using the File/New Page select a normal page and save it
as OrderEntry.htm.
2. Using the Front Page tools, we will build an Order Entry screen that will
ultimately look like this:

2006 SAP Americas. All Rights Reserved.

Page 25

SAP xMII Training


Insert a form on the new web page.

Right click on the form, choose Form Properties and set the following properties.

To align the elements on the form we will create a table 9 rows x 2 columns:
(insert this table within the form, after the buttons).

2006 SAP Americas. All Rights Reserved.

Page 26

SAP xMII Training

Begin building the Order Entry screen by entering the static text descriptions
outlined above in the appropriate cells of the table that was just created.

Order entry Lab Example

Order Date

Description

Quantity

Ship From

Horsham (Next to Radio button)

Exton (Next to Radio button)

2006 SAP Americas. All Rights Reserved.

Page 27

SAP xMII Training


Using the FrontPage Insert Menu we will add the following Html elements to the
form.

One Submit and one Reset Push Button should have been created when the
form was inserted.
Submit Button (Push Button)
Select (click) and drag the Submit button to the appropriate cell.
Double click the Submit button and configure the Push Button Properties as
follows...

Reset Button (Push Button)


The Reset Push Button is not used for this example. Single click it and press the
delete key.

2006 SAP Americas. All Rights Reserved.

Page 28

SAP xMII Training


Select Element (Drop-Down Menu)
Insert one Select Element Insert/Form/Drop-Down Menu
Double click the Select Element and configure these Drop-Down Menu
Properties.

Text Element (One-Line Text Box)


Insert a One-Line Text Box Insert/Form/ One-Line Text Box
Double click the Text Element and configure these Text Box Properties...

2006 SAP Americas. All Rights Reserved.

Page 29

SAP xMII Training


Radio Element (Radio Button)
Insert (2) two Radio Elements Insert/Form/ Radio Button
Double click each Radio Element and configure these Radio Button Properties...

Text Area Element (Scrolling Text Box)


Insert (1) one Text Area Element Insert/Form/Scrolling Text Box
Double click the Text Area Element and configure these Scrolling Text Box
Properties...

2006 SAP Americas. All Rights Reserved.

Page 30

SAP xMII Training

iCalendar
The calendar control we will build into the page is a Java applet provided with
CMS.
To add the iCalendar applet, go to the Normal view and select the cell in the table
where you want to put the calendar. Switch to the HTML view and add the
following applet tag into the source code.
<applet NAME="Calendar" code="iCalendar.class"
codebase="/Illuminator/classes/" archive="illum8.zip"
height="192" width="192" align="left">
</applet>
(Note: Java is case sensitive)
Save the OrderEntry.htm file in your training folder, and test.

2006 SAP Americas. All Rights Reserved.

Page 31

SAP xMII Training

Sample: HTML Generated


<html>
<head>
<meta http-equiv="Content-Language" content="en-us">
<meta name="GENERATOR" content="Microsoft FrontPage 5.0">
<meta name="ProgId" content="FrontPage.Editor.Document">
<meta http-equiv="Content-Type" content="text/html; charset=windows-1252">
<title>New Page 1</title>
</head>
<body>
<form method="POST" name="F1" target="_blank" action="--WEBBOT-SELF--">
<!--webbot bot="SaveResults" U-File="../_private/form_results.txt" SFormat="HTML/BR" S-Label-Fields="TRUE" B-Reverse-Chronology="FALSE" S-BuiltinFields -->
<table border="0" cellpadding="0" cellspacing="0" style="border-collapse: collapse"
bordercolor="#111111" width="63%" id="AutoNumber1">
<tr>
<td width="100%" colspan="2">Order Entry Lab Example</td>
</tr>
<tr>
<td width="21%">Order Date</td>
<td width="79%"><applet NAME="Calendar" code="iCalendar.class"
codebase="/Illuminator/classes/" archive="illum8.zip" height="192" width="192"
align="left">
</applet>
</td>
</tr>
<tr>
<td width="21%">Description</td>
<td width="79%"><select size="1" name="D1">
<option selected>Product A</option>
<option>Product B</option>
<option>Product C</option>
<option>Product D</option>
</select></td>
</tr>
<tr>
2006 SAP Americas. All Rights Reserved.

Page 32

SAP xMII Training


<td width="21%">Price</td>
<td width="79%">
<input type="text" name="Quantity" size="20" value="0" tabindex="3"></td>
</tr>
<tr>
<td width="21%">Ship From</td>
<td width="79%">
<input type="radio" value="Horsham" checked name="Ship_from"
tabindex="4">Horsham</td>
</tr>
<tr>
<td width="21%">&nbsp;</td>
<td width="79%">
<input type="radio" name="Ship_from" value="Exton" tabindex="5">Exton</td>
</tr>
<tr>
<td width="21%">&nbsp;</td>
<td width="79%">&nbsp;</td>
</tr>
<tr>
<td width="21%">&nbsp;</td>
<td width="79%"><textarea rows="2" name="Comments" cols="45"
tabindex="6">Enter Comments Here</textarea></td>
</tr>
<tr>
<td width="21%">&nbsp;</td>
<td width="79%"><input type="submit" value="Submit" name="B1"></td>
</tr>
</table>
<p>&nbsp;</p>
</form>
</body>
</html>

2006 SAP Americas. All Rights Reserved.

Page 33

SAP xMII Training

2006 SAP Americas. All Rights Reserved.

Page 34

SAP xMII Training

Lab 6 Style Sheets


Purpose
The student is introduced to the basics of applying Style Sheets to a web page. We
will modify the OrderEntry.htm page font size and color by applying a basic style
sheet.

Topics Covered
This lab will cover the following topics

Creating a new style sheet

Reviewing style sheet HTML tags (<p> and <style>)

Linking a style sheet to a HTML page

Applying style sheet classes in an HTML page

Procedure
1. First, well create a new style sheet. From the File menu, select New In the
popup toolbar choose More page templates, go to the Style Sheet tab, select
the Normal Style Sheet template, and select OK.

2006 SAP Americas. All Rights Reserved.

Page 35

SAP xMII Training


Next, well add a <style> tag to define the font information. Add the following
<style> tag and {classes} to the new style sheet. Type code right on the page.
<style>
p
{font face="BankGothic Md BT"}
p.blue {font face="BankGothic Md BT"; font-size:10pt; color="#0000FF"; font
style="bold"}
p.red
{font face="Verdana"; font-size:15pt; color="#800000"; font style="bold"}
p.ucase {font face="BankGothic Md BT";text-transform:uppercase}
</style>

Save the page as style.css in the /Training/<yourfolder>


folder on your web server, and then close the file.
2. Now we can link a page to the newly created style sheet and
apply the styles to our text. Open the OrderEntry.htm we
created in the previous lab. From the Format menu, select
Style Sheet Links...

2006 SAP Americas. All Rights Reserved.

Page 36

SAP xMII Training


In the Link Style Sheet window, click the Add button and select style.css from
your training folder. Click OK.

3. To apply the style sheet classes, highlight the Order Entry Lab Example text
in the OrderEntry.htm page. From the drop-down menu on the FrontPage
toolbar, set the class to Normal.red. You should notice that the text color did
not change. That is because we are still in Normal view. Go to the Preview
tab to view the color change.

Continue to apply the classes to the other text on the page as follows

2006 SAP Americas. All Rights Reserved.

Page 37

SAP xMII Training

Text

Class

Order Date

Normal.Blue

Description

Normal.Blue

Quantity

Normal.Blue

Ship From

Normal.Blue

Horsham

Normal.ucase

Exton

Normal.ucase

4. Lets review the new HTML code in our page. You will note a link to the style
sheet was added to the heading of OrderEntry.htm similar to this
<link rel="stylesheet" type="text/css" href="style.css">

You should also note how the <p> tags for the text have
been modified to reflect the classes we applied
<p class="blue"> Order Date

5. Additional Resources for changing or embedding different font styles


within a web page can be found at :
www.microsoft.com/typography/web/embedding/weft

The syntax for embedding fonts into a web-browser would look


something like this
@font-face{font-family:Nueva Roman; src:url(nuevar).eot)}

2006 SAP Americas. All Rights Reserved.

Page 38

SAP xMII Training

Lab 7 SAP xMII Installation Guide


Introduction
One of the key benefits of the SAP xApp Manufacturing Integration and
Intelligence (SAP xMII) is its ultra-thin client architecture that requires
zero client administration. SAP xMII clients require a standard Web
browser only which minimizes installation and management. No SAP xMII
software needs to be installed on any of the client systems. Setup and
installation of SAP xMII is performed entirely on your Web server. The
client browser does require that a Java Runtime Environment (JRE) plugin to be installed in order to use the full set of user interface objects. The
supported JRE for a client machine is version 1.4.2 from Sun
Microsystems, Inc. (the latest release of 1.4.2 is recommended for the
client).
Note: It is not recommended that the server application be
installed on a server with a JSDK/JRE version greater than
1.4.2_07.
This SAP xMII installation is optimized to support Microsoft Internet
Information Services (IIS) on Microsoft Windows 2003; however,
Microsoft Windows 2000 Server may also be used. Support for any nonWindows platforms and/or support for any servlet engine other than that
supplied with the product requires special licensing arrangements. There
is no end user support for these other platforms.
SPC data analysis requires a database to be installed and configured. The
recommended configuration is to install Microsoft SQL Server directly on
the Web server.
Note: You do not need a database if you are not using SPC data
analysis. The core SAP xMII functionality stores its
configuration data in operating system files.
The SPC data analysis option benefits from a high performance CPU.
SAP xMII includes an add-in for Microsoft FrontPage and one for Macromedia
Dreamweaver that enables the use of these tools as a unified development
environment for your SAP xMII application. Refer to the Installing the FrontPage
Add-In section of this topic for more information. If you are using Macromedia
Dreamweaver, refer to the Installing the Dreamweaver Add-In section of this
topic for more information.

2006 SAP Americas. All Rights Reserved.

Page 39

SAP xMII Training


System Requirements
Prior to installing SAP xMII, you must ensure that your server meets the following minimum
requirements:
For 1For 11-100
10
Concurrent Concurrent Users

For 101-500
Concurrent Users

For 501+
Concurrent Users

Processor

1.8 GHz or faster

1.8 GHz or faster;


dual processor
recommended

dual processor, 1.8


GHz or faster

dual processor, 1.8


GHz or faster

RAM

See Web Server


Documentation

See Web Server


Documentation

See Web Server


Documentation

See Web Server


Documentation

(512 MB minimum
recommended)

(1024 MB minimum (4096 MBytes


minimum
recommended)
recommended)

(8192 MBytes
minimum
recommended)

Windows 2003
Server

Windows 2003
Server

Windows 2003
Server

Windows 2003
Server

-or-

-or-

-or-

-or-

Windows 2000
Professional with
Service Pack 4 or
greater

Windows 2000
Windows 2000
Windows 2000
Server with Service Server with Service Server with Service
Pack 4 or greater
Pack 4 or greater
Pack 4 or greater

IIS 6.x or 5.x

IIS 6.x or 5.x

Users

Operating System

Web Server
Software

IIS 6.x or 5.x

IIS 6.x or 5.x

Java Virtual Machine Sun JSDK 1.4.2_07

Sun JSDK 1.4.2_07 Sun JSDK 1.4.2_07 Sun JSDK 1.4.2_07

File System

NTFS

NTFS

NTFS

NTFS

The required system resources vary based on your applications; however, for sizing purposes, an
estimated 2-4 MB per simultaneously connected user can be used.
Virtually any Web browser, including Microsoft Internet Explorer, Netscape Navigator, Netscape
Communicator, Opera, and Mozilla Firefox, can be used with SAP xMII. We recommend that you
use the most recent versions of these products. As stated above, the client should have the Sun JRE
plug-in installed to the browser.
The Sun Java Runtime Environment (JRE) must be installed on the server prior to the SAP xMII
installation (It is recommended that you download and install the full JSDK, instructions can be found
below).
Note: Turn off the Java automatic update mechanism via the Java Plug-in Control Panel.
It is strongly recommended, although not required by SAP xMII, that the local volume where you are
installing SAP xMII be formatted with the NTFS file system. This will enable a high degree of security
control over your Web page content via direct integration with the Windows NT or Windows 2000 and
IIS security and authentication subsystems.
If you will be using the SAP xMII FrontPage add-in, you must be running Microsoft FrontPage 2000
and must have the FrontPage 2000 server extensions installed on your Web server. Refer to the
FrontPage section for detailed instructions on how to install these products.

2006 SAP Americas. All Rights Reserved.

Page 40

SAP xMII Training


System Installation Prerequisites
You will need to obtain a license file in order to run SAP xMII. You may
request a license file at http://support.lighthammer.com, or through
support@lighthammer.com. See the license manager section of the help
for more information.
The Sun JSDK 1.4.2_07 must also be downloaded and installed on the
server prior to installing SAP xMII. You can download the JSDK directly
from
http://java.sun.com/products/archive/j2se/1.4.2_07/index.html. Press on
the "Download J2SDK" link on this page, save it to disk, and install the
JSDK. A link to this site is also available on the xMIIInstall.htm on the
root directory of the installation media (see below step by step
instructions for more information).

Windows NT
You must install a Web server prior to installing SAP xMII. Microsoft Web
Server 4.0 is available as a free add-on to Windows NT Server or
Workstation as part of the Windows NT 4.0 Option Pack. You can
download the option pack or get it on CD-ROM from your local Microsoft
reseller. If you are installing SAP xMII on an Windows NT Server system,
you will install IIS 4.0. If you are installing SAP xMII on a Windows NT
Workstation machine, you will install Personal Web Server (PWS) 4.0.
Detailed information on installing IIS is provided with the Windows NT
Option Pack. During the NT Option Pack installation it is important to
select the Custom installation option and verify that the following
components are selected for install:

Internet Information Server (IIS)

Internet Service Manager

If you will be using ODBC data sources, it is suggested that you obtain the
latest Microsoft Data Access Components from the Microsoft Data Access
Web site and install them on your Web server. Note that these are not
required to access Microsoft SQL Server or Oracle, as SAP xMII will install
direct, high-performance drivers for these databases.
If you are running Windows NT 4.0 and Internet Explorer 4.x on your Web
server, it is recommended that you update certain system files before
installing SAP xMII. It is advised that you run a Windows Update and
install all recommended updates before proceeding.
Note: Installation of IIS may cause the removal or overwrite
of some of the Windows NT Service Pack
components. It is recommended that you reinstall
Service Pack 6a or greater on NT systems, prior to
proceeding to the installation of the SAP xMII
application.
2006 SAP Americas. All Rights Reserved.

Page 41

SAP xMII Training


Windows 2000
If you are installing SAP xMII on an MS Windows 2000 Server system,
you will install IIS 5.0. If you are installing SAP xMII on an MS Windows
2000 Professional system, then you will install Personal Web Server
(PWS) version 5.0. Microsoft Windows 2000 will typically install the IIS
5.0 components you will need to run SAP xMII.
The Microsoft Web servers for Windows 2000 systems are available as
part of the installation process of the operating system. If you already
have the operating system installed, without the Web server, you may run
the additional setup required by choosing "Add/Remove Windows
Components" after starting the Add/Remove Programs service available
within Control Panel (Internet Information Services (IIS) is the required
component).
If you will be using ODBC data sources, it is suggested that you obtain the
latest Microsoft Data Access Components from the Microsoft Data Access
Web site and install them on your Web server. Note that these are not
required to access Microsoft SQL Server or Oracle, as SAP xMII will install
direct, high-performance drivers for these databases.
Note: Installation of IIS may overwrite or cause the removal
of some of the Windows 2000 service pack
components. It is recommended that you reinstall
Service Pack 4 or greater on Windows 2000 systems,
prior to proceeding to the installation of the SAP xMII
application.

Windows 2003
By default, Windows 2003 Server has certain locked capabilities that must
be changed after SAP xMII installation in order for SAP xMII to run. You
must create a virtual directory in IIS with the proper privileges so that the
servlet engine will run. Complete the Additional Steps for Windows 2003
section after the Step-by-step Installation.

Windows XP Professional
Microsoft Windows XP Professional is not a supported server platform for
production environments. It should be used for demonstrations and
limited evaluations only.
If you are installing SAP xMII on a Microsoft Windows XP Professional
system, you will install IIS 5.1. IIS is not installed by default with the
operating system. You will have to go to the Add/Remove Windows
Components section and choose to install it. Select the World Wide Web
Service and press Details, then check the Scripts Virtual Directory.

2006 SAP Americas. All Rights Reserved.

Page 42

SAP xMII Training

When installing IIS, you MUST do a custom install and choose to


install the Scripts Virtual Directory. Without this virtual directory
SAP xMII WILL NOT run. Additionally, if you have installed any
Windows XP Service Packs, it will be necessary to reinstall them
after adding IIS.

If you are using SQL Server 2000, you should have Windows XP
service pack 2 and SQL Server 2000 service pack 3 installed.

Step-by-step Installation
Note: If an error occurs during the install, please review the install
logs for more information.

1. Make sure you are logged on to the server machine with an


Administrator account.
2. If you are running Windows NT, stop the Web server and IIS via the
Control Panel's Services applet.
If you are running Windows 2000 or Windows 2003, stop the Web
server and IIS via Start | Programs | Administrative Tools |
Services by stopping the IIS Admin Service.
This process automatically stops dependent services such as the
World Wide Web Publishing service, FTP service, and SMTP service.
3. If you have physical CD media, insert the SAP xMII CD into your
CD-ROM drive. Auto-run opens the SAP xMII Installation page in
your default browser. If you downloaded the software from the
SAP Service Marketplace, extract the downloaded archive to a local
directory and then open the xMIIInstall.htm page in the chosen
directory.
Note: If you are using physical media and auto-run fails, you can
open the xMIIInstall.htm page from the CD root to install SAP
xMII. A link to the Sun Java 2 SDK installation is also available
on this page if you did not yet download and install it. Once the
JSDK is installed, you can run SETUP.EXE directly from the
install folder.

2006 SAP Americas. All Rights Reserved.

Page 43

SAP xMII Training


4. If you already installed the Sun JSDK 1.4.2_07 on the server,
continue to step 5.
OR
If the Sun JSDK 1.4.2_07 is not installed, download the JSDK
directly from
http://java.sun.com/products/archive/j2se/1.4.2_07/index.html. Cl
ick the "Download J2SDK" link, save the file to disk, and run the
setup from the local disk.
OR
If a prior version of the Sun JDK or JRE is installed, uninstall the
JDK/JRE and all references to Sun Java products including the
following:

Java 2 Runtime Environment (JRE)

Java 2 Software Development Kit (SDK)

Residual folders and files under the root directory (i.e.,


C:\jdk1.3.1_01) or under \Program Files\Java

Registry entries (via Start | Run, enter Regedit in the Open


field, select HKEY_LOCAL_MACHINE\SOFTWARE, and delete
the JavaSoft folder and all its sub-directories)

Then install the Sun JSDK 1.4.2_07.


5. Select the SAP xMII 11.5 installation link. The InstallShield Wizard
for SAP xMII window appears. If you did not stop the IIS Admin
service, the following window appears. Click the Yes button to stop
the service. Click the No button to exit the install.

To continue, click the Next button. You may click the Cancel button
at any time during the process in order to stop the installation.
6. The License Agreement window appears. Please read the license
agreement carefully.
If you accept the license agreement, click the Yes button to
continue the SAP xMII installation.
OR
If you do not accept the license agreement, click the No button. The
setup stops and InstallShield Wizard closes.

2006 SAP Americas. All Rights Reserved.

Page 44

SAP xMII Training


7. The Choose Destination Location window appears and prompts you
to select a destination folder where the setup will install the SAP
xMII application. The default destination folder is usually
acceptable, although it is recommended that you install the
Lighthammer directory to the same drive on which you installed
IIS. The Lighthammer directory should be installed on the root of
the drive you select. You should not install it at locations such as
Program Files, etc. Click the Next button to continue the
installation.

2006 SAP Americas. All Rights Reserved.

Page 45

SAP xMII Training


8. Another window appears and prompts you to choose a destination
location for the Web root directory for the Web server. The default
location for Microsoft IIS is C:\InetPub\wwwroot and is usually
acceptable. If you moved your default Web root, indicate it here.
Click the Next button to continue the installation.

9. If you are upgrading from a version prior to version 11.0, the


following window appears. Click the Yes button to continue the
installation as an upgrade. Click the No button to exit the
installation. If you are not upgrading a version prior to 11.0, skip to
step 10.

2006 SAP Americas. All Rights Reserved.

Page 46

SAP xMII Training


10.Confirm the location of your Illuminator directory. The correct
location should default.

11.If your previous version was installed with the ServletExec ISAPI
filter, it must be uninstalled in order to continue with your current
installation. To correctly uninstall the ISAPI filter, the SAP xMII
install must reinstall the ISAPI filter. Follow the ISAPI filter install
instructions and accept all defaults. If your previous install did not
include the ISAPI filter, you may skip to step 13.

2006 SAP Americas. All Rights Reserved.

Page 47

SAP xMII Training


12.Once the ISAPI install completes, you must uninstall it. Click the OK
button to uninstall the ISAPI filter.

Click Yes to uninstall ServletExec ISAPI

Click the Yes button to stop the IIS Admin service.


Click the Yes button to delete the ServletExec ISAPI install
directory.

After the ISAPI uninstall is complete, install ServletExec Application


Server.
13.A window appears noting that the ServletExec Application Server
(AS) install is about to be launched. Please make special note of
the instructions on this dialog before proceeding with the AS
installation.

2006 SAP Americas. All Rights Reserved.

Page 48

SAP xMII Training


14.Select the AS instance option button when you are asked what type
of installation you wish to perform.

2006 SAP Americas. All Rights Reserved.

Page 49

SAP xMII Training


15.Select a folder for the Application Server installation. It is
suggested that you install to the same root drive that you chose for
SAP xMII. Click the Browse button, and enter the
following: <DRIVE_LETTER>:\ServletExec AS. See below.

2006 SAP Americas. All Rights Reserved.

Page 50

SAP xMII Training


16.When the AS install is launched, you are asked to select an AS
instance name for SAP xMII. Type "LHCMS" over the default name.

2006 SAP Americas. All Rights Reserved.

Page 51

SAP xMII Training


17.Choose IIS as the Web server.

2006 SAP Americas. All Rights Reserved.

Page 52

SAP xMII Training


18.If the Scripts Virtual Directory does not exist, the following window
appears.

19.Enter a port number for the Application Server.


Note: This is an internal port only, and IIS will continue to run on
port 80. All SAP xMII content will still be accessed through port
80. In order for the application to operate properly, other
applications should not be using the port number you enter.

2006 SAP Americas. All Rights Reserved.

Page 53

SAP xMII Training

If you want to change this port number at a later time, see Changing
the Application Server Port Number.
After you confirm the selections you made above, you can select a
password for the ServletExec admin account or you can leave the
password blank. Then, click the Yes button to install ServletExec AS
as an NT service.

20.You do not need to view the ServletExec install log or the readme
file. When the ServletExec install is complete, it will open an
Explorer window. Close this window.

2006 SAP Americas. All Rights Reserved.

Page 54

SAP xMII Training


21.When the Servlet Exec AS installation is complete, the SAP xMII
installation asks for the AS installation location so that the SAP xMII
webapp files can be copied to the correct location. The file transfer
may take a few minutes. The default location should be the correct
location.

2006 SAP Americas. All Rights Reserved.

Page 55

SAP xMII Training


22.Select an option button for the amount of RAM that you wish to
designate to SAP xMII via ServletExec AS.

Note: Once the installation is complete and SAP xMII is operating


properly on ServletExec Application Server, it is no longer
necessary to restart IIS in order to restart the SAP xMII
application. Simply go to the Services console, and restart the
ServletExec-<InstanceName> service. That process will reload SAP
xMII.

2006 SAP Americas. All Rights Reserved.

Page 56

SAP xMII Training


23.Enter the fully qualified machine name (e.g.,
MACHINE_NAME.Domain.com) of the machine on which you are
installing SAP xMII. It is required to identify the location of the
security server in a multiple domain and/or third-party single signon scenario. If you are not implementing across domains or using
third-party single sign-on, the machine name (without the domain
name) is sufficient.

2006 SAP Americas. All Rights Reserved.

Page 57

SAP xMII Training


24.Enter the anonymous IIS user account (e.g., IUSR_Machine_Name)
of the machine on which you are installing SAP xMII. The
anonymous IIS user account is used to set permissions on SAP xMII
install directories.

The installation begins copying files and installing. If an error


occurs, the InstallShield stops and the setup does not continue.
25.If you are upgrading from a previous version, the following window
appears. Click the Yes button to run the 11.5 migration tool. The
migration tool upgrades your system configurations from your
previous version to the current. If you click No, you can run the
migration from the Start menu after the installation.

2006 SAP Americas. All Rights Reserved.

Page 58

SAP xMII Training


26.Click the OK button to run the system migration. When the
migration is complete, click the Cancel button to close the window.

27.If you are upgrading from a version prior to 11.0, the following
window appears. Click the Yes button to run the security migration.
The security migration does not have an interface like the system
migration. A DOS window appears; close it to run the security
migration. If you are upgrading from 11.0 or 11.0.1, the security
migration window does not appear since there is no migration from
those versions. If you choose not to run the security migration at
this time, you can run it from the Start menu.

2006 SAP Americas. All Rights Reserved.

Page 59

SAP xMII Training


28.If this is a new installation, once all files have been copied, the
following window appears. Click the OK button to choose a
template. If this is an upgrade, this step is skipped and your
existing default template styles remain.

2006 SAP Americas. All Rights Reserved.

Page 60

SAP xMII Training


29.After clicking the OK button, the three template style choices are
displayed. As the previous window notes, all three are installed on
your machine, but only one is used as the default template style.

Click Next to make your template selection.

2006 SAP Americas. All Rights Reserved.

Page 61

SAP xMII Training

30.The SAP xMII installation is complete. Click the Finish button to


close the InstallShield Wizard.
31.After the installation is complete but before using SAP xMII, stop
the IIS Admin Service and then restart the Web server. There are
two methods for stopping/starting the IIS Admin Service and World
Wide Web Publishing Service.
From the Start menu, select Programs | Lighthammer | Illuminator
and either the Stop IIS or Start IIS batch file options.
OR
In Windows NT, open the Windows Control Panel and select the
Services option, or in Windows 2000, choose Start | Programs |
Administrative Tools | Services. Highlight the IIS Admin and click
the Stop button to stop this service and all dependent services.
Then restart the World Wide Web Publishing Service (and any other
necessary Web services such as FTP or SMTP) which automatically
restarts the IIS Admin Service. In Windows 2000, all Web services
can also be managed through Start | Programs | Administrative
Tools | Internet Services Manager.
32.Before accessing SAP xMII you need to set up your license. To do
this, copy your lhcms.lic license file into the
C:\Lighthammer\License directory and then restart your
ServletExec-{InstanceName} NT service in the Windows
Services window.

2006 SAP Americas. All Rights Reserved.

Page 62

SAP xMII Training


Note: It usually takes several minutes to restart the application
instance, so you will not be able to access the application until it
is finished.

Additional Steps for Windows 2003


Complete the following steps to allow the servlet engine to run as a
recognized Web service extension.
1. Select the Web Service Extensions folder.
2. Click the Add a new Web service extension link. The New Web
Service Extension window appears.
3. Enter ServletExec as the new Web service name.

4. Browse to the C:\Inetpub\Scripts location and select


ServletExec_Adapter.dll as the required file.

2006 SAP Americas. All Rights Reserved.

Page 63

SAP xMII Training

5. Select the Set extension status to Allowed check box.


6. Click the OK button.

Installing the FrontPage Add-in


The SAP xMII add-in for Microsoft FrontPage 2000 and Microsoft
FrontPage 2002 is installed in the \Lighthammer\Illuminator\Wizards
directory on the drive on which you installed the SAP xMII application.
In order to use the add-in, it must be installed on each PC that will be
running FrontPage. On computers other than the Web server, a Web
package installation is available on the SAP xMII Web server:
http://<servername>/Lighthammer/WizardInstall/IlluminatorWizard.exe.
You can save the file locally and run it, or you can select Open and run it
directly from the Web server.
Note: Windows 2003 Server requires the FrontPage 2002 Server
extensions.
Once the file is installed (the default is
<SysDrive>:\Lighthammer\Illuminator\Wizards), open FrontPage. Select
the /Tools/Add-Ins menu option. If you already had a previous version of
the Add-in installed (prior to Illuminator 9.5) highlight the SAP xMII
Wizard selection and press the Remove button. If this is a new install,
skip to the enable step below.

2006 SAP Americas. All Rights Reserved.

Page 64

SAP xMII Training


To enable the new add-in, click the Add button, and browse to the location
where the Illum95FPWizard.dll file resides (default is
<SysDrive>:\Lighthammer\Illuminator\Wizards). After clicking the OK
button, you should see the SAP xMII add-in installed as shown in the
following dialog:

The add-in is automatically loaded each time FrontPage is started. The


add-in includes the SAP xMII Object, the Script Assistant, and links to the
SAP xMII Template Editor and the System Administration Editor.

Installing the Dreamweaver Add-in


The SAP xMII add-in for Macromedia Dreamweaver is installed in the
\Lighthammer\Illuminator\Wizards directory on the drive on which you
installed the SAP xMII products.
NOTE: In order to use the add-in, this file must be installed on each PC
that will be running Dreamweaver. On computers other than the Web
server, a Web package installation is available from the SAP xMII Web
server:
http://<servername>/Lighthammer/WizardInstall/IlluminatorWizard.exe
Use the following steps to enable the Dreamweaver add-in:
1. Copy the C:\Lighthammer\Illuminator\Wizards\IllumDWWizard.dll
file to your local installation of the Dreamweaver MX program,
JSExtensions directory (the default is C:\Program
Files\Macromedia\Dreamweaver MX\Configuration\JSExtensions).
2. Copy the C:\Lighthammer\Illuminator\Wizards\Illuminator
Object.htm file to C:\Program Files\Macromedia\Dreamweaver
MX\Configuration\Commands.
3. Copy the C:\Lighthammer\Illuminator\Wizards\Illuminator Script
Assistant.htm file to C:\Program Files\Macromedia\Dreamweaver
MX\Configuration\Commands.

2006 SAP Americas. All Rights Reserved.

Page 65

SAP xMII Training


You should then be able to go into Dreamweaver and find the links at the
bottom of the Command menu. If selecting SAP xMII Object does not
display the plug-in, open a command prompt and type
"cd\Lighthammer\Illuminator\Wizards" to navigate to the folder where the
DLLs are located. Then type "regsvr32 IllumDWWizardGUI.dll" which
should register the dll. Dreamweaver should then prompt you for the SAP
xMII server name or internet protocol (IP) address (it defaults to
localhost) when calling up the plug-in; this is similar to the standalone
version of the plug-in.
You can then configure Dreamweaver for editing SAP xMII Report pages
(.irpt).

Initialization
By default, SAP xMII starts up (initializes) when the NT Service starts
up. There is a time delay for the initialization in order for various system
services to start up as before SAP xMII initializes. It is important that the
timing is correct. The default delay is 30 seconds. This can easily be
changed if it is causing problems. A symptom of this problem is a class
not found error in the Servlet Exec logs, because not all systems were
initialized before SAP xMII was started, causing some paths to be
incorrect.
Until the delay time is complete, it is recommended that you do not
attempt to query SAP xMII. This includes accessing the SAP xMII main
menu. Keep in mind that the delay is in addition to the delay caused by
the NT Service start up time. See the Server Logging section to see how
to access the Servlet Exec Logs. See the section on SAP xMII
Initialization in the system configuration guide for more information on
this topic.

Time Synchronization of Servers and Clients


In order for SAP xMII to operate correctly, the system clocks on the Web
server, data servers, and client browsers should be maintained in
reasonably close synchronization.
In the case where other applications on the Web server prevent the
enabling of automatic daylight savings time adjustment, you must
configure the time zone to use the option that does not include the auto
adjust checkbox [e.g., use the (GMT-05:00) Bogota, Lima, Quito time
zone instead of the (GMT-05:00) Eastern Time (US & Canada) time zone].

Installation Log Files


There are three installation logs created when installing SAP xMII. If you
experience problems during your installation or have questions about
installation locations, you can review these log files.

SAP_xMII_Install_date_time.log is an overall general log file for the


installation located in the Lighthammer\Logs directory.

2006 SAP Americas. All Rights Reserved.

Page 66

SAP xMII Training

CMSServicesInstall_date_time.log contains details relating to the


installation of your SAP xMII services and is located in the
Lighthammer\Logs directory.

xMIISecurityInstall_date_time.log contains details relating to the


installation of Security Manager and is located in the
Lighthammer\Logs directory.

2006 SAP Americas. All Rights Reserved.

Page 67

SAP xMII Training

2006 SAP Americas. All Rights Reserved.

Page 68

SAP xMII Training

Lab 8 Getting Connected


Purpose
The student will learn how to connect to various data sources and verify their
connection status through the configuration of the SAP xMII Connectors and
Servers. Data sources will include: Microsoft SQL, InSQL, AlarmSuite, PI (via UDS)
and Virtual SQL.

Topics Covered
This lab will cover

xMII Administration Menu

Connectors: Types, Configuration

Adding/Configuring/Editing servers

Verifying Connector / Server status

Procedure
To access the SAP xMII Administration Menu, in your browser navigate to

http://<servername>/Lighthammer/
NOTE: Your instructor will provide you with the server name and your
login credentials
After you login your screen should look similar to this

2006 SAP Americas. All Rights Reserved.

Page 69

SAP xMII Training


**The Instructor will perform the next steps to connect to a series of data
sources. Please be aware that any changes to configuration settings on the
server affect the entire class.
1. To Configure our Servers (connections), under Data Services select Data
Servers.
2. Uncheck the Show Only Enabled Servers box to show all the default
Servers.
3. Select InSQLOleDB and verify that the URL value (in the Server Parameters
box) is correctly entered:
a. Edit the proper nodename of the InSQLOleDB server used in the
training class by highlighting the ServerURL line in the Server
Parameters window and making the appropriate changes . By
default, the nodename listed is localhost, which represents the local
machine. Since InSQL is may not be running on the local machine
you need to point to the correct server - verify the IP address with
the instructor.
b. Verify the TCP/IP port. (Note: The configured InSQLOleDB port is
typically 1433).
c. Verify the database name for InSQL Server is Runtime. The database
name for the InSQL connectors will always be Runtime.
d. Click the Enabled checkbox.

2006 SAP Americas. All Rights Reserved.

Page 70

SAP xMII Training


4. For our next server select MSSQL_Database in the Servers list, click
COPY. Enter PlasticResin for the server name.
5. Now edit the URL nodename to <computer name> (or <localhost> which is
the default) and the database name to PlasticResin. Verify the port is set
for 1433 (MS SQL Server). Since there is a PlasticResin database running on
the local computer the nodename can be localhost. Click OK.

6. Click the Enabled checkbox


7. Similarly, create a new MSSQL connection. Select MSSQL_Database in the
Servers list, click COPY. Enter Alarms for the server name. Verify the
nodename is pointing at the proper server, and the database name is
AlarmSuite. Click the Enabled checkbox. See next page.

2006 SAP Americas. All Rights Reserved.

Page 71

SAP xMII Training

8. Now edit the URL nodename to <computer name> (or <localhost> which is
the default) and the database name to PlasticResin. Verify the port is set
for 1433 (MS SQL Server). Since there is a PlasticResin database running on
the local computer the nodename can be localhost. Click OK.

9. Click the Enabled checkbox.


10. After configuring the Servers, click the Save button. After saving, select
the Status button to verify whether or not you have connected to your data
sources.

See next page:

2006 SAP Americas. All Rights Reserved.

Page 72

SAP xMII Training

A value of 1 in the Connections Available column indicates that the server


configuration is complete and a successful connection to the data source has
been made.
A value of 0 in the Connections Available column indicates there is either a
problem in the configuration or the specified data source is not available.

2006 SAP Americas. All Rights Reserved.

Page 73

SAP xMII Training

2006 SAP Americas. All Rights Reserved.

Page 74

SAP xMII Training

Lab 9a Building Queries Using the Template Editor


Purpose
The purpose of this lab is to introduce the basics for creating and customizing data
queries using the SAP xMII Template Editor.

Topics Covered
This lab will cover the following topics

Tag Queries

SQL Queries

Procedure
First, we will create a series of Query Templates that will be used to extract data
for the Java Applets. From the SAP xMII CMS Menu, under Data Services click the
Query Templates icon.

2006 SAP Americas. All Rights Reserved.

Page 75

SAP xMII Training


CREATING A TAG QUERY
1. Current Mode:
a. Select the New button,

then select Tag Query from the Template Type drop-down menu. Select
OK.

2006 SAP Americas. All Rights Reserved.

Page 76

SAP xMII Training

b. In the Data Source tab, select InSQLOLEDB Server and Current Mode.

c. Switch to the Tag Query Details tab. Note the Available Tags list.
d. Use the Tag Selection Mask field to limit the Available Tags listed to only
those you wish to view. In the example below, enter %speed and select
the Apply button. This will limit the tags in the Available Tags field to
only those tags that include speed in their tagname.
e. Use the >>, >, <, or << to add tags to or remove tags from the Selected
Tags field.

2006 SAP Americas. All Rights Reserved.

Page 77

SAP xMII Training

f. Once you have selected the desired tags, click the Test button to verify
that you have a connection to the data source and that the desired data
is returned. Clicking the Test button pops-up the Select Content Type
box choose text/html (default) and click OK.

g. Use the Save As button to save the template as InSQLCurrentQuery in


your Training folder.
*If you dont have a training folder use the New Folder button to create
it within the existing Training folder.

h. You will see a confirmation dialog box stating that the template was
successfully saved.
Once saved, we can use the InSQLCurrentQuery file as a template to create
additional Tag Query templates that use the same tags, but utilize different
Modes (e.g. History, Statistic).

2006 SAP Americas. All Rights Reserved.

Page 78

SAP xMII Training

2. History Mode:
a. switch back to the Data Source tab and select the History Mode. Click
the Test button to verify the data. Use the SAVE AS button and Save
the template as InSQLHistoryQuery in your Training folder.

3. Statistics Mode:
a. Change the Mode to Statistics. In the Method field, select MIN,MAX,TWA
from the drop-down menu. Click the Test button to verify data and use
the SAVE AS button to save the template as InSQLStatQuery in your
Training folder.

2006 SAP Americas. All Rights Reserved.

Page 79

SAP xMII Training

2006 SAP Americas. All Rights Reserved.

Page 80

SAP xMII Training


CREATING A SQL QUERY
1. Query Mode:
a. Select the New button, then SQL Query from the Template Type dropdown menu. Select OK.
b. In the Data Source tab, select the PlasticResin Server and Query Mode.

c. Switch to the SQL Query Details tab, select the PlasticBottleBatchData


table, and add all Columns (Hint: use the > and >> buttons to select
the desired Tables and Columns).

2006 SAP Americas. All Rights Reserved.

Page 81

SAP xMII Training

d. In the Sort Expression: field, add PlasticBottleBatchData.OrderNo ASC.


(HINT: select OrderNo from the Available Columns: field and use the
Paste button to the left of the Sort Expression: field then select the ASC
button to the right of the Sort Expression: field)

e. Use the Test button to verify that the proper data is returned.
f. Save the template in your training folder as BatchListQuery.

2006 SAP Americas. All Rights Reserved.

Page 82

SAP xMII Training

g. Using the same Data Source settings, well create a new SQL Query.
From the Available Tables: select two tables; Sublot and Lot.
h. Select the appropriate columns from each of the tables (see below).
Use the > button to move the selected columns and use the Up and
Down buttons to order the columns as below. The Selected Columns
should be in the following order:
Sublot.LotID
Lot.MaterialName
Sublot.Location
Sublot.QueuedQty
Lot.HoldStatus
Lot.QuarantineStatus
**Note: To populate expression boxes, highlight an Available Table and an
Available Column and click the Paste button next to the expression box you
would like to populate.
i. In the Join Expression: field, add Lot.LotID=Sublot.LotID.
j. In the Filter Expression: field, add Lot.LotID LIKE [Param.1]
k. In the Sort Expression: field, sort on SubLot.LotID.
l. On the Parameters tab, enter a % (percent sign) in the Parameter
Value: field and click Set

m. Use the Test button to verify the proper data is returned.


n. Save the template in your training folder as LotListQuery.
o. Create a new SQL Query using the same PlasticResin data source and
Query Mode.
p. Select the PlasticBottleTrendData table and the Operator column.
2006 SAP Americas. All Rights Reserved.

Page 83

SAP xMII Training


q. In the Filter Expression field, enter:
PlasticBottleTrendData.BatchNo LIKE [Param.1] .
r. On the Parameters tab, enter a % (percent sign) in the Parameter
Value: field and click Set
s. Use the test button to verify that the proper data is returned.
t. Save the template in your Training folder as OperatorScoreboardQuery.

**Note - Parameters (used in the Filter Expression) provide an alternative to


changing other SQL, Alarm, or XML properties at runtime and provide a cleaner
mechanism for changing query behaviors dynamically based on filtering or other
criteria.

2006 SAP Americas. All Rights Reserved.

Page 84

SAP xMII Training


Create a new SQL Query using the same PlasticResin Data Source and Query Mode.
Select the PlasticBottleTrendData table and select all columns (use the >>
button to move all the column names).
u. Click the Date Range tab and set the Start Date: 08/01/2003 06:45:00
and the End Date: 08/01/2003 20:45:00.
v. Under the SQL Query Details tab In Available Columns: highlight the
DateTime column. Select the Set button next to the Date Column:
field.
w. In the Filter Expression field, enter: BatchNo LIKE '[Param.1]'.
x. On the Parameters tab, enter a % (percent sign) in the Parameter
Value: field and click Set
y. Click Test to verify the proper data is returned. Notice the Date-Time
parameters are passed into the SQL Statement.
z. Save the template in your training folder as BatchTrendQuery.

2006 SAP Americas. All Rights Reserved.

Page 85

SAP xMII Training

aa. Create a new SQL Query using the same PlasticResin Data Source and
Query Mode. Under the SQL Details Tab select the KPIData and
KPIConfig tables.
bb. Select all Columns from both tables (use the >> button to move all the
column names).
cc. In the Join Expression: field, add
KPIData.KPIName=KPIConfig.KPIName (this will join the tables on the
KPIName).
dd. In the Filter Expression: field, add KPIConfig.KPIName =Yield (this
will cause the query to return only yield data).

ee. Save the template in your training folder as KPIQuery.

2006 SAP Americas. All Rights Reserved.

Page 86

SAP xMII Training


2. Fixed Query Mode:
a. Create a new SQL Query using the same PlasticResin server, but change
the Mode to FixedQuery.
b. In the Fixed Query tab, enter the following SQL Statement:
Select BatchID, Color, MeltingPt, ChipsPerGram, OrderNo, BatchStart,
BatchEnd, LotID from PlasticBottleBatchData order by OrderNo

c. Test and Save the template in your Training folder as


BatchListFixedQuery.

2006 SAP Americas. All Rights Reserved.

Page 87

SAP xMII Training

d. Once again create a new SQL Query with the PlasticResin server, Mode =
FixedQuery.
e. Enter the following SQL Statement:
(Hint: Try highlighting the table name and column that you want to insert
and click the Paste button next to the Available Columns window this
will insert the table name and column. To just insert the table name,
highlight the table name and click the Paste button next to the Available
Tables window)
Select PlasticBottleTrendData.DateTime,
PlasticBottleTrendData.BatchNo, PlasticBottleTrendData.Pressure,
PlasticBottleTrendData.Temperature, PlasticBottleTrendData.MixSpeed,
PlasticBottleTrendData.Operator from PlasticBottleTrendData Where
(PlasticBottleTrendData.DateTime >= [SD] AND
PlasticBottleTrendData.DateTime <= [ED])

f. Click the Date Range tab and set the Start Date: 08/01/2003 06:45:00
and the End Date: 08/01/2003 20:45:00. Notice the Date-Time
parameters are passed into the SQL Statement.

g. Test and Save the template in your training folder as


BatchTrendFixedQuery.

2006 SAP Americas. All Rights Reserved.

Page 88

SAP xMII Training


h. Create a new SQL Query - Select the same Data Source Server and Mode.
i. Enter the following SQL Statement:
execute BatchList

j. Test and Save the template in your Training folder as


StoredProcedureQuery.
k. Create one final SQL Query Select the Alarms server, and Query Mode.
l. Click on the SQL Query Details tab and select the AlarmSummary table.
m. Select all available columns using the >> button.
n. In the Sort Expression field, enter LastEvent DESC
Verify your settings are correct via the screen shot on the next page:

2006 SAP Americas. All Rights Reserved.

Page 89

SAP xMII Training

o. Test and Save the query in your training folder as AlarmQuery .

2006 SAP Americas. All Rights Reserved.

Page 90

SAP xMII Training

Lab 9b Building Displays Using the Template Editor


Purpose
The purpose of this lab is to introduce the basics of the using the Visualization
Services for creating and customizing display templates used for visualizing the
data queried.

Topics Covered
This lab will cover the following topics

Display Template Editor

iCharts, iGrids, iBrowsers, and iTicker display applets

Procedure
iChart Display Templates
The iChart display template can be used to create many different charts including:
- Line

- Floating Bar

- Regression

- Pie

- Stacked Bar

- XY Regression

- Polar

- Event Horizon

- XY

- Group Bar

- Strip Chart

- Radar

- Bar

- Variability Bar

- Gauge

- Waterfall

- Custom

- Horizontal Bar

- Horizontal Group
Bar

We will begin by creating a new iChart Display template using the Line display
mode.
iChart Display Templates
a. From the SAP xMII Admin Menu, under Visualization Services
click the Display Templates icon.
b. Select the New button, then iChart from the Template Type
drop-down menu. Select OK.
c. In the Chart Type: drop-down box, select Line.
d. In the Title text box, enter iChart Line Chart Type.
e. Save the template as iChartLine in your training folder.

2006 SAP Americas. All Rights Reserved.

Page 91

SAP xMII Training

Note: Before continuing, review the parameters available in each of the Display
Template tabs (e.g. General, Legend, Xaxis, Yaxis, Pen Details, Behaviors, Data
Mapping, and Refresh). After we are finished creating Display Templates, we will
revisit a few samples to discuss the effect of the various parameters available.
f.

In the same iChartLine template, change the Chart Type to Bar


and the Chart Title to iChart Bar Chart Type. Save the
template as iChartBar.

Using the table below as a guide, create these additional Display Templates:
Chart Type

Title

Save As

GroupBar

iChart Group Bar Chart Type

iChartGroupBar

Polar

iChart Polar Chart Type

iChartPolar

FloatingBar

iChart Floating Bar Chart Type

iChartFloatingBar

Gauge **

iChart Gauge Chart Type

iChartGauge

**Note: For Gauge, set both the Horizontal and Vertical Grid Line Count = 2
prior to saving

2006 SAP Americas. All Rights Reserved.

Page 92

SAP xMII Training


Create a new iChart Line for a SQL Trend:
a. Select the New button, then iChart from the Template Type
drop-down menu. Select OK.
General tab:
b. In the Chart Type: drop-down box, select Line.
c. In the Title text box, enter Profile for BATCH00018.
d. Set the Title Font: to Helvetica 16 Bold Italic, Title Color: to
Yellow.
e. Check appropriate boxes per screen print below

2006 SAP Americas. All Rights Reserved.

Page 93

SAP xMII Training

Legend tab
a. Set Background Color: black, Border Color: White, Selection
Border Color: gray, Label Color: White, Font: Helvetica 12.
b. Check Legend on Top? Box.
c. Set Legend Width: 25, Legend Height: 0.

2006 SAP Americas. All Rights Reserved.

Page 94

SAP xMII Training


Pen Details tab
a. In the Pen Details tab, change the Pen settings as follows:
Pen #

Scale

Pen Color

Auto / Zero base

Yellow

Auto / Zero base

Cyan

Auto / Zero base

Red

* Make sure Global Server Scaling is unchecked

2006 SAP Americas. All Rights Reserved.

Page 95

SAP xMII Training


Data Mapping tab
a. In the Value Columns: box, add
Pressure,Temperature,MixSpeed (Hint: use the button to
connect to the BatchTrendQuery, highlight a column name and
click the < button next to the window that you want to insert
the value. You will have to add each column name separately.
This is a timesaving feature of CMS, allowing you to use Column
Names from your existing query templates, and helps prevent
typographical errors.).
b. In the Label Columns: box, add BatchNo.
c. Check the Include Values in Label? Box.

Behaviors tab
a. Uncheck Enable Double Click Refresh and Enable Automatic
Refresh.
b. Save the template as BatchTrendChart in your training folder.

2006 SAP Americas. All Rights Reserved.

Page 96

SAP xMII Training


Finally we will create a Custom iChart:
a. Select the New button, then iChart from the Template Type
drop-down menu. Select OK.
General tab:
b. In the Chart Type: drop-down box, select Custom.
c. In the Title text box, enter Key Performance Indicator for
Yield.
d. Verify settings per the screen shot below.

2006 SAP Americas. All Rights Reserved.

Page 97

SAP xMII Training


Data Mapping tab:
e. Set the Value Columns, Axis Label Columns, and Axis Value
Column to the appropriate values using the KPIQuery that we
already created.

Verify the following settings in the Legend, X Axis, and Y Axis tabs:

2006 SAP Americas. All Rights Reserved.

Page 98

SAP xMII Training

2006 SAP Americas. All Rights Reserved.

Page 99

SAP xMII Training

Pen Details tab


f. In the Pen Details tab, change the Pen settings as follows:
Pen #

Scale

Pen type

Marker Style

Pen Color

Global Auto Scale

Bar

0 - none

Yellow

Global Auto Scale

Line

5-X

Cyan

Global Auto Scale

Line

5-X

Red

2006 SAP Americas. All Rights Reserved.

Page 100

SAP xMII Training

Verify the following settings for the Behaviors and Refresh Page tabs:

Save this display template as KPIChart in your training folder.

2006 SAP Americas. All Rights Reserved.

Page 101

SAP xMII Training

2006 SAP Americas. All Rights Reserved.

Page 102

SAP xMII Training


iGrid Display Templates
The iGrid display template can be used to create many different grids including:
Grid

Lights

Column Lights

Multi-Lights

Scoreboard

Vertical Grid

Vertical Scoreboard

Embedded Lights

1. We will begin by creating a new iGrid Display template using the Grid display
type
a. Select the New button, then iGrid from the Template Type
drop-down menu. Select OK.
b. In the Grid Type: drop-down box, select Grid.
c. Save the template as iGridGrid in your training folder.

2006 SAP Americas. All Rights Reserved.

Page 103

SAP xMII Training


2. Using the iGridGrid as a template, change the Grid Type to Scoreboard and
save the template in your Training folder as iGridScoreboard.
3. Using the iGridScoreboard as a template, change the Grid Type to Lights then:
a. Switch over to the Data Mapping tab (this is where we will assign the
columns to display).
b. Click on the button and select the AlarmQuery template from
your training folder (this is the Query we want to be displayed).

c. Highlight the following Column Names from the Column Names


window AlarmType, GroupName, LastEvent, Operator and
TagName and click the < button to add them to the Display
Columns window. You will have to add the column names one at a
time.
d. Switch to the Color Context tab and with a cell in the first blank
column selected type AlarmType in the Match Column Name text
box and click the Set button. Use the Match Color and Match Value
Set buttons to update the settings to the following
(HIHI = Red, HI = Pink, DISC = Lime Green, LO = Gold, LOLO = Yellow)

2006 SAP Americas. All Rights Reserved.

Page 104

SAP xMII Training

e. Save the template in your training folder as iGridLights.

4. Using the same Layout and Color Context settings, switch to the General tab
and update the Grid Type to MultiLights. Save the template in your training
folder as iGridMultiLights.

2006 SAP Americas. All Rights Reserved.

Page 105

SAP xMII Training

5. Create a New iGrid template named BatchListGrid with the following


parameters:
General tab
a. Grid Type: Grid, Text Font: Helvetica 10, Header Font: Helvetica 12 Bold,
Selected Font: Helvetica 10 Bold, Grid Color: Gray, Text Color: White, Row
Selection Color: Yellow, Row Selection Border Color: Royal Blue.
b. Check appropriate boxes

2006 SAP Americas. All Rights Reserved.

Page 106

SAP xMII Training


Data Mapping tab
a. Add appropriate Display Columns, see figure below (Hint: use the
button to link to the BatchListQuery template).

Layout tab
a. Add the appropriate Column Headings by typing into the text box and
clicking the SET button.
b. Verify that the Auto Resize Columns box is checked.
c. Save template in your training folder as BatchListGrid.

6. Create a New iGrid template named LotListGrid with the following parameters:

2006 SAP Americas. All Rights Reserved.

Page 107

SAP xMII Training


General tab
a. Set the parameters to - Grid Type: Grid, Text Font: Helvetica 14, Header
Font: Helvetica 14 Bold, Selected Font: Helvetica 14, Grid Color: Gray, Text
Color: White, Row Selection Color: White, Row Selection Border Color:
White.
b. Check appropriate boxes

Data Mapping tab


c. Use the button next to the Query Template Name box to browse for the
LotListQuery template.
d. Choose all the columns to be displayed by clicking the << button.

2006 SAP Americas. All Rights Reserved.

Page 108

SAP xMII Training


Layout tab
a. Add appropriate Headings (see table and screen shot).
b. Verify that the Auto Resize Columns box is checked.
Column Name

Heading

Lot ID

Lot Identification

MaterialName

Material Name

QueuedQty

QTY

Location

Location

HoldStatus

Hold Status

QuarantineStatus

Quarantine Status

2006 SAP Americas. All Rights Reserved.

Page 109

SAP xMII Training


Color Context tab:
a. Apply the appropriate color context to the data by matching the Column
Names and Values to the following colors:
Color

HoldStatus

QuarantineStatus

Lime Green

Released

ACTIVE

Yellow

Released

QUARANTINED

Pink

ON_HOLD

ACTIVE

Red

ON_HOLD

QUARANTINED

b. Save template in your training folder as LotListGrid.

7. Create a New iGrid template named OperatorScoreboard with the following


parameters:

2006 SAP Americas. All Rights Reserved.

Page 110

SAP xMII Training


General tab
a. Set the parameters to - Grid Type: Scoreboard, Text Font: Helvetica 12,
Header Font: Helvetica 12 Bold, Selected Font: Helvetica 12, Grid Color:
Gray, Text Color: White, Row Selection Color: White, Row Selection Border
Color: White.
b. Check appropriate boxes:

2006 SAP Americas. All Rights Reserved.

Page 111

SAP xMII Training


Layout tab
a. In Row Headings: add Operator.
b. Uncheck the Auto Resize Columns? box.
c. Set Row Height = 15 and Row Heading Width = 8.
d. Save template in your training folder as OperatorScoreboard.

2006 SAP Americas. All Rights Reserved.

Page 112

SAP xMII Training


iTicker Display Templates
The iTicker display template has only 1 Display type:
a. Select the New button, then iTicker from the Template Type drop-down
menu. Select OK.
b. Set the parameter values per the graphic below (Text Color: Lime Green,
Background Color: Black, Off Color: Black).

2006 SAP Americas. All Rights Reserved.

Page 113

SAP xMII Training


c. Switch to the Data Mapping tab and add the following Display Columns.
(Use the column names from the InSQLCurrentQuery).

d. Switch to the Color Context tab and update it like the following (Note:
Colors, top to bottom, are Yellow, Orange, Lime Green, and Red).
e. Select the Match Mode: Number radio button.

2006 SAP Americas. All Rights Reserved.

Page 114

SAP xMII Training

f. Switch to the Refresh tab and verify that automatic refresh is ENABLED and
the Refresh Rate is set to 60.

g. Save the template in your training folder as iTickerCurrent.

2006 SAP Americas. All Rights Reserved.

Page 115

SAP xMII Training

2006 SAP Americas. All Rights Reserved.

Page 116

SAP xMII Training


iBrowser Display Templates
The iBrowser is used to display a hierarchical view of tags, columns, etc.:
a. Select the New button, then iBrowser from the Template Type drop-down
menu. Select OK.
b. Save the template in your training folder as iBrowser.

2006 SAP Americas. All Rights Reserved.

Page 117

SAP xMII Training

2006 SAP Americas. All Rights Reserved.

Page 118

SAP xMII Training

Lab 9c Using the Dynamic Page Generator


Purpose
The purpose of this lab is to introduce the basics of the using the SAP xMII Dynamic
Page Generator to build a dynamic Java Applet for data visualization.

Topics Covered
This lab will cover the following topics

Generating Dynamic Pages using Query and Display Templates

Generating GIF Charts using the Query and Display Templates

Embedding the generated HTML code into a web-authoring tool (e.g.


FrontPage)

Procedure
1. Return to the SAP xMII Admin Menu, under Visualization Services, select the
Dynamic Page Generator icon. This will open up the Dynamic Page Generator
form

2. To generate a Page or a GIF Chart, we must select a QUERY template


containing the information for extracting data, and a DISPLAY template
containing information on how the data will be displayed.
3. We will use the folders in the top-left window to navigate and select our Query
Template files. (Note: the radio buttons on the right can be used to filter Query
Types).
2006 SAP Americas. All Rights Reserved.

Page 119

SAP xMII Training


4. We will use the folders in the bottom-left window to navigate and select our
Display Template files. (Note: the radio buttons on the right can be used to
filter Display Types).
5. From your training folder select the Query template InSQLCurrentQuery and
the Display template iChartBar. Selecting the Generate Page button should
generate a page similar to the one below

2006 SAP Americas. All Rights Reserved.

Page 120

SAP xMII Training

6. The page includes the HTML code for the Applet, which we will use in our webpage design. From your browsers View menu, select Source. A pop-up window
will appear containing the HTML source code that was generated by the CMS
Dynamic Page Servlet. The HTML code should look something like this
<HTML>
<HEAD>
<TITLE>
Auto-Generated Page
</TITLE>
</HEAD>
<BODY>
<DIV ALIGN="CENTER">
<CENTER>
<P>
<APPLET NAME=Untitled CODEBASE="/Illuminator/classes" CODE="iChart"
ARCHIVE="illum8.zip" WIDTH=600 HEIGHT=400 MAYSCRIPT>
<PARAM NAME="QueryTemplate" VALUE="Training/InSQLCurrentQuery">
<PARAM NAME="DisplayTemplate" VALUE="Training/iChartBar">
</APPLET></BODY></HTML>

7. Highlight the Applet tag code (HTML code between and including the <Applet>
and the </Applet> tags) and copy to the clipboard (Ctrl+C).
8. Open Page1.htm in FrontPage. Edit the title of the page and add some text at
the top of the page to read iChart Applet Sample Displays.
9. Switch to the HTML view and paste (Ctrl+V) the <applet> tag code into the
HTML Body of the document.
10. REPEAT the procedure of Generating Pages, copying the HTML code and pasting
it in the <body> of Page1.htm for all of the iChart templates using the table
below as a guide for pairing Query and Display templates.

Query Template

Display Template

Training\<your folder>\InSQLStatQuery

Training\<your folder>\iChartFloatingBar

Training\<your folder>\InSQLCurrentQuery

Training\<your folder>\iChartGauge

Training\<your folder>\InSQLStatQuery

Training\<your folder>\iChartGroupBar

Training\<your folder>\InSQLHistoryQuery

Training\<your folder>\iChartLine

Training\<your folder>\InSQLHistoryQuery

Training\<your folder>\iChartPolar

11. Open Page2.htm in FrontPage. Edit the title of the page and add some text at
the top of the page to read iGrid Applet Sample Grids.

2006 SAP Americas. All Rights Reserved.

Page 121

SAP xMII Training


12. Repeat the generate page, copy and paste procedure for all of the iGrid
templates using the table below as a guide for template selection.

Query Template

Display Template

Training\<your folder>\AlarmQuery

Training\<your folder>\iGridGrid

Training\<your folder>\AlarmQuery

Training\<your folder>\iGridLights

Training\<your folder>\AlarmQuery

Training\<your folder>\iGridMultiLights

Training\<your folder>\InSQLCurrentQuery

Training\<your folder>\iGridScoreboard

13. In FrontPage, create a MiscPage.htm for the remaining applet examples. Use
the following table as a guide for selecting Query Template and Display
Template pairs.
Query Template

Display Template

Training\<your folder>\InSQLCurrentQuery

Training\<your folder>\iTickerCurrent

Training\<your folder>\LotListQuery

Training\<your folder>\iBrowser

2006 SAP Americas. All Rights Reserved.

Page 122

SAP xMII Training

Lab 10a Web Page Design


Purpose
The purpose of this lab is to use the SAP xMII Object Wizard for Microsoft FrontPage
to create applets for use in a web page.

Topics Covered
This lab will cover the following topics

Incorporating SAP xMII Applets within a web page

Using xMIIs FrontPage Object Wizard

Procedure
1. Create a Tag query using the Simulator as the datasource and the mode =
Current. Select the 4 CylTemp tags to be used for the query. Save in your
Training folder as TempQuery.
2. Create 2 display templates, one grid and one bar chart (for the bar chart,
set the auto refresh to 2 seconds). Save in your Training folder as TempGrid
and TempChart.
3. Open FrontPage and start a new web page.
4. Insert a 3 row, 1 column table on the page. Type a title in row 1. Your
page should look something like this:

2006 SAP Americas. All Rights Reserved.

Page 123

SAP xMII Training


5. Position the cursor in the second row and under Tools select Illuminator
Object.

6. Insert an SAP xMII Applet with the FrontPage wizard:


a. Highlight your Training folder in the Query and Display Template
areas.
b. Choose our temperature query and bar chart display.
c. Under dimensions enter Width as 550 and Height as 250.
d. Name the Applet Temps.
e. Click Create HTML.
See display on the next page

2006 SAP Americas. All Rights Reserved.

Page 124

SAP xMII Training

7. Position the cursor in the third row and using the SAP xMII Object wizard
insert an Applet using the temperature query, the grid display and the
following: Width=550, Height=210, Name=TempGrid (Hint: Click Grid
button next to the Display Template windows to view the grid templates).

8. Click Create HTML.


9. Save the page in your training folder as CylTemps.htm.

2006 SAP Americas. All Rights Reserved.

Page 125

SAP xMII Training


Review the HTML.

2006 SAP Americas. All Rights Reserved.

Page 126

SAP xMII Training

Lab 10b Web Page Design (on your own)


Procedure
Create a web page that looks something like the picture below incorporating what
we have learned. Included on the picture are the templates to use for each
Applet, as well as, the suggested dimensions.
**Remember to name your Applets!

Save this page in your training folder as BatchOverview.htm

2006 SAP Americas. All Rights Reserved.

Page 127

SAP xMII Training

2006 SAP Americas. All Rights Reserved.

Page 128

SAP xMII Training

Lab 11a Scripting with xMII


Purpose
The purpose of this lab is to use JavaScript to interact with xMII applets. We will
use Applet properties and methods to dynamically change the output of the xMII
Applets.

Topics Covered
This lab will cover the following topics

Exploring xMII Applets Name-Value pairs

JavaScript and xMII Applets

Procedure
Scripting Drill-Downs
In the following Lab we will use JavaScript to drill-down between multiple
applets and correlate data. As a result, the users will be able to select a specific
batch from the BatchList applet and populate the other applets with correlating
data based on the selected batch.
GRID to GRID (BatchList to LotList)
1. First, we must prepare the BatchList and LotList applets for scripting:
a. In FrontPage, click on the Code Tab and find the BatchList Applet. Add
the following highlighted content:
<table border="0" cellspacing="0" width="765" cellpadding="0">
<tr>
<td valign=top rowspan="2" width="378">
<APPLET NAME=BatchList CODEBASE="/Illuminator/classes" CODE="iGrid"
ARCHIVE="illum8.zip" WIDTH=378 HEIGHT=380 MAYSCRIPT>
<PARAM NAME="QueryTemplate" VALUE="Training/BatchListQuery">
<PARAM NAME="DisplayTemplate" VALUE="Training/BatchListGrid">
<PARAM NAME="SelectionEvent" VALUE="UpdateDetails">
</APPLET>
</td>

b. Find the LotList Applet and add the following highlighted content:
<td colspan="2" width="765">
<APPLET NAME=LotList CODEBASE="/Illuminator/classes" CODE="iGrid"
ARCHIVE="illum8.zip" WIDTH=715 HEIGHT=45 MAYSCRIPT>
<PARAM NAME="QueryTemplate" VALUE="Training/LotListQuery">
<PARAM NAME="DisplayTemplate" VALUE="Training/LotListGrid">
<PARAM NAME="Param.1" VALUE="0">
</APPLET></td>

2006 SAP Americas. All Rights Reserved.

Page 129

SAP xMII Training


c. With our applet prepared for scripting, we will build the JavaScript
functions. Enter the following highlighted content. This will modify the
LotList applet to include only the appropriate Lot. Enter the following
code just after the </head> line.

<script type="text/JavaScript">
function UpdateDetails(){
//set up aliases for easy reference
var BatchGrid = document.BatchList.getGridObject();
var LotQuery = document.LotList.getQueryObject();
//get the selected LotID
var selLot = BatchGrid.getSelectedCellValueByName(LotID);
//change the where clause for the LotListQuery
LotQuery.setParam(1, selLot);
//do a refresh here because the query is NOT time sensitive
document.LotList.refresh();
}

</script>

GRID to TREND (BatchList to BatchTrend)


d. In reviewing the BatchTrend applet, you will note the trend chart
contains a lot of trended data making if difficult to read. To make it
easier for the users to read, we will first clear the data in the
BatchTrendQuery template. Enter the highlighted content below:
<td valign=top width="360">
<APPLET NAME=BatchTrend CODEBASE="/Illuminator/classes" CODE="iChart"
ARCHIVE="illum8.zip" WIDTH=370 HEIGHT=350 MAYSCRIPT>
<PARAM NAME="QueryTemplate" VALUE="Training/BatchTrendQuery">
<PARAM NAME="DisplayTemplate" VALUE="Training/BatchTrendChart">
<PARAM NAME="Title" VALUE="Please Select a Batch">
<PARAM NAME="XAxisFontSize" VALUE="9">
<PARAM NAME="YAxisFontSize" VALUE="10">
<PARAM NAME="LegendFontSize" VALUE="10">
<PARAM NAME="ShowMouseTracking" VALUE="False">
<PARAM NAME="Param.1" VALUE="0">
</APPLET>
</td>

2006 SAP Americas. All Rights Reserved.

Page 130

SAP xMII Training

e. Now well enter the JavaScript function to drill-down from the


BatchList applet to the BatchTrend applet. Enter the highlighted
content below:
<script type="text/JavaScript">
function UpdateDetails(){
//set up aliases for easy reference
var BatchGrid = document.BatchList.getGridObject();
var LotQuery = document.LotList.getQueryObject();
var TrendQuery = document.BatchTrend.getQueryObject();

//get the selected LotID


var selLot = BatchGrid.getSelectedCellValueByName(LotID);
//change the where clause for the LotListQuery
LotQuery.setParam(1, selLot);
//do a refresh here because the query is NOT time sensitive
document.LotList.refresh();
//get the selected BatchID, StartDate and EndDate
var selBatch = BatchGrid.getSelectedCellValueByName(BatchId);
var selStartDate =
BatchGrid.getSelectedCellValueByName(BatchStart);
var selEndDate = BatchGrid.getSelectedCellValueByName(BatchEnd);
//set the Param and Start and End Dates
TrendQuery.setParam(1,selBatch);
TrendQuery.setStartDate(selStartDate);
TrendQuery.setEndDate(selEndDate);
//do an update here because the query IS time sensitive
document.BatchTrend.updateChart(true);
}
</script>

f. You will note we have declared variables (var TrendQuery and var
Batchgrid) to make our code easier to enter and read. We have also set
our Param and captured both a StartDate and EndDate.
g. Next, well modify the Title of our BatchTrend to be more appropriate
for our selected batch. Enter the highlighted content below:
<script type="text/JavaScript">
function UpdateDetails(){
//set up aliases for easy reference
var BatchGrid = document.BatchList.getGridObject();
var LotQuery = document.LotList.getQueryObject();
var TrendQuery = document.BatchTrend.getQueryObject();
var TrendChart = document.BatchTrend.getChartObject();
//get the selected LotID
var selLot = BatchGrid.getSelectedCellValueByName(LotID);

//change the where clause for the LotListQuery


LotQuery.setParam(1,selLot);
2006 SAP Americas. All Rights Reserved.

Page 131

SAP xMII Training

//do a refresh here because the query is NOT time sensitive


document.LotList.refresh();
//get the selected BatchID, StartDate and EndDate
var selBatch = BatchGrid.getSelectedCellValueByName(BatchId);
var selStartDate = BatchGrid.getSelectedCellValue(BatchStart);
var selEndDate = BatchGrid.getSelectedCellValue(BatchEnd);
//set the Param and Start and End Dates
TrendQuery.setParam(1,selBatch);
TrendQuery.setStartDate(selStartDate);
TrendQuery.setEndDate(selEndDate);
//change the title on the chart
TrendChart.setTitle("Profile For "+selBatch);
//do an update here because the query IS time sensitive
document.BatchTrend.updateChart(true);
}
</script>

GRID to SCOREBOARD (BatchList to OperatorName)


h. Similar to the BatchTrend applet, we will first clear the
OperatorScoreboardQuery template. Enter the highlighted content
below:
<td align=center width="50%">
<APPLET NAME=OperatorName CODEBASE="/Illuminator/classes"
CODE="iGrid" ARCHIVE="illum8.zip" WIDTH=145 HEIGHT=25 MAYSCRIPT>
<PARAM NAME="QueryTemplate" VALUE="Training/OperatorScoreboardQuery">
<PARAM NAME="DisplayTemplate" VALUE="Training/OperatorScoreboard">
<PARAM NAME="Param.1" VALUE="0">
</APPLET>
</td>

i. Now well enter the Script to drill-down from the BatchList to the
OperatorName applet. Enter the highlighted content below:
<script type="text/JavaScript">
function UpdateDetails(){
//set up aliases for easy reference
var BatchGrid = document.BatchList.getGridObject();
var LotQuery = document.LotList.getQueryObject();
var TrendQuery = document.BatchTrend.getQueryObject();
var TrendChart = document.BatchTrend.getChartObject();
var OperQuery = document.OperatorName.getQueryObject();
2006 SAP Americas. All Rights Reserved.

Page 132

SAP xMII Training

//get the selected LotID


var selLot = BatchGrid.getSelectedCellValueByName(LotID);
//change the where clause for the LotListQuery
LotQuery.setParam(1,selLot);
//do a refresh here because the query is NOT time sensitive
document.LotList.refresh();
//get the selected BatchID, StartDate and EndDate
var selBatch = BatchGrid.getSelectedCellValueByName(BatchId);
var selStartDate =
BatchGrid.getSelectedCellValueByName(BatchStart);
var selEndDate = BatchGrid.getSelectedCellValueByName(BatchEnd);
//set the Param and Start and End Dates
TrendQuery.setParam(1,selBatch);
TrendQuery.setStartDate(selStartDate);
TrendQuery.setEndDate(selEndDate);
//change the title on the chart
TrendChart.setTitle(Profile For +selBatch);
//do an update here because the query IS time sensitive
document.BatchTrend.updateChart(true);
//change the operator grid query filter
OperQuery.setParam(1,selBatch);
//not time sensitive
document.OperatorName.refresh();
}
</script>

2006 SAP Americas. All Rights Reserved.

Page 133

SAP xMII Training

j. When our Drill-Down Scripting is complete, you should see something


similar to the following; Lets try it out!

2006 SAP Americas. All Rights Reserved.

Page 134

SAP xMII Training


SORTING by COLUMN HEADING
Our next Script will sort the columns of the BatchList applet as we click on the
Column Heading.
1. First, well add a parameter to the BatchList applet. Enter the highlighted
content below:
<td valign=top rowspan="2" width="378">
<APPLET NAME=BatchList CODEBASE="/Illuminator/classes" CODE="iGrid"
ARCHIVE="illum8.zip" WIDTH=378 HEIGHT=380 MAYSCRIPT>
<PARAM NAME="QueryTemplate" VALUE="Training/BatchListQuery">
<PARAM NAME="DisplayTemplate" VALUE="Training/BatchListGrid">
<PARAM NAME="SelectionEvent" VALUE="UpdateDetails">
<PARAM NAME="ColumnSelectionEvent" VALUE="sortBatchList">
</APPLET>
</td>

2.

Next, well build the following JavaScript.

//it is a global var if declared outside a function


sortASC = true;
function sortBatchList() {
var BatchGrid = document.BatchList.getGridObject();
var BatchQuery = document.BatchList.getQueryObject();
//the selected column
var selCol = BatchGrid.getSelectedColumnName();
if (sortASC) {
BatchQuery.setSortExpr(selCol+ ASC);
sortASC = false;
}
else {
BatchQuery.setSortExpr(selCol+ DESC);
sortASC = true;
}
//not time sensitive
document.BatchList.refresh();
}
</script>

3.

Save the page.

2006 SAP Americas. All Rights Reserved.

Page 135

SAP xMII Training

2006 SAP Americas. All Rights Reserved.

Page 136

SAP xMII Training

Lab 11b More Scripting with xMII


SYNCHRONIZING MULTIPLE APPLETS
In this next Lab, well explore synchronizing multiple iChart applets. We will use
templates you have already created, but we will also need to create one new
Query template.
a. First, open FrontPage and create a new page called Trends.htm, insert a
2 row, 1 column table.
b. From the SAP xMII Administration menuopen the xMII Template Editor to
create our new query.
c. Select New Tag Query.
d. In the Data Source tab, select InSQLOleDB Server and History Mode.
e. In the Tag Query Details tab, select the four Yield Tags.

f. Test and Save in your training folder as InSQLYieldQuery.

2006 SAP Americas. All Rights Reserved.

Page 137

SAP xMII Training


g. Close the browser and position the cursor in the top cell and start the
SAP xMII Object Wizard.
h. Select the InSQLYieldQuery Query Template we just created and the
iChartLine Display Template.
i. Name the applet YieldTrend. Width = 640, Height = 280.
j. In the Parameters box click on the button to view the parameters and
complete the following (click the Add button to add each Name-Value
pair).
Parameter Name

Value

ShowTitle

False

LegendFontSize

10

XAxisFontSize

10

YAxisFontSize

10

ShowMouseTracking

False

k. Click on Create HTML.


l. In the bottom cell, insert an applet using the SAP xMII Object Wizard.
m. In the Training folders, select the InSQLHistoryQuery Query Template
and the iChartLine Display Template.
n. Name the applet SpeedTrend. Width = 640, Height = 280.
o. In the Parameters box click on the button to view the parameters and
complete the following.
Parameter Name

Value

ShowTitle

False

LegendFontSize

10

XAxisFontSize

10

YAxisFontSize

10

ShowTimeControl

False

ShowMouseTracking

False

ShowTagDescription

False

EnableMenu

False

EnableDoubleClickRefresh

False

EnableLegendClick

False

p. Click on Create HTML.

2006 SAP Americas. All Rights Reserved.

Page 138

SAP xMII Training

q. From the HTML tab, find the YieldTrend applet and enter the following
parameters highlighted below:
<td>
<APPLET NAME="YieldTrend" WIDTH="640" HEIGHT="280" CODE="iChart"
codebase="/Illuminator/Classes" ARCHIVE="illum8.zip" MAYSCRIPT>
<PARAM NAME="QueryTemplate" VALUE="Training/InSQLYieldQueryQuery">
<PARAM NAME="DisplayTemplate" VALUE="Training/iChartLine">
<PARAM NAME="ShowTitle" VALUE="False">
<PARAM NAME="LegendFontSize" VALUE="10">
<PARAM NAME="XAxisFontSize" VALUE="10">
<PARAM NAME="YAxisFontSize" VALUE="10">
<PARAM NAME="ShowMouseTracking" VALUE="False">
<PARAM NAME="UpdateEvent" VALUE="syncYieldTrend">
<PARAM NAME="SelectionEvent" VALUE="syncPens">
</APPLET>
</td>

r. With the parameters added, we can start creating our JavaScript. Well
setup a few variables to reference our objects:
<script type="text/JavaScript">
function syncYieldTrend() {
var SpeedChart = document.SpeedTrend.getChartObject();
var YieldChart = document.YieldTrend.getChartObject();
var SpeedQuery = document.SpeedTrend.getQueryObject();
var YieldQuery = document.YieldTrend.getQueryObject();

s. The next thing we need to do in our script is make sure the web page,
including all applets, is fully loaded before we allow any actions to
occur. To do this, enter the following highlighted content after the
variable declaration:
// make sure the applets have loaded
if(document.YieldTrend == null){
return;
}
if(document.SpeedTrend == null){
return;
}
if(YieldQuery == null){
return;
}
if(SpeedQuery == null){
return;
}
if(YieldChart == null){
return;
}
if(SpeedChart == null){
return;
}
}
</script>

2006 SAP Americas. All Rights Reserved.

Page 139

SAP xMII Training

t. Next well get the Start and End Dates from our YieldTrend applet.
<script type="text/JavaScript">

function syncYieldTrend() {
var SpeedChart = document.SpeedTrend.getChartObject();
var YieldChart = document.YieldTrend.getChartObject();
var SpeedQuery = document.SpeedTrend.getQueryObject();
var YieldQuery = document.YieldTrend.getQueryObject();
// make sure the applets have loaded
if(document.YieldTrend == null){
return;
}
if(document.SpeedTrend == null){
return;
}
if(YieldQuery == null){
return;
}
if(SpeedQuery == null){
return;
}
if(YieldChart == null){
return;
}
if(SpeedChart == null){
return;
}
// get the start and end times
var selStart = YieldQuery.getStartDate();
var selEnd = YieldQuery.getEndDate();

2006 SAP Americas. All Rights Reserved.

Page 140

SAP xMII Training

u. Now well sync the trend charts.


<script type="text/JavaScript">

function syncYieldTrend() {
var SpeedChart = document.SpeedTrend.getChartObject();
var YieldChart = document.YieldTrend.getChartObject();
var SpeedQuery = document.SpeedTrend.getQueryObject();
var YieldQuery = document.YieldTrend.getQueryObject();
// make sure the applets have loaded
if(document.YieldTrend == null){
return;
}
if(document.SpeedTrend == null){
return;
}
if(YieldQuery == null){
return;
}
if(SpeedQuery == null){
return;
}
if(YieldChart == null){
return;
}
if(SpeedChart == null){
return;
}
// get the start and end times
var selStart = YieldQuery.getStartDate();
var selEnd = YieldQuery.getEndDate();
// sync the charts
if(selStart != null && selEnd != null) {
// get and set the scaling settings
var zoomYMin = YieldChart.getYAxisZoomMin();
var zoomYMax = YieldChart.getYAxisZoomMax();
SpeedChart.setYAxisZoomMin(zoomYMin);
SpeedChart.setYAxisZoomMax(zoomYMax);
SpeedQuery.setEndDate(selEnd);
SpeedQuery.setStartDate(selStart);
// update the changes
document.SpeedTrend.updateChart(true);
}
}
</script>

2006 SAP Americas. All Rights Reserved.

Page 141

SAP xMII Training

v. Finally, with a new function, well sync the Tags focused on trend
charts.
function syncPens() {
var SpeedChart = document.SpeedTrend.getChartObject();
var YieldChart = document.YieldTrend.getChartObject();
//get and set the selected pen
var selPen = YieldChart.getSelectedPen();
SpeedChart.setSelectedPen(selPen);
//time sensitive query
document.SpeedTrend.updateChart(false);

}
</SCRIPT>
Your webpage should look like the following:

w. Save the webpage, Log in to xMII, and view your results.

2006 SAP Americas. All Rights Reserved.

Page 142

SAP xMII Training

Lab 11c Still More Scripting with xMII


Passing Parameters Between windows using Session Variables
a. Create a new page with a 2 row, 1 column table, save as PopUp.htm.
b. In the top cell, insert an Applet with the SAP xMII Object Wizard.
c. From the Training folders select the InSQLCurrentQuery Query and
the iChartBar Display templates.
d. Name the applet CurrentSpeedChart.
e. Insert the following Parameters for our applet (either with the
Object wizard in the parameters box or by hard coding).
<PARAM NAME="Title" value="Current Line Speeds">
<PARAM NAME="YAxisMinorTickCount" value="2">
<PARAM NAME="ShowTagDescription" value="false">
<PARAM NAME="LegendWidth" value="12">
<PARAM NAME="MainBackgroundColor" Value="#003399">
f. Next, well add a Button to our page titled Show Me The Trend!.
In the bottom cell add the following:
<form>
<input type="button" value="Show Me The Trend!" name="B1" onClick="ShowTrend()">
</form>

g. Now lets have that button open another window (PopUpTrend.htm)


and pass the selected TagName value to it.
<script type="text/JavaScript">
function ShowTrend() {
var SpeedChart =
document.CurrentSpeedChart.getChartObject();
//get the selected tag name
var selItem = SpeedChart.getSelectedTagName();
//set the property value Selected Tag to the variable
selItem //in the CurrentSpeedChart applet.
document.CurrentSpeedChart.setPropertyValue("SelectedTag",selIte
m);
//open window command opens PopUpTrend.htm with settings
window.open("PopUpTrend.htm",null,"height=300,width=720,stat
us=yes,toolbar=no,menubar=no,location=no");
}
</script>

2006 SAP Americas. All Rights Reserved.

Page 143

SAP xMII Training


h. Save the page and take a look at what we have so far. It should look
similar to this:

i. Create a blank tag query to be used for the applet in the pop-up
window. From the template editor create a new tag query, select
the InSQLOLEDB server and the History mode. Save the template in
your training folder as PopupQuery.
*Do not select any tags we will be setting the tags via the session
variable.

2006 SAP Americas. All Rights Reserved.

Page 144

SAP xMII Training

j. Next, create a new page and save as PopUpTrend.htm (this will be


our pop-up window).
k. In the body of the page, using the wizard, add the following applet:
<applet name=InSQLTrendChart codebase="/Illuminator/classes"
code="iChart" archive="illum8.zip" width=700 height=276
MAYSCRIPT>
<PARAM NAME="DisplayTemplate" value="Training/iChartLine">
<PARAM NAME="QueryTemplate" Value=" Training/PopupQuery ">
<PARAM NAME="YAxisMinorTickCount" value="2">
<PARAM NAME="LegendWidth" value="25">
<PARAM NAME="ShowTagDescription" value="false">
<PARAM NAME="TitleColor" value="#FFFFFF">
<PARAM NAME="MainBackgroundColor" value="Gray">
<PARAM NAME="Title" value="Trend For : {SelectedTag}">
<PARAM NAME="TagName.1" value="{SelectedTag}">
</applet>
l. Save the pages and test the Button.
m. Our PopUpTrend should look something like this:

2006 SAP Americas. All Rights Reserved.

Page 145

SAP xMII Training

2006 SAP Americas. All Rights Reserved.

Page 146

SAP xMII Training

Lab 12a Personalization - Setting Up Roles


Setting Up Roles
Purpose
The purpose of this lab is to set-up roles, users and security in SAP xMII.

Topics Covered
This lab will cover the following topics

Using the Security Manager..

Roles and Users Overview.

Set up of Roles and Users.

Procedure
Setting up a Role
1. From the SAP xMII Menu, under Security Services choose Security
Manager
2. When prompted to Login:
Username: Admin (This is NOT case sensitive)
Password: Admin (This IS case sensitive)
3. Under User Management, chose the Roles icon and click Add to add a
new role:
4. Add a Role that corresponds to your group number as given to you by the
instructor, and click OK:

2006 SAP Americas. All Rights Reserved.

Page 147

SAP xMII Training

5.

Edit the Description and Priority fields for your Role.


a) In the Description field enter, Group Website and set the Priority to 20
b) Click on the Save Changes to Role button. Click OK.

2006 SAP Americas. All Rights Reserved.

Page 148

SAP xMII Training

Lab 12b Personalization - Setting Up Users


Purpose
The purpose of this lab is to set-up several different users for SAP xMII.

Procedure
Setting up a User
1. Select the Users link.

2. Click Add then enter a user name in pop-up and click OK (*Note Make
sure that the login name has No Spaces).
3. Select the Yes radio button to indicate that this user is Active.
4. Enter a password for the user (passwords are case sensitive).
5. In the Attributes>FullName>Value field, enter your full name and click the
Save Changes to User button. Click OK.
6. Repeat procedure for another user.

2006 SAP Americas. All Rights Reserved.

Page 149

SAP xMII Training

2006 SAP Americas. All Rights Reserved.

Page 150

SAP xMII Training

Lab 12c Personalization Assign Users to Roles


Purpose
The purpose of this lab is to explore the two methods for assigning users to specific
roles in SAP xMII.

Procedure
Assigning a user to a role (first method)
1. Click on the Roles link, choose your Group role.
2. In the Users window highlight your User. Add the user to the Members of
Role window by clicking the < button.
3. Save the changes by clicking the Save Changes to Role button. Click OK.
Assigning a user to a role (second method)
1. Click on the Users link, choose your second user.
2. In the Roles window highlight your group role.
3. Add to the Member of Roles window by clicking the < button.
4. Save the changes by clicking the Save Changes to User button, and click OK.
You now have 2 users in your Group role.

2006 SAP Americas. All Rights Reserved.

Page 151

SAP xMII Training

2006 SAP Americas. All Rights Reserved.

Page 152

SAP xMII Training

Lab 13 Editing the Style Sheets


Purpose
The purpose of this lab is to familiarize the student with XML style sheets and how
to customize the SAP xMII default style sheets for personalization.

Topics Covered
This lab will cover the following topics

Editing the default style sheets.

Assign style sheets to users.

SAP xMII security settings.

Procedure
Minor adjustments to the style sheets This will be performed by the instructor
1. The DynamicHomePage stylesheet is located in the following location:
C:\inetpub\wwwroot\Illuminator\Themes\DynamicHomePage.xsl - This
stylesheet contains all the parts that define the look and feel of your portal.
2. The DynamicHomePage calls a Default Header file. The Header file will
allow you to change the title and the left and right images.

3. The Instructor will make some simple changes.

2006 SAP Americas. All Rights Reserved.

Page 153

SAP xMII Training


PART 2 : (performed by students)
1. From the SAP xMII Menu, under Portal Services choose Navigation.
2. Make sure that Role is selected then choose your Group role, in the Theme
field click the box.
3. Change the default stylesheet to the DyanmicHomePage stylesheet that the
Instructor just created. (Click the button to browse for the new
stylesheet).
4. Click Save at the bottom of the screen

2006 SAP Americas. All Rights Reserved.

Page 154

SAP xMII Training

Lab 14 Security
Purpose
The purpose of this lab is to familiarize the student with the personalization
security settings available with SAP xMII.

Topics Covered

SAP xMII security settings

Procedure
Authorize roles for available servers - This will be performed by the instructor
1. From the Administration Menu, under Security Services, click Data Access.
2. Check the Show Only Enabled Servers box.

2006 SAP Americas. All Rights Reserved.

Page 155

SAP xMII Training

3. In the Available Servers window choose ActivePortal.

4. In the Roles window choose Everyone and click the < button to move
Everyone into the Roles Assigned to Servers window.

5. Repeat this procedure for all the enabled servers.


6. Close the Data Access window and under Security Services, select System
Security.
7. In the Available Service window highlight IlluminatorService and make sure
that the everyone role is assigned.
8. In the Available Service window highlight ContentList and make sure that
the everyone role is assigned.

2006 SAP Americas. All Rights Reserved.

Page 156

SAP xMII Training

Lab 15 Personalization Navigation Editor


Purpose
The purpose of this lab is to become familiar with the Navigation Editor, setting-up
the navigation tree and setting up the content display tabs.

Topics Covered
This lab will cover the following topics

Using the Navigation Editor.

Creating a Navigation Tree.

Creating Content Display Tabs.

Procedure
Build Navigation Trees:
1. From the Administration Menu, under Portal Services, choose Navigation
Editor.
2. Verify Role is selected in the drop-down box and highlight your group role.
3. Click the Add button under the Navigation Tree window and add a
Corporate node.

4. Highlight Corporate and click the Add button to add to the Corporate
node.

2006 SAP Americas. All Rights Reserved.

Page 157

SAP xMII Training


5. With the Corporate node highlighted - add a node labeled Asset Util with
a target of /Training/AssetPage.htm (Click the Files button to find this
page).

6. Click SAVE.
7. Following the same procedure as above, highlight Engineering and add a
Batch Info node.
8. Highlight the Batch Info node and add an Overview node with the
target as our BatchOverview.htm page.

9. Click SAVE.
10. Repeat the above steps for the Operator and add a node called Plant
Information under this node add the following nodes: (Remember to
highlight the Plant Information node before adding each node).
Label

Target

Cylinder Temps

/Training/CylTemps.htm

Speed Trends

/Training/PopUp.htm

Machine Stats

/Training/OperatorPage.htm

2006 SAP Americas. All Rights Reserved.

Page 158

SAP xMII Training


11. Click SAVE.
12. Highlight the Everyone role and add a node to the Root called Training
Pages (Here we will add some of the pages we created to be viewed by all
roles). Add the following nodes to the Training Pages node:
Label

Target

Trends

/Training/Trends.htm

Sample Grids

/Training/Page2.htm

Sample Charts

/Training/Page1.htm

LinkMenu

/Training/HyperLinkMenu.htm

You should have something that looks like this:

13. Click SAVE


Checkout the website Login as the different users and try the links from the
Navigation tree.
2006 SAP Americas. All Rights Reserved.

Page 159

SAP xMII Training

2006 SAP Americas. All Rights Reserved.

Page 160

SAP xMII Training


Add Content Display Tabs:
1. From the Navigation Editor screen, highlight Everyone and click the
Add button under the Content Display Tabs window.

2. Enter the following (to link to the miscellaneous display page that we
previously built).

3. Click SAVE.
4. Using this procedure set up tabs for each of your roles.
**BE SURE TO CLICK SAVE WHEN YOU ARE FINISHED
Check out the website.

2006 SAP Americas. All Rights Reserved.

Page 161

SAP xMII Training

2006 SAP Americas. All Rights Reserved.

Page 162

SAP xMII Training

Lab 16 Data Manipulation / Inline Transform


Purpose
The purpose of this lab is to explore some data manipulation techniques using SQL
queries and Inline Transforms.

Topics Covered
This lab will cover the following topics

Using Aliases in a SQL Query

Inline Transforms

Procedure (Part I)
1. Create a new SQL query with the following settings: Server = Northwind,
Mode = Query.
2. Under the SQL Query Details tab select the [Order Details] and Products
tables and the following columns:

3. Join these tables on the ProductID with the following expression:


[Order Details].ProductID = Products.ProductID

2006 SAP Americas. All Rights Reserved.

Page 163

SAP xMII Training


4. Test this query and note the column headings, your test should look
something like this:

2006 SAP Americas. All Rights Reserved.

Page 164

SAP xMII Training


5. Now lets create some Aliases for these columns, using the Column Name
text box and the Add button add the following columns:
[Order Details].OrderID AS OrderNumber
Products.ProductName AS Product
[Order Details].UnitPrice AS PricePerUnit
*Note: There no spaces in the column names

6. Using the < button choose the columns that we are aliasing and move them
out of the Selected Columns box.

2006 SAP Americas. All Rights Reserved.

Page 165

SAP xMII Training


7. Using the Up button highlight each of our aliased columns and move them
to the correct positions.

8. Test the query and notice that the column names have changed.

2006 SAP Americas. All Rights Reserved.

Page 166

SAP xMII Training


9. Create a new column to calculate our total net price for each product.
Enter the following expression into the Column Name text box and add it to
the Selected Columns box:
[Order Details].Quantity*([Order Details].UnitPrice*(1-[Order Details].Discount)) AS
TotalNetPrice

10. Test the query.


11. Save the template in your Training Folder as TotalPriceQuery.

2006 SAP Americas. All Rights Reserved.

Page 167

SAP xMII Training


Inline Transform
Using an alias will allow you to do a calculation in a SQL type query. This
technique cannot be used in a TAG type query. To do a calculation in a tag query
we need to use an Inline Transform (Please note Inline Transforms can be used with
any query).
The Inline Transform gives the user the ability to assign a stylesheet to further
manipulate the data after it has been retrieved through a system connector.

Procedure (Part II)


1. Create a new Tag query, Server = Simulator, Mode = Current, Tags = L1Speed,
L2Speed, L3Speed, L4Speed.
2. We will be using the IllumCalculator.xsl stylesheet for our inline transform.
The instructor will show the stylesheet (see the screenshot below).
3. We can see that this stylesheet will accept a parameter named Expression.

4. In the tag query, under the Transform tab click the button and choose
the IllumCalculator.xsl to use for the transform.

2006 SAP Americas. All Rights Reserved.

Page 168

SAP xMII Training


5. Set Param #1 to the following: Parameter Name = expression, Parameter
Value = (L1Speed+L2Speed+L3Speed+L4Speed)/4.

6. Test the query. Notice a CalculatedValue column now appears in our


output.
7. To change the CalculatedValue column heading set the following for
Param #2 Parameter Name = CalcFieldName, Parameter Value =
AverageLineSpeed.

8. Test the Query.


9. Save the template in your Training folder as InlineQuery.
2006 SAP Americas. All Rights Reserved.

Page 169

SAP xMII Training

2006 SAP Americas. All Rights Reserved.

Page 170

SAP xMII Training

Lab 17 xMII Reports


Purpose
The purpose of this lab is to create an xMII Report (.irpt file). We will again be
using FrontPage 2003 as our web-authoring tool in conjunction with the
Lighthammer Wizard. The Reports component of SAP xMII enables dynamicallygenerated HTML content to be created to provide comprehensive production
reports combining data from multiple sources and multiple presentation formats
into a format available for display or printing.

Topics Covered
This lab will cover the following topics

Using <SERVLET> tags to dynamically create content in a SAP xMII


Report.

Passing session variables between windows using the


setPropertyValue() method.

Calling a xMII Report directly from the browser address line.

Procedure
1. In FrontPage, the BatchOverview page that we created.
2. First well need to add a button to our web page that will open our xMII
Report. In HTML view, insert the following HTML at the bottom of the page:
(Insert before the </BODY> line).
<form>
<input type="button" value="Open My Lighthammer Report!" name="B1"
onClick="openReport()">
</form>

2006 SAP Americas. All Rights Reserved.

Page 171

SAP xMII Training

3. Create the openReport() function that our Report button calls onClick.
Insert the following into the JavaScript block at the top of the page: ( make
sure to insert between the <script> and </script> prompts).
function openReport() {
//set up alias for easy reference
var BatchGrid = document.BatchList.getGridObject();
//the selected batch
var selBatch = BatchGrid.getSelectedCellValue(1);
//batch start and end dates are hidden in the grid
var batchStart = BatchGrid.getSelectedCellValue(6);
var batchEnd = BatchGrid.getSelectedCellValue(7);
//check to make sure the user has selected a batch
if (selBatch != "") {
//set up session variables we can use in the Lighthammer Report
//(.irpt)
document.BatchList.setPropertyValue("BatchNo",selBatch);
document.BatchList.setPropertyValue("BatchStart",batchStart);
document.BatchList.setPropertyValue("BatchEnd",batchEnd);
//pop up a new window with the .irpt file
window.open("BatchDetail.irpt");
}
else {
//if no batch selected show a dialog box
alert(Please select a batch!!);
}
}

2006 SAP Americas. All Rights Reserved.

Page 172

SAP xMII Training


4. Create the actual SAP xMII Report (.irpt):
a. In FrontPage, create a New Page and save it as BatchDetail.irpt.
(Note: Make sure FrontPage doesnt add the .htm file extension at the
end!).

b. From the Tools menu, open the SAP xMII Object.


c. Select the Report Object Type.
d. In the Stylesheet box, browse for the following stylesheet:
http://localhost/Illuminator/Stylesheets/IllumRowsetTable.xsl
(Note: This stylesheet will truncate the <HTML> and <BODY> tags and
return only the HTML <TABLE> portion of the query)

e. Under the Parameters section add the following name-value pair:


Parameter Name

Parameter Value

FilterExpr

PlasticBottleBatchData.BatchID='{BatchNo}

(Note: BatchNo is one of the session variables we previously set in the


openReport() function. The {curly brackets} tell SAP xMII to dynamically
include the value, effectively allowing browser windows to talk to each
other)

f. Select the BatchListQuery template found in the Training folder.

g. Finally, select the CreateHTML button.


h. Switching to the HTML tab in FrontPage, you should see the
following code has been inserted:
2006 SAP Americas. All Rights Reserved.

Page 173

SAP xMII Training


<HR>
Lighthammer Content Here
<SERVLET NAME="Lighthammer">
<PARAM NAME="QueryTemplate" VALUE="Training/BatchListQuery">
<PARAM NAME="FilterExpr" VALUE="PlasticBottleBatchData.BatchID='{BatchNo}'">
<PARAM NAME="Content-Type" VALUE="text/xml">
<PARAM NAME="Stylesheet"
VALUE="http://localhost/Illuminator/Stylesheets/IllumRowsetTable.xsl">
</SERVLET>
<HR>

5. Next well add a trend chart GIF to our report:


a. In the Wizard, select the Graphic Object Type again, however, this
time select the GIF Output Format.
b. Select the BatchTrendQuery and BatchTrendChart templates.
c. Set the Dimensions of the GIF to Width: 370 and Height: 280.
d. Add the following Parameter name-value pairs:
Parameter Name

Parameter Value

StartDate

{BatchStart}

EndDate

{BatchEnd}

Title

Profile for {BatchNo}

ShowChart

True

** ShowChart is not in the Parameter list you need to type it in.

2006 SAP Americas. All Rights Reserved.

Page 174

SAP xMII Training

e. Select the CreateHTML button.


f. In the Code tab, your completed code should look something like
this:
<p><IMG
SRC="http://localhost/servlet/ChartServlet?Width=370&Height=280&QueryTemplate=Training/Batch
TrendQuery&DisplayTemplate=Training/BatchTrendChart&ContentType=image/gif&StartDate={BatchStart}&EndDate={BatchEnd}&Title=Profile for
{BatchNo}&ShowChart=True">&nbsp;
</p>

* Notice the <SERVLET NAME> is different. SAP xMII uses the


ChartServlet to create snap-shot images (GIF format) of the Java
Applets.

2006 SAP Americas. All Rights Reserved.

Page 175

SAP xMII Training


6. To complete the Report, lets add one more HTML table. This table will
provide a different view of the data in our trend chart GIF.
a. Again, from the SAP xMII Object select the Report Object Type.
b. In the Stylesheet box, browse for the following stylesheet:
http://localhost/Illuminator/Stylesheets/IllumRowsetTable.xsl
c. Under the Parameters section, Add the following name-value pairs:
Parameter Name

Parameter Value

FilterExpr

PlasticBottleTrendData.BatchNo='{BatchNo}

StartDate

{BatchStart}

EndDate

{BatchEnd}

d. Select the BatchTrendQuery template found in the Training folder.

e. Select the CreateHTML button.

2006 SAP Americas. All Rights Reserved.

Page 176

SAP xMII Training


7. The final HTML code of the Report should look like this:
<html>
<head>
<meta name="GENERATOR" content="Microsoft FrontPage 5.0">
<meta name="ProgId" content="FrontPage.Editor.Document">
<meta http-equiv="Content-Type" content="text/html; charset=windows1252">
<title>New Page 1</title>
</head>
<body>
<SERVLET NAME="Lighthammer">
<HR>Lighthammer CMS Content Here<HR>
<PARAM NAME="QueryTemplate" VALUE="Training/BatchListQuery">
<PARAM NAME="Stylesheet"
VALUE="http://localhost/Illuminator/Stylesheets/IllumRowsetTable.xsl"
>
<PARAM NAME="Content-Type" VALUE="text/xml">
<PARAM NAME="FilterExpr"
VALUE="PlasticBottleBatchData.BatchID='{BatchNo}'">
</SERVLET>
<p><IMG
SRC="http://localhost/servlet/ChartServlet?Width=370&Height=280&Query
Template=Training/BatchTrendQuery&DisplayTemplate=Training/BatchTrend
Chart&ContentType=image/gif&StartDate={BatchStart}&EndDate={BatchEnd}&Title=Profil
e for {BatchNo}&ShowChart=True&SSI=True">&nbsp;
</p>
<SERVLET NAME="Lighthammer">
<HR>Lighthammer CMS Content Here<HR>
<PARAM NAME="QueryTemplate" VALUE="Training/BatchTrendQuery">
<PARAM NAME="Stylesheet"
VALUE="http://localhost/Illuminator/Stylesheets/IllumRowsetTable.xsl"
>
<PARAM NAME="Content-Type" VALUE="text/xml">
<PARAM NAME="StartDate" VALUE="{BatchStart}">
<PARAM NAME="EndDate" VALUE="{BatchEnd}">
<PARAM NAME="FilterExpr"
VALUE="PlasticBottleTrendData.BatchNo='{BatchNo}'">
</SERVLET>
</body>
</html>

2006 SAP Americas. All Rights Reserved.

Page 177

SAP xMII Training


8. Dont forget to save your Report file with the .irpt extension!
9. To test the Report, open your browser and load the BatchOverview page.
10. In the Batch grid, select a batch and hit the Report button. Your
BatchDetail.irpt should open in a separate window presenting the selected
data in a 1) Batch List table, 2) Batch Trend Chart GIF, and 3) Batch Trend
table.

2006 SAP Americas. All Rights Reserved.

Page 178

SAP xMII Training


Running A Report Without The Use Of Session Variables
The BatchDetail.irpt we just completed used the Java Applets setPropertyValue()
method to setup sessions variables (BatchNo, BatchStart, and BatchEnd). Those
variables were then used to dynamically pass values between the Java Applets and
the new browser window, creating the Report.
If Java Applets are not used within the web page, for example when using a simple
HTML form, Lighthammer CMS Reports can also be created without the use of
session variables. The following example examines how to create an Lighthammer
Report from within a form.
<FORM NAME="IllumReport"
ACTION="http://localhost/Training/BatchDetail.irpt?">
<TABLE>
<TR>
<TD>
BatchNo:
</TD>
<TD>
<INPUT TYPE="TEXT" NAME="BatchNo" VALUE="BATCH00001">
</TD>
</TR>
<TR>
<TD>
BatchStart:
</TD>
<TD>
<INPUT TYPE="TEXT" NAME="BatchStart" VALUE="08/01/2003
07:00:00">
</TD>
</TR>
<TR>
<TD>
BatchEnd:
</TD>
<TD>
<INPUT TYPE="TEXT" NAME="BatchEnd" VALUE="08/01/2003
07:30:00">
</TD>
</TR>
</TABLE>
<INPUT TYPE="submit" VALUE="SUBMIT" NAME="Open My Lighthammer
Report!">
</FORM>

The ability to run a report without the use of session variables is especially useful
when distributing data to devices that may not be Java-enabled such as hand-held
2006 SAP Americas. All Rights Reserved.

Page 179

SAP xMII Training


devices, web-phones, PDAs, etc. Using a hand-held device, a user could fill out a
form similar to the example, run a Lighthammer Report on Submit and have the
data they need where they need it without delay.

2006 SAP Americas. All Rights Reserved.

Page 180

SAP xMII Training

Lab 18 iCommand
Purpose
The purpose of this lab is to explore the use of iCommands. The iCommand allows
you to execute commands, such as SQL inserts, updates and deletes, without the
need to perform a form post. This makes the user experience much more like a
classic client server interface, without the re-loading of a web page.

Topics Covered
This lab will cover the following topics

Using iCommand to make changes to an existing database

Using Command mode in a query template

Procedure
1. Create our queries:
a) From the Query Template Editor create a new SQL query.
b) From Data Source tab: Server=Northwind, Mode=Query.
c) Choose the SQL Query Details tab and select the Employees table
and the following columns:

d) Test and Save in your training folder as NorthwindEmployeeQuery.

2006 SAP Americas. All Rights Reserved.

Page 181

SAP xMII Training


e) Create a new SQL Query: Server=Northwind, Mode=Command.
f) Click the Fixed Query tab and insert the following into the Query box:
INSERT INTO Employees (LastName, FirstName, Title, City, Country,
HomePhone) VALUES ('[Param.1]', '[Param.2]', '[Param.3]',
'[Param.4]', '[Param.5]', '[Param.6]')

g) Test and Save in your training folder as InsertEmployeeQuery.


h) Create a new SQL Query: Server=Northwind, Mode=Command.
i) Click the Fixed Query tab and insert the following into the Query box:
UPDATE Employees SET LastName = '[Param.2]', FirstName =
'[Param.3]', Title = '[Param.4]', City = '[Param.5]', Country =
'[Param.6]', HomePhone = '[Param.7]' WHERE EmployeeID =
'[Param.1]'

2006 SAP Americas. All Rights Reserved.

Page 182

SAP xMII Training

j) Test and Save in your training folder as UpdateEmployeeQuery.


2. Create our web page:
a) Open a new page in Microsoft FrontPage.
b) Using the SAP xMII Object, insert an applet with the following
parameters:
Applet Name=Employees,
Width=640, Height=200,
Query Template=NorthwindEmployeeQuery,
Display Template=iGridGrid,
Set Parameters:
Parameter Name=SelectionEvent,
Parameter Value=populateFields.
See figure on next page.

2006 SAP Americas. All Rights Reserved.

Page 183

SAP xMII Training

c) Switch to the Code view, and insert the following (below the applet we
already inserted).
<FORM>
<INPUT TYPE="HIDDEN" ID="EmployeeID" name="EmployeeID">
<table border="0" cellpadding="1" cellspacing="1">
<tr>
<td>Last Name:</td>
<td><input id="LastName" name="LastName" size="20"></td>
</tr>
<tr>
<td>First Name:</td>
<td><input id="FirstName" name="FirstName" size="20"></td>
</tr>
<tr>
<td>Title:</td>
<td><input id="Title" name="Title" size="20"></td>
</tr>
<tr>
<td>City:</td>
<td><input id="City" name="City" size="20"></td>
</tr>
<tr>
2006 SAP Americas. All Rights Reserved.

Page 184

SAP xMII Training


<td>Country:</td>
<td><input id="Country" name="Country" size="20"></td>
</tr>
<tr>
<td>Home Phone:</td>
<td><input id="HomePhone" name="HomePhone" size="20"></td>
</tr>
<tr>
<td colspan=2><INPUT type="button" value="INSERT" id="btnInsert" name="btnInsert"
onClick="insertRecord();">
<INPUT type="button" value="CLEAR" id="btnClear" name="btnClear"
onClick="document.forms[0].reset();">
<INPUT type="button" value="UPDATE" id="btnUpdate" name="btnUpdate"
onClick="updateRecord();">
</td>
</tr>
</table>
</FORM>

d) Switch to the Design view, position the cursor at the bottom of the page
and using the SAP xMII Object insert the iCommand applet as follows:
Under Display Types choose Command,
Applet Name=InsertRecord,
Query Template=InsertEmployeeQuery.
See figure on next page.

2006 SAP Americas. All Rights Reserved.

Page 185

SAP xMII Training


e) Do the same for the Update Query: Applet Name=UpdateRecord, Query
Template=UpdateEmployeeQuery.

2006 SAP Americas. All Rights Reserved.

Page 186

SAP xMII Training


f) Enter the following functions into our HTML just before the <body>
prompt:
<SCRIPT LANGUAGE="JavaScript">
function populateFields() {
var EmployeeGrid = document.Employees.getGridObject();
var EmployeeID = EmployeeGrid.getSelectedCellValue(1);
var LastName = EmployeeGrid.getSelectedCellValue(2);
var FirstName = EmployeeGrid.getSelectedCellValue(3);
var Title = EmployeeGrid.getSelectedCellValue(4);
var City = EmployeeGrid.getSelectedCellValue(5);
var Country = EmployeeGrid.getSelectedCellValue(6);
var HomePhone = EmployeeGrid.getSelectedCellValue(7);
document.forms[0].EmployeeID.value = EmployeeID;
document.forms[0].LastName.value = LastName;
document.forms[0].FirstName.value = FirstName;
document.forms[0].Title.value = Title;
document.forms[0].City.value = City;
document.forms[0].Country.value = Country;
document.forms[0].HomePhone.value = HomePhone;
}
function insertRecord() {
var insertQuery = document.InsertRecord.getQueryObject();
insertQuery.setParam(1,document.forms[0].LastName.value);
insertQuery.setParam(2,document.forms[0].FirstName.value);
insertQuery.setParam(3,document.forms[0].Title.value);
insertQuery.setParam(4,document.forms[0].City.value);
insertQuery.setParam(5,document.forms[0].Country.value);
insertQuery.setParam(6,document.forms[0].HomePhone.value);
if(InsertRecord.executeCommand()) {
alert(Record successfully inserted.);
document.Employees.refresh();
}
else {
alert(Error inserting record. See the ServletExec.log for more details.);
}
}
function updateRecord() {
var selID = document.Employees.getGridObject().getSelectedCellValue(1);
if (selID != "") {
var updateQuery = document.UpdateRecord.getQueryObject();
updateQuery.setParam(1,document.forms[0].EmployeeID.value);
updateQuery.setParam(2,document.forms[0].LastName.value);
2006 SAP Americas. All Rights Reserved.

Page 187

SAP xMII Training


updateQuery.setParam(3,document.forms[0].FirstName.value);
updateQuery.setParam(4,document.forms[0].Title.value);
updateQuery.setParam(5,document.forms[0].City.value);
updateQuery.setParam(6,document.forms[0].Country.value);
updateQuery.setParam(7,document.forms[0].HomePhone.value);
if(UpdateRecord.executeCommand()) {
alert(Record successfully updated.);
document.Employees.refresh();
}
else {
alert(Error updating record. See the ServletExec.log for

more details.);
}
}
else {

alert(You must select an Employee!);


}
}
</script>

g) Save the page as iCommand.htm. Review the code and test the
webpage, which should look like this:

2006 SAP Americas. All Rights Reserved.

Page 188

SAP xMII Training

Enrichment

The following exercises will test the class comprehension of xMII functionality.
The instructor will guide the class through the exercises below when appropriate.

Exercise A Make a Connection


Purpose:
Make a connection to another datasource. Use this datasource in a hyperlink.
Procedure:
1) There is a SQL database on TrainingPC called CustomerData. Create a new
server to connect to this database.
2) Using this new connection, open a new web page and create a hyperlink
that will open a new page to display a list of customers.

2006 SAP Americas. All Rights Reserved.

Page 189

SAP xMII Training


Exercise B Webpages
Purpose
Practice using xMII to create queries and displays, generate applets, and
create webpages.

Procedure

Create a Tag Query. Server = InSQLOLEDB, Mode = History, Tags =


AssetUtil1, AssetUtil2, AssetUtil3. Save as AssetQuery.

Create a SQL Query. Server = PlasticResin, Mode = Query, Table =


MachineStatus, Columns = Machine, MaintainenceStatus, OperationalStatus.
Save as MachineQuery

Create a line chart to display the Asset tags. Save as AssetChart

Create a grid to display the all the columns from the query. Save as
MachineGrid

Create an Asset Utilization page (using the AssetQuery and AssetChart


templates for the applet). Save as AssetPage.htm

Create a Machine Status Page (using the MachineQuery and MachineGrid


templates for the applet). Save as OperatorPage.htm

2006 SAP Americas. All Rights Reserved.

Page 190

SAP xMII Training

Exercise C Applet / Webpage Creation


Part1
Purpose:
To explore the Custom Chart and its capabilities. To utilize the Parameters feature
in the query template.
Procedure:
1. Open the KPIQuery template that we have already created.
2. Change the filter expression currently KPIConfig.KPIName is equal to
Yield, we want to set it equal to Param.1. (Hint: use this syntax [Param.1])
3. Create a query to return just the KPI Names (Use SQL query, Server =
PlasticResin, Mode = Query, Table = KPIconfig).
4. Create a grid to display the KPI Names.
5. Using FrontPage and the SAP xMII Wizard create a webpage that looks
something like this:
The applet on the left uses the query and grid templates that we just
created, the applet on the right uses the KPIQuery and KPIChart that we
created in previous labs.

6. Save the webpage

2006 SAP Americas. All Rights Reserved.

Page 191

SAP xMII Training


Exercise C (continued) JavaScript
Part 2
Purpose:
Add JavaScript to a webpage that we created in the previous lab.
Task:
Add a selection event to our grid applet which will call a function to display the
requested information in the chart applet. When we select a KPI from the grid the
chart will display the data for that KPI.
Methods used:
getGridObject(), getChartObject(), getQueryObject(), getSelectedCellValue(int),
setParam(int, value), setTitle(string), refresh()
Procedure:
1. Add a SelectionEvent to our grid applet. The value will be the name of the
function that you will create.
2. Start your JavaScript block.
<SCRIPT Language="JavaScript">
3. Create a function.
function <name>() {
4. Create a variable to get the value from cell 1 of the selected row. (Use the
syntax: document.<applet name>.method.. Remember to end each of
your lines of code with a semi-colon).
var <variable name> =
5. Set Param.1 in the chart applet query template to the value from the
selected row (the variable that we just created).
6. Set the chart title to change with the selected KPI name.
7. Refresh the chart.
8. Remember to end you function with a curly brace }, and to end your
JavaScript block with </script>.

2006 SAP Americas. All Rights Reserved.

Page 192

SAP xMII Training


Exercise D Script Assistant
Purpose
The purpose of this lab is to utilize the xMII Script Assistant to generate javascript
for use on our Lighthammer applets.

Topics Covered
This lab will cover the following topic:

xMII Script Assistant

Procedure
1. Create a new SQL query with the following settings: Server = Northwind,
Mode = Query.
2. Under the SQL Query Details tab select the Customers table and the
following columns: CustomerID, CompanyName.

3. Test and Save in the training folder as CustIDQuery.


4. Create a new Grid template, keep all the default settings and save in the
training folder as DefaultGrid.

2006 SAP Americas. All Rights Reserved.

Page 193

SAP xMII Training


5. Create a new webpage with 2 applets on it. The Applet on the left will be a
grid containing the customer ID numbers and company names, name the
applet CustGrid. The applet on the right will display the order information
for the customer selected, name the applet OrdGrid. For the left applet use
the CustIDQuery and DefaultGrid for the right applet use CustOrderQuery
(already created, ask instructor for location) and DefaultGrid. Modify the
CustOrderQuery to return no data. Save as OrderInfoPage.htm - Your page
should look something like this:

We want to be able to click on a customer ID and populate the order information


grid with the order information for the selected customer. We need to write a
little javascript to do this. Follow the steps to create code using the Illuminator
Script Assistant.
6. From Microsoft FrontPage, Tools menu, choose xMII Script Assistant.

2006 SAP Americas. All Rights Reserved.

Page 194

SAP xMII Training


7. We need to create a Selection Event on the CustGrid applet. Under the
Target Applet drop-down choose CustGrid. Under the Target Event Dropdown choose Selected. The function name is created by the script
assistant.

We want to write a script to get the value from the first column of the selected
row (the customer ID) and set that value = Param.1 in the CustOrderQuery.
8. From the Applet drop-down choose CustGrid (we want to get the value from
this grid). From the Applet Method choose getGridObject(), and from the
Oject Method drop-down choose getSelectedCellValue(COLNUMBER). Click
the insert button. See figure on following page:

2006 SAP Americas. All Rights Reserved.

Page 195

SAP xMII Training


9. Since we want to get the value from column 1, edit the COLNUMBER to be 1.
10. Make this value a variable by adding var CID = in front of this line.

11. Now that we have the customer ID (variable CID), we want to set Param.1 in
the query part of the OrdGrid applet equal to it. Put the cursor on the next
line in the code window and from the drop-downs select the following:
Applet = OrdGrid, Applet Method = getQueryObject();, and Object Method =
setParam(INDEX, NEWVALUE). Click the Insert button.

12. Since we want to set Param 1, change INDEX to 1, and we are setting it equal
to the value from our customer grid (CID), so change NEWVALUE to CID.
2006 SAP Americas. All Rights Reserved.

Page 196

SAP xMII Training


13. Now refresh the OrdGrid applet: select OrdGrid from the Applet drop-down
and refresh(); from the Applet Method drop-down. Click the Insert button.

14. Click the Save Script button to save this script to our webpage.
15. Go to the HTML view of our webpage and notice the code the Script Assistant
inserted.
16. Save the page, open the page in a browser and test.

2006 SAP Americas. All Rights Reserved.

Page 197

SAP xMII Training

2006 SAP Americas. All Rights Reserved.

Page 198

SAP xMII Training

Exercise E Aggregate Query


Purpose
Topics Covered
This lab will cover the following topics

Aggregate Query Template

Procedure
1. Create a 3 new Tag queries with the following settings:
Query 1:

Query 2:

Query 3:

Server = PIUDS

Server = InSQLOLEDB

Server = Simulator

Mode = History

Mode = History

Mode = History

Tag = CDT158

Tag = TI-001

Tag = CylTemp1

Save As: PITempQuery

Save As: InSQLTempQuery

Save As: SimTempQuery

2. From the template editor select New and create an Aggregate query.

2006 SAP Americas. All Rights Reserved.

Page 199

SAP xMII Training


3. Set the following on the datasource tab, Server = AggregateConnector, Mode
= Query.

4. Under the Template Selection tab browse the Training folder and using the >
button select the PITempQuery, InSQLTempQuery, and SimTempQuery.
Choose an alias name if you want. These 3 templates should now appear in
the Aggregate Query Source Templates window. You can select up to 32
templates from which to aggregate data.

2006 SAP Americas. All Rights Reserved.

Page 200

SAP xMII Training


5. Choose the Aggregate Query Details tab. On this tab we will set a common
parameter for the 3 query templates.

6. From the Aggregate Query Source Param dropdown select Duration. The
aggregate query duration is defaulted to the last 60 minutes of data (just
like all queries).
7. From the Target Template dropdown we can choose *. This means we want
to do this for all the source queries.
8. From the Target Param dropdown select Duration. Click the Add button.
This will set the duration parameter in all the source queries to whatever the
Duration is set to in the aggregate query.

9. Test your query.


10. Display the data on a line chart. Put the applet on a webpage.

2006 SAP Americas. All Rights Reserved.

Page 201

SAP xMII Training

2006 SAP Americas. All Rights Reserved.

Page 202

SAP xMII Training

Exercise F - Metrics and Monitoring


Purpose
The purpose of this lab is to explore xMIIs Active Portal features.

Topics Covered
This lab will cover the following topics

Creating datasets.

Using the Metric Editor.

Running metrics with scheduled tasks.

Setting up monitors.

Procedure
1. Create 2 new SQL queries with the following parameters:
Query 1 a. Server = Plastic Resin
b. Mode = Query
c. Selected Tables = KPIData
d. Selected Columns = All (TimeRecorded, KPIName, KPIValue,
KPISource)
e. Save AS KPIQuery1
Query 2 Same as query 1 with the following additions:
a. Filter Expression = KPIData.KPIName LIKE [Param.1] AND
KPIData.KPISource LIKE [Param.2]
b. Parameter 1 = %
c. Parameter 2 = %
d. Save AS KPIParamQuery
2. From the following URL: http://localhost<computer
name>/Lighthammer/Menu.jsp, select Metric/AlertServices > Catagories
icon.

2006 SAP Americas. All Rights Reserved.

Page 203

SAP xMII Training


3. Create a new category called Training by entering a category name and
description and clicking the Add New button.

4. Back to the Metric/Alert Services Menu, choose Datasets.


- Datasets are query templates plus parameters
5. Click the button to select a query source.
6. Find our KPIParamQuery in the training folder and choose it.
7. In the name value pairs box scroll down, choose Param.1 and click the
Set Query Parameter 1 button. Scroll down more and pick Param.2 and
click the Set Query Parameter 2 button. Close the window.

2006 SAP Americas. All Rights Reserved.

Page 204

SAP xMII Training


8. Change the Query Parameter value for Param.1 to OEE and the Query
Parameter value for Param.2 to Line1.
9. Name the Dataset Line1OEE, Description = OEE calculation for Line 1.
10. Click Add New.

2006 SAP Americas. All Rights Reserved.

Page 205

SAP xMII Training

2006 SAP Americas. All Rights Reserved.

Page 206

SAP xMII Training


Creating Metrics
1. Now we will create Metrics, from the Metric/Alert Services Menu, select
Metrics.

2. Choose the Training category, leave the following parameters at their


default values: Range Limits, Active?, Historize?. Set the Scan Group to 15
min role to Administrators.
3. Source Type is Query Template, click the button on the Source Item ID
line to choose our query template.

2006 SAP Americas. All Rights Reserved.

Page 207

SAP xMII Training


4. Find the InlineQuery in the Training folder, and click the Load Sample
Data button.

5. Our first metric will just be the line 1 speed. Click the L1Speed column,
L1Speed should appear in our expression window. Close the Metric
Configuration Window.

2006 SAP Americas. All Rights Reserved.

Page 208

SAP xMII Training


6. Enter the Metric Name: L1Speed and Description: Line 1 Speed and click the
Add New button.
7. Refresh the Metrics page, and choose the Training category, create the next
metric using the same query template, leave the following parameters at
their default values: Range Limits, Active?, Historize?. Set the role to
Administrators and Scan Group to 15min.
8. For this metric we will calculate an average for the 4 line speeds. In the
Metric Configuration Window create the expression:

Close the window


9. Name the metric AvgSpeed, Description: Average Line Speed.
10. Click the Add New button.
11. For our 3rd metric, refresh the Metric Editor page, and choose the Training
category (you should see the 2 metrics we already created). Leave the
following parameters at their default values: Range Limits, Active?,
Historize. Set the Scan Group to 15min and the role to Administrators.
12. Make sure Source Type is Query Template, click the button on the
Source Item ID line to choose the KPIQuery1 that we created.
Note: this query returns a list of KPI names and values for many different
locations. By using the Row Match Rule buttons we will be able to filter
this query.

2006 SAP Americas. All Rights Reserved.

Page 209

SAP xMII Training


13. Click the KPIValue heading in the data window to enter KPIValue in the
expression window. This will define our metric value.

14. The metric we want to define is the Capacity Utilization for Malibu. Scroll
down in the Data Window and choose CapacityUtilization and click the
Set Row Match Rule 1 button.

2006 SAP Americas. All Rights Reserved.

Page 210

SAP xMII Training


15. Choose Malibu and click the Set Row Match Rule 2 button. Close the
window.

16. Name the metric MalibuCU and give it a description.


17. Click the Add New button.
18. For our last metric, refresh the Metric Editor page, and choose the Training
category. Leave the following parameters at their default values: Range
Limits, Active?, Historize?. Set the Scan Group to 15min and the role to
Administrators.
19. Make sure Source Type is Dataset, click the button on the Source Item
ID line to choose the Dataset that we created.
20. In the Metric Configuration window we should see the Dataset that we
created (Line1OEE). Select the dataset and click Load Sample Data.

21. Our metric will be the KPI value, so click the KPIValue header so it appears
in the expression window. Close the window.
22. Name the metric Line1OEE and give it a description.
23. Click the Add New button.

2006 SAP Americas. All Rights Reserved.

Page 211

SAP xMII Training


Prepare to run metrics
1. Open Windows Explorer.
2. Go to C:\Lighthammer\Illuminator\ActivePortal\TaskScheduler. (done by
instructor)

3. Copy and paste these 6 files into the Scheduled Tasks folder under Control
Panel.
4. From the Start Menu go to Control Panel, Scheduled Tasks, right click and
open in a window.
5. Right click the Active Portal Monitoring 15MIN file and choose properties.
6. Click the Set Password Button the password for these computers is
Illuminator.
7. Follow the same procedure for the Alert Mailer file.

2006 SAP Americas. All Rights Reserved.

Page 212

SAP xMII Training


Set up Monitors
1. Log into xMII (Admin/Admin).
2. Under Metric/Alert Services choose Monitors.
3. In the Category window select Training.
4. In the metric window choose L1Speed (we will be monitoring our line 1
speed).

5. Enter a description, check Active? and Requires ACK?, match type =


number, match condition = less than, match value = 1000.
6. Enter an Alert String The speed is {Current Value} This is too low.
To enter {Current Value} into the string use the Alert Token drop-down.

2006 SAP Americas. All Rights Reserved.

Page 213

SAP xMII Training

7. Click the Add New button.


8. Login to xMII:
http://<computername>/Lighthammer
9. From your navigation tree, select My Illuminator, then Alert
Manager.
10. Choose Training from the category window. You should see the Line 1
Speed metric appear in the Available for Subscription window.
11. Choose Line 1 Speed, uncheck E-mail notification and click the Add -> button.
12. From your navigation tree, select My Illuminator, then Alert Log.
13. You should see your Alert messages appear (you may have to wait for
your scheduled task to run prior to seeing alerts)

2006 SAP Americas. All Rights Reserved.

Page 214

SAP xMII Training


14. We should be able to view our Line 1 Speed alert.

15. Create another alert and test.

2006 SAP Americas. All Rights Reserved.

Page 215

SAP xMII Training

2006 SAP Americas. All Rights Reserved.

Page 216

You might also like