IBM Rational HATS – Example



IBM Rational HATS – Example

How to use the HATS text replacement function to display selectable pop-up lists in a HATS default transformation.

WD Flynn - ISSR

9/18/ 2009

Note: This document is intended for those with a functional knowledge of IBM Rational Host Access Transformation Services (HATS).

This example is taken from code currently running in a HATS customer production environment. It was developed by myself and one of the customer’s web developers.

Overview:

HATS provides a variety of tools for managing the look and feel of the default host transformation. The most common practice is to use Global Rules to render an input field in the default transformation as a drop down list or pop-up window. You may encounter a situation where you want to provide a selection list for an input field, or set of input fields where you do not directly affect the input field itself. The reasons for this could include but are not limited to the following:

1. The experienced “heads down” users do not want the function flow affected by an input field rendered as something different.

2. Custom pop-up lists with supporting text and instructions are required.

3. Custom pop-up lists must dynamically use a remote resource like a data base to generate the selection list options.

4. The links to the pop-up lists should be out of the tab list so as not to change the flow of the screen.

In this example we will show a simple way to use text replacement to create links to custom selectable pop-up lists. The HATS project used in this example will be provided as an attachment.

So what does it look like?

This example uses the zSeries host we commonly use in a lot of our demonstrations and presentations. We will use text replacement to add a pop-selection list to the following 3270 screen:

[pic]

Interesting Note: I have found that when you are inserting green screen images into a document like this the Debug Terminal Emulator gives a better and clearer image than the main terminal emulator in HATS.

In this screen we want to create a link from the word “TRANSACTION:” that will pop up a window with a selection list of the proper transaction codes.

The default transaction of this screen with text replacement will be as follows:

[pic]

This is the default transformation of the screen. Notice that the word “TRANSACTION:” has been changed to a link through text replacement.

Selecting the link yields the following pop-up:

[pic]

This is a list of valid codes for the transaction field. The pop-up also shows the active input control from the HATS default transformation which is in_901_4. This is where the selected data will go.

Note: The active input control, in_901_4, is just there for learning purposes. Your end user will not be interested in this.

Select “File Browse” and the pop-up will close leaving you with the following:

[pic]

In this example the pop-up will place the data wherever the cursor is in the HATS transformation. The user needs to make sure they have their cursor on the “TRANSACTION” field when they select the link to bring up the pop-up. If the cursor is on the “NUMBER” field then the result will be placed in the number field.

You can test his out in the project. If I place my cursor on the “NUMBER” field and then invoke the pop-up I would see the following:

[pic]

Note that the active HATS input field, in_913_6, is different. Any selection from this list will now be placed in the “NUMBER” field which is probably not what you want to do.

How does this work?

The process is fairly straight forward and consists of the following steps:

1. Text replacement is used to replace a key word on a screen with a link to a pop-up.

2. The link runs a JavaScript in the HATS template the brings up the pop-up which is a jsp.

3. The link passes parameters to the pop-up. The most important is the active field in the hats transformation. This is captured during the onMouseOver event in the link.

4. The pop-up uses the window.opener function to set the input control in the HATS transformation with selected data.

5. The pop-up closes after the selection is made.

6. The link uses tabindex=”-1” to make sure the link does not affect the tabbing order of the screen.

Setting up Text Replacement:

In this example the text replacement is as follows:

[pic]

Key Elements of the link:

TRANSACTION:

The onMouseOver event is important. This is where the active element in the HATS transformation is captured and saved in a variable called hotlinkTarget. The link cannot be tabbed to so you must mouse over it before you can click it. The variable hotlinkTarget is defined in the HATS template.

TRANSACTION:

The JavaScript popupCodeTableWindow is in the HATS template. It displays the table displayPopUpTable.jsp and passes two parameters. The first is the “title” which is set to “Functions” and the second is “fld” which is set to the value of hotlinkTarget.

Passing parameters to the pop-up jsp is important. You might want the jsp to use passed parameters to search a database or other external resource.

TRANSACTION:

Setting the tab index is important if you do not want the user to tab to the link. This is usually the case because experienced users do not want the tabbing order of a screen they are very comfortable with to change.

The HATS Template (IBM_Rational_HATS.jsp):

This is the code inserted at the top pf the HATS template to support the text replacement links.

var codeTableWindow;

function popupCodeTableWindow(url){

codeTableWindow = window.open(url,'codeTableWindow','height=300,width=300,toolbar=no,menubar=no,location=no,status=no,scrollbars=1');

// codeTableWindow.focus();

}

var hotlinkTarget=''; // global variable that stores the name of the field that is the target of the codetable hotlink; maintained by mouseover event in codetable's anchor tag

The Pop-up JSP (displayPopUpTable.jsp):

This is a portion of the code from the pop-up that shows an element in the selection list.

INQY

File Inquiry

You can see how the window.opener function is used to set the field back in the HATS transformation.

This is where the title is used from the passed parameter “title”.

Note: This pop-up is a jsp and could query a database and dynamically build the selection list. This is actually how it is currently being run in the customer environment.

Conclusion:

I hope you found this technique interesting and useful. It represents one way we can use text replacement to add functionality that can make the end user more productive while improving quality and consistency.

................
................

In order to avoid copyright disputes, this page is only a partial summary.

Google Online Preview   Download