5 differrent uses for layers in Lotus Notes

Layers in the Notes Client? Why would I use them? On the web, with css-based designs, I can see why, but in the Client? That was my opinion until a week ago. I thought they were cool, but I didn’t really had a place for them in my applications. But then there was a guy called Basir Noutash, who sent me a form with a layer in it as some kind of dialog box.

“Hmm… good thinking”, I thought. And “what else could there be done with it?” I started to experiment and came up with 5 possible uses for layers.

A layer can be:

  1. a dialog box
  2. a text popup
  3. an image lightbox
  4. a wizard
  5. a way of protecting content

I created a small layer demo database you can download to better understand and see how it works. Take a look at the demoform you’ll find in there and create a new document with it to test. A little warning: you will see a transparent layer for the lightbox in Designer. This can be in the way of the other design elements, so move it out of the way if you want to see the design of what’s below.

The principle is always the same: with a hide-when formula where the layer link is, you can show or hide a layer. I set a field value to “0”(=hide) or “1”(=show) by clicking a button.

1. A dialog box

Layers as an alternative for @Dialogbox

A layer can replace a @Dialogbox and this may add some interesting effects to the client: more colors and styles are possible (design freedom), you can use your own custom buttons, you can add a shadow,…

It also has some disadvantages:

  • QueryOpen, QueryClose,… are not there (because it’s not a new form);
  • cancel is not possible or you’ll have to write your own cancel.
  • you cannot move the layer or you’ll have to write your own code for that (I didn’t check yet if this is possible).

2. A text popup

Text popup for help screens

You know the text pop-ups? And how limited these are? “10pt Default Sans Serif thy shall be”, so they decided. By using a layer as a help pop-up text, your help texts can look much more interesting.

3. An image lightbox

Image lightbox in Lotus Notes Client

In Web 2.0 applications, you probably saw this way of displaying images: a white frame with a picture, and the rest of the screen greyed out and made unreachable. With a second layer behind the photo frame and a transparent gif (unfortunately png is not supported) tiled in it, this effect can be simulated. Sorry for frightening you with that picture, I have been playing around in Photo Booth :-).

4. A wizard

The dialogbox example could easily be expanded to a series of layers being shown one after another in a wizard-like fashion. In the demo database there’s no such example, but this is just a more advanced way of juggling with dialogbox layers.

5. A way of protecting content

If you want to (semi)protect content of being editable, you can add an invisible layer on top of that particular part of the screen. Fields become unreachable by the user. A warning: with the tabkey the fields are still reachable, so it’s not a full protection.

I hope this article inspired you to explore layers in new ways, and, as always, I’m interested in what ways layers are used by you.

8 Comments

  1. Hey Martine, I would also add cascading menu bars to the list. I used to embed an outline into a layer and use it as a choice list or menu in a form. It can be very useful in some places. At least better than showing the user a listbox using @prompt.

    I liked your image light box idea, it is really cool. I am trying to find a way to use it in my current project.

    One drawback I found about layers is its positioning. If you require a layer to lie exactly adjacent to another element, it works fine in your screen but the position of layer slightly changes when your application is used in screen resolutions other than the one you used to test it. There should be a work around which I don’t know. Any idea?

    Reply
  2. Welcome back, Basir!
    Good idea – the outline-in-layer proposal! A bit like drop down menus, right?
    Concerning the layer positioning, I didn’t know this was an issue with different resolutions, I would have to test it myself first.

    Reply
  3. Hi Patrick, for example if you have a button that displays a layer containing an outline and you want the layer to be displayed exactly underneath the button so it looks like a drop down menu, it’s fine on 1024×768 screen but when you test it on 600×800 screen, the menu is displayed further from the button which is not nice.

    Reply
  4. Hi Martin, thank you for sharing this great ideas.
    One think to consider on dialog box replacement/Wizard idea: perhaps you could use only one layer with a programmable table.

    Has you any (negative) experiences on printing documents using forms with layers? Especially longer documents, which print on 3+ pages?

    We used a layer to display the document history. Although this layer was hidden for printing – and thus shouldn’t do anything to the print-out – at top of the second or third page one or two lines were missing. We discontinued the use of layers since… :-(

    Thanks
    Thomas

    Reply
  5. Thomas, indeed, using a programmable table for the wizard is more efficient, thanks for your suggestion!
    I didn’t know about the printing problems this can give. That’s the beauty of Notes, there are always some beautiful gems in there, waiting to be discovered ;-)

    Reply

Submit a Comment

Your email address will not be published. Required fields are marked *

+ 63 = 72

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>