Genii Weblog

Rich Text 101 - Sections

Tue 16 Dec 2003, 01:13 AM



by Ben Langhinrichs
Rich Text 101 logo
Long before tabbed tables and embedded views, Lotus introduced an exciting new feature, the collapsible section.  This was in Lotus Notes R4, back before Domino and the web, and the change it made was revolutionary.  Suddenly, large amounts of information could be available on a page without having it all visible at once.  Sadly, time moves quickly, and many seem to underestimate the power and flexibility of collapsible sections.  While I prefer tabbed tables in many situations, collapsible sections have some advantages that tabbed tables do not.  There are also techniques available with collapsible sections which make them ideal for certain specialized uses.  In addition, the rendering of tabbed tables leaves something to be desired on the web, whereas sections render in a way that is comprehensible and clear on the web.

What's so cool about sections?
One cool thing about sections is that they don't take up much more space than a line of text or a link.  You may yawn, but this is a significant factor.  A collapsible section is like a link with the content in-line.  While that can be accomplished on the web with DHTML and DIVs and JavaScript, collapsible sections do it simply with no scripting, coding or worries about browser implementation.  A section takes up less space than even the shortest tabbed table, and yet may contain within it data which isn't constrained by the horizontal or vertical limits of the section.  The contents of a section may stretch to the left or right of the ends of the section, and may continue for pages.

Aren't sections sort of... boring looking?
One of the reasons why sections have a bad reputation is that so few developers use anything other than the default settings.  There are a number of display options available which allow you to customize the color of the twistie and box, alter the shape of the container, and also turn off the title when the section is expanded.  For the purpose of this article, I am going to show pictures rather than working sections, because some features of sections don't translate as well to the web.

Lose the twistie
If you just don't like the twistie, there is a simple trick to make it disappear.
Section properties box 1

Simply set the Style to no border (the second option in the list) and the color to white, and the twistie will disappear, leaving what looks more like a hypertext link.  Finally, change the text properties to Blue, and you get a look like that below, such as that below:


Make the section a box
When it is collapsed, the title can be nicely set off from the text

Collapsed section image
and when the section is expanded...
Expanded section image

Note: In Notes 6, an additional box notation has been added which eliminates the need to set the color as white, since it does not use the twistie at all, but instead has an indicator inside the box which collapses or expands the section.  In that case, the color sets the background of the box rather than the color of the border.

Re-position the section title

There are a few choices here.  You can center the section title, or right justify it, or take advantage of the fact that the margin settings of the section title are separate from those of the section contents and shift the left margin exactly where you want.

Hiding contents with collapsible sections
This separation between the paragraph attributes of the section title and the paragraphs inside the section leads to another very handy trick.  If you have anything which is difficult to hide, such as attachments, or if you want to be sure that on a form, a rich text field does not have any hide-when formula, but you want the rich text field to not appear conditionally, you can use a collapsible section.  The hide-when formula on the section title can be set without effecting the contents, but when the section is collapsed (and that is important), the contents will not appear, even if they include attachments.  This is far better than putting a hide-when formula on a rich text field, because if you want to use the same rich text field on another form without the same hide-whens, you want to void the embedded paragraph definitions. (For a bit more explanation on the topic of paragraph definitions in rich text, see the Rich Text 101 - Paragraphs article)

Expansion rules
Besides these visual enhancements and tricks, it is worth noting that you can set the expansion rules for a section.  These determine whether a section should be expanded or collapsed when the document is opened.  Because section expansion rules are not widely used, many people simply create a section and leave the default.  The default says that the section should appear just as it did when last saved, but this means the developer (for a form) or writer (for a document) needs to ensure that he/she does not leave the section in an incorrect state.  A better approach is to set these expansion rules directly.

Section properties box 2

These settings show the various choices available.  You can Auto-expand sectionAuto-collapse section, or set the section to "Don't auto expand or collapse", and you can have different settings for previewing the document, opening the document to read, opening the document to edit, and printing the document.  The last two check boxes are important as well.  The "Hide title when expanded" means that the section box or title disappears when the section is expanded.  The "Show as text when not previewing" actually makes it appear as if there were no section when not previewing.  Note that graphics and hotspots and such will work, so it is not really just shown as "text" when not previewing.

Five scenarios for using expansion rules

Scenario 1 - Disclaimer when printing) Create a disclaimer to be added to the document when printed that does not appear when read or edited or previewed.  Set the "Hide title when expanded", and the Auto-expand section when opened for printing, and the Auto-collapse section when previewed, opened for reading or opened for editing.  Put the disclaimer inside the section.  This works better than hide-when properties because it does not need to be turned on for reading when it is turned on for printing.

