Create a modern outline for the Notes Client in 5 minutes or 20 steps

If we create an application and we don’t create an outline for them, they look like the left image below. A lot of Notes applications today still look that way. Why is that? We don’t have time for refactoring!

I want to proove that time is not the issue here. I claim that the outline on the right can be made in 5 minutes. Try it for yourself and get some help from this Outline Demo Database.

Default Outline in Notes ClientModern Outline in Notes Client

  1. In Designer, create a new outline.
  2. Choose Generate Default Outline, this generates an outline containing all views in the database.
  3. (Optionally) remove all views you don’t want outline entries for.
  4. I don’t like the folder icons in front of the entries, they look too much like the default folder pane to me. Instead, from the Outline Demo Database, copy the image empty.gif from the image resources and the agent Remove Default Outline Images and paste them to your database, then run the agent. Below you find the explanation* why I do it this way.
  5. Save the outline and call it Main.
  6. Create a page Main and add an Embedded Element – Outline.
  7. In the Embedded Outline Properties, check for twisties OS style, giving you +/- twisties. These look much better than the default twisties.
  8. Change the dimensions: I like it fixed size horizontally (a pitty this is defined in cm’s or inches, instead of pixels – I made it 5,5cm) and vertically fit to content.
  9. Change Top-Level Font to Tahoma 8pt – Bold and Sub-Level Font to Tahoma 8pt – Plain.
  10. Set Top-Level Background ColorSelected and Moused to another color.
  11. Change Top-Level Layout and Sub-Level Layout all values to 0.000.
  12. Change margins to 2cm left, because the default creates too much witespace.
  13. Change the page background color.
  14. Add a title and/or logo above the outline.
  15. Create a new frameset with 2 panes (the default).
  16. Make the left pane a little wider than the width of the outline, I made it 215 pixels. The right pane you give a relative width of value 1.
  17. Name the right pane Body and use this name as the default target in the left frame properties.
  18. Change the border style: remove the 3-D border (this is 2007), make the border width 5px and change the color to something else.
  19. Change the database launch options to designed frameset and select the new frameset.
  20. That’s it! (this is added because 19 steps sounds silly :-))

*Why use a script to remove the outline entry images?

They could also be removed by opening the Outline Entry Properties, but if you have a lot of entries, this may seem a tedious and stupid task. And since you don’t have some energetic young potential willing to do everything you ask, there’s an alternative.

I tried to automate the process with LotusScript: however, you can change some outline things, but not this property. What we càn do is change the picture used, and I created a transparent 1×1-pixel gif and an agent that replaces the icons with the “empty” gif. That way, no icon is shown.

5 Comments

  1. Hi Steve,

    Thank you for your interest!

    I know, I still have a problem with my RSS feed, one of these days I want to figure out what’s wrong. I’ll let you know if it’s fixed.

    Greetings,
    Martin

    Reply
  2. Steve,

    The RSS feed got fixed! Seems like BirdFeederWP plugin gave me some troubles.

    Reply
  3. Create a modern outline for the Notes Client in 5 minutes or 20 steps:

    Does this works on web ?

    waiting for reply

    thanks

    Reply
  4. This should work on the web as good or as bad as any other outline created with Notes… I prefer creating my own outlines with a combination of a view with the navigation I want and html/css.

    Reply

Leave a Reply to Martin Vereecken Cancel reply

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

49 − 39 =

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>