With some upfront work, CSS in the Notes Client can make stuff purty!

07/25/2008 01:19 PM by Chris Toohey

I started to put some of the Lotus Notes Client UI together for Project Broker (which you can find out about on YellowCast...) and starting from scratch - and knowing that this would be a public, open source initiative - I thought that I would put in a little more upfront work. One of the examples of this is the definition of table and cell classes, and the usage of CSS for UI tweaking. Despite the adoption of CSS in the Lotus Notes client being pretty limited, you can still make use of it to get some pretty slick results.

For a quick-and-dirty example, I'll show you the entry_edit Form Design Element in the designer client:

As you can see, pretty blah. When this renders, it'll look very chunky and very Notes circa 4.6. But by defining classes for the layout tables and cells - which I'll admit is a PITA to do - we can use CSS to get a pretty good handle on the rendered UI:

Now, hopefully with DDE (Domino Designer in Eclipse), we'll be able to do this much more effectively through a toggle to the DXL source... provided the DXL is complete enough to not drop this sort of stuff out that is...

Back on topic: one of the cooler things here - you can define multiple classes to a given element.

Now, you can define a specific selector class for (from this example) both field_container and required in your CSS document.

As mentioned, this can be a PITA in implement due to the complete lack of being able to select and apply attributes to multiple cells at once in the Designer Client, but once you've got your elements wired to support the CSS, making simple changes to the rendered UI is amazingly quick and can act across all of your Form Design Elements!