Playing with Layers

I've used layers while working with DHTML but haven't played with them much in Notes. After reading Chris Blatnick's It's Got Layers...Cascading Menus in the Notes Client I started thinking about how I could apply them in my designs. The first thing that came to mind was replacing sections that contain static or computed information.

A form I'm working on at the moment has two such fields: docHistory and commentHistory. Both fields are updated in the QuerySave event. My original design had them in a section at the bottom of the form. Wouldn't it be nice if the user's could click a hotspot instead of scrolling to the end of the form and expanding the section?

The first thing I did was create a layer to hold each field. I then created a one column, 2 row table in each layer; entered a text heading in the first row and placed the field in the second row.

Next, I created two hidden text fields: docState and commentState, both having a default value of "0". I modified the respective Hide/When properties of the table elements to use docState="0" and commentState="0". I also checked off all the 'Hide when in edit mode' properties as I only want the layer content displayed when the document is in read mode.

The next step was to create two action hotspots to set the docState and commentState fields. Instead of icon graphics I used two Wingding characters, based on a tip I came across in Lee Powell's eView article Generate Dynamic Tables with Notes formulas and other valuable UI tricks.

Positioning layers is a bit tricky, unlike DHTML, in the Notes client you can't access and change their xpos, ypos properties. Discovered the simplest thing to do is place them where I want them on the form and then set all their properties to auto. This automatically positions them relative to their anchor and also sizes them according to their content.





If they overlap in the designer you can select Layer->Hide.




The last step was to write some code to actually hide or show the layers. I wrote the following static subroutine as a Form-Global

Edit: modified code to eliminate calls to Global references

Static Sub showAndHideLayer(stateFld$)
'-- Show or Hide a layer
'--   stateFld$ - name of the field referenced by the layer's hide formula
'--
Dim ws as New NotesUIWorkspace
Dim uidoc as NotesUIDocument
Dim doc As NotesDocument
Dim layers List As String
Dim layerState$

If Not ( Iselement(layers(stateFld$)) ) Then
'-- first time user clicked the show/hide icon for this layer
layers(stateFld$) = "0"
End If

Set uidoc = ws.CurrentDocument
Set doc = ws.CurrentDocument.Document
layerState$ = layers(stateFld$)

'-- change the layers display state 1=show 0=hide
If(layerState$ = "0") Then
Call doc.ReplaceItemValue(stateFld$,"1")
Else
Call doc.ReplaceItemValue(stateFld$,"0")
End If

'-- save the layers new state
layers(stateFld$) = doc.GetItemValue(stateFld$)(0)

Call uidoc.RefreshHideFormulas
End Sub

The subroutine is static to ensure the layer states will be maintained between user clicks. I used a List to store the values in case I want to add more layer hotspots to the form.

After that I just needed to add the calling code to the appropriate hotspots:

showAndHideLayers("docState")  and showAndHideLayers("commentState")

On clicking the little book icon, document readers now see:

A second click hides the layer.

It took me a few hours to get everything set up and working correctly; the positioning drove me nuts for a bit, I initially had the anchors laid out nicely at the bottom of the form with labels but the layers displayed relative to the anchor placement and the anchor placement appeared to be relative to the form top, left coordinates. The other obstacle was maintaining the state of the layers without actually editing/saving the form; it was then I remembered the static keyword from my Basic days. Worked like a charm :)