WebFOCUS Newsletter February 2004 - Presetting Objects on a Maintain Form With JavaScript

Have you ever wanted to dynamically change certain aspects on your Maintain form? Things like changing the starting displayed row of an HTML Table or changing the headings of a grid? While it is easy to do many things using JavaScript, when the Winform refreshes most of these changes disappear.

The simple technique described in this article changes all of that.

This technique uses the form’s onload function. Every time the form is displayed or refreshed, the code is executed. This guarantees that the display is always correct. I will show you the code for the two cases that I mentioned. First, let’s create and associate the JavaScript file.

To create and view JavaScript files in the desktop, you must first add them to your Folder. To do this:

1. Right-click on the folder name and select properties.

2. Select Edit Filters

3. Click Add New File Type Filter(s).

4. Highlight Jscript Script file off list.

5. Click OK twice.

Now, when you right-click on the name of the folder and select New, Jscript Script file is available. Create a new JavaScript file and name it whatever you want. Include the following code:

var OriginalOnload = document.body.onload; 
document.body.onload = LoadFunct;
//assign your custom onload

function LoadFunct() {
if (OriginalOnload) OriginalOnload ();  
//first run the OriginalOnload
// Custom onload code can now follow

}

You are now ready to add application-specific code. We will look at the two cases I mentioned earlier. The first case is dynamically changing the headings in a grid.

Changing Headings in a Grid

To change the heading of a grid, you must first have the value to which you want to change the heading. To get this, you can compute it to a field on the form. This field can be made invisible.

The following code takes a value from a field named X and makes it the heading for Column 1, in a grid named Grid1 on a form named Form1. The heading for Column 2 is hard coded as ColHead2.

var OriginalOnload  = document.body.onload; 
document.body.onload = LoadFunct;
//assign your custom onload

function LoadFunct() {
if (OriginalOnload) OriginalOnload ();  
//first run the OriginalOnload
// Custom onload code can now follow
Form1.Grid1.QuickSetText
   (0, -1,document.Form1.X_Edit.value);
Form1.Grid1.QuickSetText(1, -1, "ColHead2");
}

Scrolling an HTML Table

If a user makes a selection off an HTMLTable, leaves and then returns to a form, you may want the HTMLTable to remember what row was selected and redisplay the HTMLTable with that row on top. As with the previous example, we have to store the selected row in a field on the form, but that field does not need to be visible.

If you are using a Clicklink trigger to perform a function from the HTMLTable, then you can get the row number by either using JavaScript:

Document.formname.tablename_ClickRow.value;

Or Maintain:

Compute row1 = form.htmltable.clickrow;

Then use the following code to scroll to the desired row:

var OriginalOnload  = document.body.onload; 

document.body.onload = LoadFunct;
//assign your custom onload

function LoadFunct() {
if (OriginalOnload) OriginalOnload ();  
//first run the OriginalOnload
// Custom onload code can now follow
val = document.Form1.Row1_Edit.value
var TableDiv = document.getElementById("HTMLTable1");
var TableObj;
for(i=0; i<TableDiv.children.length; i++)
{
if(TableDiv.children[i].tagName == "TABLE")
{
TableObj = TableDiv.children[i];
break;
}
}

TableObj.rows(val-1).scrollIntoView(true);

}

This example grabs the value of the field Row1, and scrolls the HTMLTable so it is the first displayed row.

Associating a JavaScript File With a Form

Once you’ve created your JavaScript file, the next thing you must do is add it to your project. Highlight it and press the Add to Project button or just right-click it and do the same.

The next step requires that you be inside the Maintain Development Environment (MDE).

1. Enter the MDE.

2. Bring up the form with which you want to associate the script.

3. Restore the form so it’s not maximized and so that you can see the Explorer window within the MDE workspace.

4. Drag he JavaScript file onto the form. Developer Studio displays the message: “File will be linked to this form.” Click OK.

5. That’s it! When the form is displayed (or redisplayed) the JavaScript is activated and the changes occur.

If for some reason the file won’t associate with the form, there may be an error with the script. If you make changes to the script file, you may have to delete it from the form, and re-associate it. You can easily remove it by clicking on the + by the form name, positioning the cursor on the name of the script file and pressing delete. Associated JavaScript files are imported into WebFOCUS Maintain forms during the deployment process.

Conclusion

This simple and powerful technique replaces the old method of having to place a JavaScript trigger on a buttons FOCUS trigger, and making that the first item in the Tab order. It is easy to use, and it is very reliable. I hope you all find creative ways of adding it to your applications.