Real-World Example 2: Dialog Boxes and window. opener on the Web

Real World Example 2 Dialog Boxes and window opener on the Web

Developing applications on the Web is certainly challenging. Prompting the user for input via dialog boxes can be even more daunting unless you know how the window.opener property of the window object works in JavaScript. Typically, Web programmers aren't so focused on working with forms as Domino Web developers are, so there's not a lot of information about this available. In fact, most of the JavaScript books on the computer shelf today hardly mention the window.opener property. Why should they, when it's hardly used by most?

However, because Domino is a forms-centric development environment, the window.opener JavaScript property gives full meaning to the term interactive dialog box. In Domino, you can easily use the JavaScript window.opener property to return information from data input in a field in a dialog box document back to the originating document that opened the dialog box document. This is known as the parent document (the opener), whereas the dialog box document is considered to be the child document. By having this relationship between parent and child, information can be exchanged from one window to the other, and vice versa, using JavaScript in this way.

Don't make the mistake of thinking that window. open () is the same thing ”it's not. window.open() opens a new browser window without the parent-child relationship. Without the parent-child relationship, each window is treated individually and doesn't share information via the window.opener property.

The window.opener property is excellent for writing variables and field data exchanges to and from parent-child documents. Moreover, just for clarification , when the term document is used in this context, it refers to the document loaded in either the parent or the child window objects. Let's take a look at how to use the window.opener property.

You can refer to window.opener as self.opener , parent.opener , and top.opener because it is a true window object property and can be referenced just like a window object. In Domino, it is used in the context as shown in Listing 17.11.

Listing 17.11 Calling the window.opener Property

//To get a value from a field on the parent in the child document
document.forms["child"].currentTaskName.value =

window.opener.

document.forms ["parent"].

TaskNameDefault.value
//To set a value in a field on the parent from a field on the child document

window.opener.

document.forms["parent"].TaskNameDefault.value = document.forms["child"].

selectedTaskName.value

Let's put this code to work with the window.open property to open a dialog box child from a parent document. Figure 17.12 shows the parent form in Designer 6. This form provides the call to the dialogBox() function, as shown in the JSHeader event.

Figure 17.12. The JSExample2 form showing the dialogBox() function.

The reusable dialogBox() function is a great little utility that opens child windows for you on the fly. This could be included in your jsutils.js script library and used throughout your application. In this example, the function opens another window called childDialogBox with the (child) form loaded with field values from the parent JSExample2 document. The (child) document actually stores the code that gets the values from the parent fields. When the (child) form is loaded, the setFields() function is called in the onLoad event, as shown in Figure 17.13.

Figure 17.13. The setFields() function is called in the onLoad event of the (child) form.

The setFields() function is the main function that gets the field values from the parent and then sets all the fields on the (child) document with the values from the parent. Let's take a closer look at the code in Listing 17.12.

Listing 17.12 The setFields() JavaScript Function

1. function setFields() {
2. //Set the fields on the child form with the values from the parent
3. document.forms[0].currentCouponItem.value = window.opener.document.forms[0].

pCouponItem.value;
4. document.forms[0].currentCouponNum.value = window.opener.document.forms[0].pCouponNum.

value;
5. document.forms[0].currentCouponAmount.value = window.opener.document.forms[0].

pCouponAmount.value;
6. document.forms[0].currentItem.value = window.opener.document.forms[0].selectedItem.

value;
7. document.forms[0].newCouponAmount.value = window.opener.document.forms[0].ItemPrice.

value;

8. //Display the correct coupon graphic for whatever produce item is selected
9. var pick = window.opener.document.forms[0].selectedItem.value;
10. if ( pick == "Apples" ) {
11. showCouponPic('applescoupon.gif');
12. } else if ( pick == "Bananas" ) {
13. showCouponPic('bananascoupon.gif');
14. } else if ( pick == "Mangos" ) {
15. showCouponPic('mangoscoupon.gif');
16. } else if ( pick == "Avocados" ) {
17. showCouponPic('avocadoscoupon.gif');
18. } else if ( pick == "Onions" ) {
19. showCouponPic('onionscoupon.gif');
20. } else if ( pick == "Green Beans" ) {
21. showCouponPic('gbeanscoupon.gif');
22. } else if ( pick == "Garlic Braid" ) {
23. showCouponPic('garliccoupon.gif');
24. } else {
25. showCouponPic('spacer.gif');
26. }

27. //Set the fields on the child form based on the values from the parent
28. if ( document.forms[0].currentItem.value == "Apples" ) {
 i. document.forms[0].currentItemName.value = "Cortland Apples in Tote Bag";
29. } else if ( document.forms[0].currentItem.value == "Bananas" ) {
 i. document.forms[0].currentItemName.value = "Jamaican Bananas";
30. } else if ( document.forms[0].currentItem.value == "Mangos" ) {
 i. document.forms[0].currentItemName.value = "Juicy Sweet Mangos";
31. } else if ( document.forms[0].currentItem.value == "Avocados" ) {
 i. document.forms[0].currentItemName.value = "Green Jumbo Avocados";
32. } else if ( document.forms[0].currentItem.value == "Onions" ) {
 i. document.forms[0].currentItemName.value = "Farm Fresh Onion Pack";
33. } else if ( document.forms[0].currentItem.value == "Green Beans" ) {
 i. document.forms[0].currentItemName.value = "Morning Picked Vine Green

Beans";
34. } else if ( document.forms[0].currentItem.value == "Garlic Braid" ) {
 i. document.forms[0].currentItemName.value = "Home Grown Value Pack Garlic

Braid";
35. }
36. }

