|
|
|
|
|
|
|
|
|
|
|
|
|
|
PROGRAMMING POWER
Give your Domino views life with DHTML
By Colin Neale
Have you ever wanted to be able to expand and collapse documents in a Notes view from a browser but the view's contents are being treated as HTML and are not being translated by the Domino engine itself?
In this article, I will show you how you can achieve this with a very simple piece of JavaScript that manipulates the HTML elements on your Web page.
The techniques shown below form the basis of the search results views of our C-Search products to allow users to turn document descriptions on an off without the intervention of the Domino server. Figure A shows C-Search results collapsed.
FIGURE A
 
Here are the results, collapsed. Roll over picture for a larger image.
Figure B shows those same results expanded.
FIGURE B
 
And here are the expanded results. Roll over picture for a larger image.
Create a simple database
I started by creating a simple database. I added a form with two fields: "Title" and "Description". I also added a categorized view to display the document values. I added a few documents with information taken from one of the Notes help databases. Figure C shows a collapsed view of this document in the Notes client.
FIGURE C
 
Here's the collapsed view. Roll over picture for a larger image.
If you want to see more detail, Figure D shows the expanded view.
FIGURE D
 
Here's the expanded view. Roll over picture for a larger image.
I'll now explain how to build a Web view to emulate the Notes Expand-All and Collapse-All features.
Create a Web view
Once I had some documents in my database I created a view for the web. I added the following formula to the first column.
db := "/" + @ReplaceSubstring(@Subset(@DbName;-1);"\\";"/");
url := db + "/0/" + @Text(@DocumentUniqueID) + "?OpenDocument";
"<tr><td><a href =\"" + url + "\">" + Title + "</a>" + "<span class=\"description\" style=\"display:none\">" + Description + "</span></td></tr>"
|
The formula above builds a link to each document. The output is an HTML table row for each document showing the Title of the document as a hypertext link.
The link is followed by a "span" block-level element assigned to the "description" class. The block's content is taken from the Description field on the document. Note that when the view first loads, the description block will not be seen as the style's display property of the element is set to "none".
|
|
|
|
|
|
|
|
|
|
|
|
|
|
-- Advertisement --
Find unused Lotus Notes groups and clean up your address book
Have you ever wanted to get rid of old Lotus Notes groups that were cluttering up your address book, but you weren't sure if they were used? Find Unused Groups can help.
Find Unused Groups will check your ACL, mail, multi purpose and server groups to help you determine if they are used, and who uses them.
Learn how to easily clean up your address book. |
-- Advertisement --
Mark your calendar for in-depth Lotus training, May 12-14, Boston
Join experts and peers May 12-14 in Boston for educational and networking events that deliver real-world Lotus training so you can increase productivity and efficiency in your company, advance your skills, and squeeze the most from your current environment. One registration gets you into THE VIEW's Admin2010 and Lotus Developer2010.
Register by April 10 to save $200. |
|
|
|
|
|
|
|
|
|
|
