Search Template Woes

Jake Howlett, 20 June 2001

Category: Miscellaneous; Keywords: search template view layer css

Layers are probably one of these things that you either love or hate. Once again we have another feature whose operation differs greatly depending on the browser that you develop for. Personally, I very rarely use layers unless I really have to. Recently however I came across a situation that meant my best bet was to give in and use them. I shall describe my predicament now, not because I think you will come across the same problem, as much as I think the underlying technique may lead you to other ideas of how/where it can be implemented. Although the technique I am going to talk about is tailored for Internet Explorer development there is no reason it can't be tailored to work with Netscaoe.

The situation I came across involved searching in version 4.6. If like me you have created a customised search results form ($$SearchTemplate for <viewname>) you will soon notice that when there are no results returned all you get is a blank message. Not even a "No documents found" message as we are all used to seeing in a view. Pre-empting the fact that I knew the customer would not like this, I decided to see how I could customise the form a little more.

What is the problem:

Before I start with the solution let's look at the problem. Here is a shot of a search on a view that doesn't have any search templates:

Image

Here is the result from the same database when we search for a string that returns no documents.

Image

Domino is kind enough to let us know that there were no results returned. This is all very well if you are willing to use the standard search results page. I for one very rarely do. Let's see what a very simple Search Template might look like:

Image

With a little more work this can soon start to look as though it fits in with the rest of you site. The trouble starts when we do a search that returns no documents.

Image

Only the educated user knows that this means "No Documents". Most users are likely to think there is another more serious problem and may go as far as logging this as an error on the Developers part! What we need to do is try and mimic some of the standard search form functionality.

In Domino R5 this is relatively easy. We have a set of fields available to us that include useful things like "Count" and "TotalHits". We can use these values and some cleverly placed Computed Text areas to display the appropriate message. However, Release 4 doesn't let us use these fields and this is where the problem lies.

What's the solution:

The solution I came up with is to use a layer that contained a message about there being no results found. This layer is underneath another layer in which any results would normally appear. If there are no results the topmost layer is empty and we can see through it to the message below. If there are results then the topmost layer hides the message as it has an opaque background. Here is the layer that displays the message:

<div style="z-index:-1;position:absolute;top:0px">
No results found for that search.
</div>

Notice that it has a z-index of -1. This ensures that it is always the bottom-most layer. The layer below contains the search result in the embedded view. Notice that the background-color is set so as to make it opaque and the positioning is exactly the same as the layer above.

<div style="position:absolute;top:0px;background-color:#ffffff">
Place your $$ViewBody field here.
</div>

You may need to play around with the positioning of these layers to get them in the right place on your form and change the background colour of the second layer to that of your search templare. Apart from that this should be all you need to add. You could maybe take it further and use the Query_String CGI field to work out what is was they were searching for and display this as well. It's up to you.

Hopefully what I've just described is going to be useful and make sense to you all. Otherwise I've just wasted the last half an hour! Hope not.

Other uses:

Somebody asked me a while ago if there was a way to hide a page until all the contents were completely downloaded. Using this same approach we can do this using the onload event of the form. All we need to do is have a layer that fills the whole screen. When the page has done loading this layer gets hidden.

Here is the Pass-Thru HTML for the layer:

<div id="loading">
PLease wait while the page is loading...
</div>

This is formatted by the following CSS:

#loading {
position:absolute; z-index:1;
width:100%; height:100%;
left: 0; top: 0;
background-color: #ffffff;
font: bold 14px Verdana;
text-align: center;
padding: 100px;
}
Because we only want this layer to be visible while the page is loading, we place this JavaScript in the onload event.

document.getElementById('loading').style.visibility = 'hidden';

This is just one other application of the technique. There are bound to many more (?) If not then at least you may have learnt something useful. If not just pretend; as I'd hate to think I'd wasted my lunch hour at a PC on such a sunny day.....