Lines 3 “7 set up the child document with the appropriate values from the parent so that it can present specific information based on those results to the user. In this example, the script needs the default values from the parent so that it can display the correct coupon graphic for the produce item selected in the parent document. Obviously, if the user selects Bananas, you will want the banana coupon to display, and so forth. Lines 8 “26 provide the code to swap out the image displayed based on the item selected. This code also relies on the global variables set in the JSHeader event on the (child) form, as shown in Listing 17.13.

Listing 17.13 The Global Variables Declared in the JSHeader Event on the (child) Form and Also Used by the setFields() JavaScript Function

//global vars to preload the coupon images
var applespic = new Image();
var bananaspic = new Image();
var mangospic = new Image();
var avocadospic = new Image();
var onionspic = new Image();
var gbeanspic = new Image();
var garlicpic = new Image();
var spacerpic = new Image();

spacer.src="spacer.gif";
applespic.src="applescoupon.gif";
bananaspic.src="bananascoupon.gif";
mangospic.src="mangoscoupon.gif";
avocadospic.src="avocadoscoupon.gif";
oinonspic.src="onionscoupon.gif";
gbeanspic.src="gbeanscoupon.gif";
garlicpic.src="garliccoupon.gif";

After the global variables are declared, the setFields() function can use the variables and refer to them. The setFields() function also calls the showCouponPic() function, which uses the global variables as well. In lines 8 “26 of Listing 17.12, the showCouponPic() function tells the form which graphic to display based on the selected item in the parent. The images have been all preloaded, so form load and image display times should be very quick.

Lines 28 “36 in Listing 17.12 set the currentItemName field value on the (child) form yet again, based on the selected item in the parent. Figure 17.14 shows the parent form on the Web with selections made in each of the produce category and produce item fields. When a produce item is selected, its details are dynamically displayed.

Figure 17.14. The JSExample2 (parent) form as displayed on the Web.

Notice the Get Coupon button to the left of the item details text field. This button is used to call the (child) form using the dialogBox() function in the onClick event of the button. This is shown in Figure 17.15.

Figure 17.15. Calling the dialogBox() function from the parent form in the Get Coupon button onClick event.

After the button is selected, the (child) document is displayed in a new window with its field value defaults already set based on the item selected in the parent, as well as the appropriate coupon graphic. Figure 17.16 shows the details for the selected item, Avocados, set in the (child) document.

Figure 17.16. Displaying the (child) document in a new window after the Get Coupon button is selected on the parent document.

Now that the (child) document is set with the item values for the coupon the user wants to retrieve, all that is left is to print the coupon and return the coupon details to the parent by way of selecting the Retrieve and Print button on the (child) document. This button calls the retrieveCoupon() function in its onClick event, as shown in Figure 17.17.

Figure 17.17. The Retrieve and Print button on the (child) form calls the retrieveCoupon() function to set fields on the parent document.

This function sets the coupon values on the parent document from those values on the (child) document. Listing 17.14 shows the retrieveCoupon() function code.

Listing 17.14 The retrieveCoupon() Function Called from the Retrieve and Print Button onClick Event in the Child Document

1. function retrieveCoupon() {
 a. window.opener.document.forms[0].pCouponNum.value = document.forms[0].newCouponNum.

value;
 b. window.opener.document.forms[0].pCouponItem.value = document.forms[0].

currentItemName.value;
 c. window.opener.document.forms[0].pCouponAmount.value = parseFloat(document.

forms[0].newCouponAmount.value);
 d. window.opener.document.forms[0].pExpDate.value = document.forms[0].currentExpDate.

value;
 e. self.print();
 f. self.close();
2. }

Lines 1a “1 set the field values in the parent document with those in the (child) document. Line 1e prints the coupon (child) document and then closes the (child) window. Figure 17.18 shows the parent document with the newly updated coupon values from its child document.

Figure 17.18. Returning the coupon field values in the child document to its parent document.

You'll agree that the window.opener property is a very powerful tool for Web developers where the traditional Domino @DialogBox @Functions aren't available. You can now see how easy it is to set and get field values from parent and child windows and swap the values in each.