Scenario 2 - Shorter info on preview) Create a section which contains extended information not necessary when previewing.  Set the "Hide title when expanded", and the Auto-expand section when opened for reading or editing, and the Auto-collapse section when previewed.

Scenario 3 - Summarize info on preview) Create a summary section which contains extended information only necessary when previewing.  Set the "Hide title when expanded" and "Show as text when not previewing", and the Auto-collapse section when opened for reading or editing, and the Auto-expand section when previewed.  You won't even be able to tell there is a section when dealing with the document in edit or read mode.

Scenario 4 - Hide links/tips/etc. from editors) Create a section around links and hints and that sort of thing, which is not necessary for those editing the document.   Set the "Hide title when expanded", and set the Auto-collapse section when opened for editing, and the Auto-expand section when previewed or opened for reading.

Scenario 5 - Hide editing guidelines from readers) Create a section around editing guidelines and other editing utilities, including action hotspots which might be used by an editor, which are not necessary for those simply reading the document.   Set the "Hide title when expanded", and set the Auto-expand section when opened for editing, and the Auto-collapse section when previewed or opened for reading.

Computed titles - Powerful, but overlooked (and a bit dangerous)
One of the least utilized features of collapsible sections is the ability to compute the title based on the values in the document or user dependent variables.  Simply by switching

Section properties box 3

In this formula, the person opening the document sees a personalized message and a SalesTotal which presumably relates to them (possible computed field with @DbLookup or something similar).  Additional information is available in the collapsed section, but because the summary information is in the title, there may be no need to open the section.  This is a key point about collapsible sections.  Most of the time, you may not need to expand them, and even less often if summary data is in the title and detail information is inside.

Conclusion
Just the way developing in Notes and refusing to learn formula language is a mistake, developing in Notes/Domino and refusing to learn how to really use collapsible sections is a big mistake.  Take some time and play with a few of these ideas, and you may find that collapsible sections are one of the hidden strengths of Notes rich text.

Copyright © 2003 Genii Software Ltd.

What has been said:


83.1. Alan Bell
(12/16/2003 01:15 PM)

and really cool is attaching signatures to fields in controlled access sections.


83.2. kai
(04/16/2004 09:20 AM)

some comment


83.3. Ben Wolkenfeld
(10/13/2004 09:05 AM)

Ben,

Just wanted to say thanks for the tip. I was tearing my hair out trying to display attachments only for a select group of users, and could not get this done without collapsable sections.

One point--it seems that the sections do not work correctly if they are nested within a tabbed table. Bummer. It would have eliminated some scrolling for my users.

Thanks again,

Ben Wolkenfeld


83.4. krishna
(01/27/2005 11:59 AM)

Hi,

I am not using standard table but creating a table using appendtable method. Can we change the border color of the table to white by setting some properties..please help me out as i am in urgent need of this ..

Reagrds,

Krishna


83.5. Tony Austin
(30/10/2006 02:53 PM)

I would like to reinforce Alan Bell's commant about controlled-access sections. You can do some quite nifty things (such as Human Resources database I once developed for a client where workflow was involved, and it was essential that only certain people could edit the various scetions in the form).

Also totally agree with you that sections could/should be used a lot more (and more thoughtfully) for a nice look-and-feel and control of screen real estate.


83.6. Yaz
(14/05/2007 19:25)

Hi,

I have created an email within lotus notes and added the sections to it. when i send the email though it loses the actual headings to the sections i.e. the text to allow expand and collapse but it keeps the data with that section on the recepients email. tearing my hair out canot figure out why it wont send the actual link headings to allow the expand and collapse which is the whole point of creating the sections. PLEASE can you help? you can email me back on ypatel2@csc.com. Any help MUCH appreciated


83.7. adrian
(10/26/2007 04:37 PM)

When creating a section, the default border is a green triangle on the left of the title. Is there a way to change the default color for a section?


83.8. Ben Langhinrichs
(10/29/2007 06:21 AM)

As far as I know, there is no way to change the default border. At best, you can set up blank sections with the settings you like in a resource document and copy them in either manually or programmatically. I have done that before with various rich text objects for which I didn't like the defaults.


83.9. Shiva Sanjay
(08/01/2012 08:04 AM)

why my web applicatin using standard secion is not working.

When i try to collapse the section it is inactive.

Pls suggest