We are about to convert an exisiting Client application to be web enabled. I want to make use of Layers, as the main form in the application has a lot of fields that refresh the hide/when formulas of other fields.
Our set up will be an R6.5 server that is used for serving the web pages to users on IE 6. All clients will remain as R5 that access R5 servers.
There will be a Client Main form and a Web Main form. I will only be using layers on the web main form that is accessed via IE.
Is this set up possible?
My main aim is to stop the pages being refreshed from the server each time a keyword is changed, so I see layers as being the ideal solution.
Subject: Warning: Long (was RE: Layers in R6 and R5 in a Browser)
To Notes users: text in green is marked as passthru HTML
Except that you still need to do the DHTML thing if you’re not coming back to the server. Layers are simply a mechanism – if you rely on formulas for hiding/showing layers, then you still have to come back to the server to evaluate the formulas, the same as you’d do with hide-whens in R5. All Designer layers give you is the automation of the
tag creation (and their value on the web is, well, let’s just say that I find HTML easier to wrestle with; but they’re lovely in the Notes client) – you still need to show/hide them all by yourself.
DHTML at this level is the proverbial single serving of torte. We’re not talking about the wholesale redrawing of the web page; there is room neither for fear nor loathing.
An HTML layer (
) can have any of a number of style properties, but all you need to be concerned with is the “display” property. When you don’t specify anything at all, that is, if the
is unstyled, it is just a “box of stuff” on the web page (and you can’t see by inspecting the displayed page where the box begins and ends). The box runs from margin to margin across the page (or table cell, or whatever may be containing it), and nothing else can display alongside it. That is what is called “block” display. So this code:
This is the first
This is the second
This is the third
will display like this:
This is the first
This is the second
This is the third
For Notes users, the approximate equivalent is:
This is the first
This is the second
This is the third
If you set the style of those
s to “display: none”, they will disappear altogether. (Flipping the visibility property to hidden hides the text, but it keeps the space open for them. These next sequences have the same three
s, but I’m hiding the second one. The first example uses this method to hide:
...
This is the first
This is the second
This is the third
The second example uses this:
...
This is the first
This is the second
This is the third
Notice that there is no space reserved for the second line in the “display: none” sample. (You can view the source in your browser to verify what’s going on.) And now for the “dynamic” part. In any reasonably modern browser, you can use the DOM method “getElementById(‘idString’)” to get a handle on the thing you’re trying to change.
This button will make the second line in the example above (the third set) visible: Show 2
The code for that button (in the onclick) is simply this:
(I’ve also added “return false” to the code to prevent the form from trying to submit in some browsers, whose default behaviour is to use any button as the submit button if it is the only button appearing between tags.)
Your problem is only very slightly more complex. You need three
s, each wrapping a field and it’s label. Only the lines actually containing the HTML need to be marked as passthru HTML:
A blurb about the first field: [The First Field]
A blurb about the second field: [The Second Field]
A blurb about the third field: [The Third Field]
The label/field line is whatever you’d normally use in Designer. Just remember to mark the HTML lines as passthru.
The computed text will determine the visibility of each field on open. The formulas would be something like this:
When the form is first opened, all of the fields are hidden. Once the document has been saved, the relevant field will be displayed when the document is opened (assuming it can be in your application). That handles the document open condition. Now you need a way to dynamically display a single field. Notice the way I’ve named the
elements – they have the same name, but end in _0, _1, and _2. That makes them easy to address in JavaScript from the “driving” field.
You say there are three choices to select from, and if the user can only select one, then the driving field has to be either a is easiest to deal with, since it has a selectedIndex property. Assuming you know the options in the field and the order they come in (guaranteed if you’ve used “Enter choices, one per line”), then it’s easy to map the values to the numbers. If the first value is selected, then the selectedIndex will return zero; if the second, one; and if the third, two. The function just has to use the selectedIndex to determine which field to make visible:
function showField() {
var index = document.forms[0].SelectFieldName.selectedIndex;
for (i=0;i<=2;i++) {
document.getElementById('fieldOption_' + i).style.display = (i == index)? 'block':'none';
}
}
Okay, that longish line probably needs some explanation if JavaScript is not your strong suit. The stuff after the equals sign (the assignment operator) is a short-cut version of an if-else statement. The line translates directly into formula language like this:
Display := @If( i = index; “block”; “none”)
The case of the radio button is a bit different, since it doesn’t have anything like a handy selectedIndex property. If you’ve ever looked at the HTML for a radio button, you’ll probably have noticed that it is rendered as a group of <input elements, like this:
First Value
Second Value
Third Value
If you try to get document.forms[0].FieldName, you’ll find that it returns a three-member array. Handily enough, that matches the three optional fields. The function for a radio button field, then would be something like this:
I hope that helps, not just in this case, but with the whole DHTML thing. It’s really not so bad once you put a couple of hundred hours into learning it
Subject: RE: Warning: Long (was Layers in R6 and R5 in a Browser)
Sorry, I didn’t see your new question until just now (the first was a holiday here in Canada). The code for a checkbox is exactly the same as for a radio, and multivalue just means that more than one of the hidden
Brian,You are right–you don’t have a lot of choice.
I had a similar problem some time ago. I finally came to the conclusion that you cannot programmatically know when a “choice” in your keywords has been made.
I overcame the problem by deciding what to do by a subsequent action–like a Save&Close for example.
In your case, you could break the problem down to two parts–one to make the choice, one to display the Field(s) (one of 3 in your case).
That is, you could do this:
Display a Form A with your Keyword selection
They make the choice, then
It then displays Form B with the other 3 Fields and ONLY the one that they made the choice for shown.
This will work–I have done it before–but it is clumsy I admit.