Manage Learn to apply best practices and optimize your operations.

Expand and collapse text within a view column

This technique breaks up a large quantity of data, displays a small piece of the text & a clickable graphic that opens up the remainder of it.

Ever have a field that contains a large quantity of data that you want to include in a view? A good example are those fields that keep appending data, like audit trails and comments. It's a mess and requires excessive formatting. This technique breaks it up, displays a small piece of the text (perhaps most recent) and a clickable graphic that opens up the remainder of the text. This is a Web-only solution and was built for Internet Explorer browsers.

The first step is to add placeholders within the field that will later assist the breakup. I used an agent to modify existing documents and added code to the form for future documents. Add a character you know you will not see within the text (suggestions: @ or ^).

To display the view use a form with an embedded view. The column that contains your data should be structured as follows:

id := @Text(@DocumentUniqueID);
longresult := @ReplaceSubstring


"<td><span id="longid"+id+"" 
<span id="shortid"+id+"" 
<span id="final"+id+"" 
"</span>  <br>
<span id="longgr"+id+"" 
<IMG SRC="/icons/vwicn096.gif" 
<span id="shortgr"+id+"" 
<IMG SRC="/icons/vwicn097.gif" 

<span id="final"+id+"" 

  • holdPTComments is my lengthy text field.
  • I use the domino icons wicn096.gif (minus sign, collapse), and wicn097.gif (plus sign, expand) to add some visual help.
  • The purpose of the If ... Then function is to isolate cases where there is no text, or one comment from the situations where there are more than one. Without more than more than comment there is no need to display the expand graphic.

    This JavaScript function (allComments) expands and collapses the text in the column:

    function allComments(choice,form,id){
     var j;
     if (choice=="short"){
      idFrom = "shortid"+id;
      idGrFrom = "shortgr"+id;
      idGrTo = "longgr"+id;
      idFrom = "longid"+id;
      idGrFrom = "longgr"+id; 
      idGrTo = "shortgr"+id;
     elFrom = document.getElementById
     idTo = "final"+id;
     elTo = document.getElementById(idTo);
     elTo.innerHTML = elFrom.innerHTML;
    style.visibility = 'hidden';
    style.visibility = 'visible'; 

    Do you have comments on this tip? Let us know.

    This tip was submitted to the tip exchange by member Michael Torppey. Please let others know how useful it is via the rating scale below. Do you have a useful Notes/Domino tip or code to share? Submit it to our monthly tip contest and you could win a prize and a spot in our Hall of Fame.

  • Dig Deeper on JavaScript for Lotus Notes Domino

    Start the conversation

    Send me notifications when other members comment.

    Please create a username to comment.




    • iSeries tutorials's tutorials provide in-depth information on the iSeries. Our iSeries tutorials address areas you need to know about...

    • V6R1 upgrade planning checklist

      When upgrading to V6R1, make sure your software will be supported, your programs will function and the correct PTFs have been ...

    • Connecting multiple iSeries systems through DDM

      Working with databases over multiple iSeries systems can be simple when remotely connecting logical partitions with distributed ...