Notes Domino 6 added a new design element to allow layers to be created on a Domino form. Layers work for both the Notes 6 client and web browser clients. Layers are an ideal way to position design elements on the form. They are a replacement for layout regions. When used in a web browser client layers can be manipulated via JavaScript. One example of this is to hide and display a layer by changing the style properties. This tip will demonstrate how to use layers to let one Domino form have two different input areas. The user can toggle back and forth between the input areas without having to repost any information to the Domino server.

Note: This tip and the demonstration will only work with an Internet Explorer browser. Netscape and other browsers will not work.

Click here to see a demonstration of this tip!

To learn more about the new features of Notes Domino 6 check out TLCC's highly acclaimed Notes Domino 6 Application Development Update course!!!

This comprehensive course will make you a Release 6 expert in a mere 2 1/2 days. Easy, convenient and cost-effective, it will thoroughly prepare you for the Notes Domino 6 Application Development Update Exam required to achieve Notes Domino 6 CLP status.

Click here for more information on TLCC's Notes Domino 6 Application Development Update course.

To learn more about how to use JavaScript in Notes Domino 6 check out TLCC's JavaScript in Notes Domino 6 course.

Click here for more information on TLCC's JavaScript in Notes Domino 6 course.


Using Layers to Display Parts of a Form

To understand the demonstration let's first look at the design of the form. On the form there are two layers, Personal_Layer and Comments_Layer positioned on top of one another. You can use the Layer Tree tool in Domino Designer to view the two layers.



Each layer has a button, [Enter Comments] and [Enter Personal Information] , that uses JavaScript to control the visibility of the layer. By changing the visibility of one layer from hidden to visible you can get the effect of dynamic interfaces without having to reload the page. Below are the DIV tags if you do a View Source of the HTML generated from the form:
div id="Personal_Layer" style="position: absolute; top: 84px; left: 32px; z-index: 2; width: 309px; height: 145px; background-color: #00FF00; ">
<div id="Comments_Layer" style="position: absolute; top: 84px; left: 32px; z-index: 1; width: 309px; height: 145px; background-color: #FFFF00; ">

You see that there is no visibility attribute in either tag because when they are loaded they take the default visibility attribute which is visible. We can still manage that attribute by following the scripting syntax for CSS Attributes above.

object.style.visibility = sVisibility

First we need to get the object, which is the layer. Since the layer is contained in the document object we need to start there. Next, use the all property of the document object to get a reference to all the objects in the document:
document.all

Next, specify which document object to work with. Use the relative name of the layer to be manipulated.

The relative name is defined in the HTML properties of the layer object.


For example, to specify the Personal_Layer layer object use the following code:
document.all.Personal_Layer

Now change the visibility attribute for this layer. Since the visibility attribute is a property of the CSS attributes of the DIV tag, reference the style attribute of the layer object. For example, to hide a layer use the following code:
document.all.Personal_Layer.style.visibility="hidden"

In the demonstration the button code modifies the visibility of the current layer and the layer that you want to display:
Switch to Comments
Switch to Personal Info