Dhtml - Notes View

For those of you that always wanted a Expand/Collapse functionality of a view
on a Browser here is how.
First. This code works with IE4.0 and above, (the Netscape version is under
development).
And with Domino 4.6x
Please follow this steps:
Step 1.
Create view and on the first column place the following code column value event:
"[<B>--></DIV>" +
"<SPAN CLASS=\'first\' onClick=\'Expand(" + Categories + ")\'>" + Categories +
"</SPAN><BR>" +
"<DIV CLASS=\'second\' ID=\'" + Categories + "\'
STYLE=\'display:none\'><!--<B>]"

NOTE:
This column must be categorized.
I'm using the Categories field to categorize my documents, use your own field.
and ...
this code goes on the HEADER of the first column:
[</TH></TR></TABLE><!-- <B>]

Step 2.
Create a second column
db := @ReplaceSubstring(@Subset(@DbName; -1); "\\"; "/");
@Text(Date; "D2T1") + " " +
"[<B>--><A HREF = \'javascript:openNews(\"/" + db + "/News/" +
@Text(@DocumentUniqueID) + "?OpenDocument\")\' TARGET=\'_self\'><FONT SIZE=1>"
+ Headline + "</FONT></A><BR><!-- <B>]"

This column build the contect of the collapsible sections, so you can customize
this as you wish, I'm using my own A HREF because my code is on a frame and I'm
using the _self target.

The selection formula for the view it's your choice, on my example I'm
displaying news documents.

Step 3.
Now you have to create another view, in this case I named the view "News", on
this view include just one column sorted and with the following formula for the
column: @Text(@DocumentUniqueID)

and now the finals steps:
Step 4.
Create the $$ViewTemplateDefault form, or the
$$ViewTemplate for .... form, it's up to you.

Add the $HTMLHead field with the following formula:
"<STYLE>" + @NewLine +
".first {font-family:Verdana; font-weight:bold; font-size:10pt; cursor:hand}"
+ @NewLine +
".second {font-family:Verdana; font-weight:normal; font-size:8pt;
padding-left: 10}" + @NewLine +
"</STYLE>" + @NewLine +
"<SCRIPT LANGUAGE=\'JavaScript\'>" + @NewLine +
"<!--" + @NewLine +
"function Expand(secNum) {" + @NewLine +
" if (secNum.style.display == \'none\')" + @NewLine +
" secNum.style.display = \'\'" + @NewLine +
" else" + @NewLine +
" secNum.style.display = \'none\'" + @NewLine +
"}" + @NewLine +

The @NewLine of the formula sends a Line feed to the browser so you have a much
cleaner HTML code.

The javascript function Expand would do the trick for the Expand/Collapse
effect.

I hope this could help !!!
Feel free to contact me for any comments.
This was first published in November 2000

Dig deeper on HTML for Lotus Notes Domino

0 comments

Oldest 

Forgot Password?

No problem! Submit your e-mail address below. We'll send you an email containing your password.

Your password has been sent to:

-ADS BY GOOGLE

SearchWindowsServer

Search400

  • iSeries tutorials

    Search400.com'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 ...

SearchEnterpriseLinux

SearchDataCenter

SearchExchange

SearchContentManagement

Close