|
|
|
|
|
|
|
|
|
|
|
|
|
|
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 --
Sophisticated Meets Simple For Document Management
Share. Control. Manage.
Documents, emails, and content in the context of how work is done.
Native to Lotus Domino. The User Experience unseen for Lotus Domino.
Do more with less. Really.
See the possibilities Docova unleashes for Lotus Domino. |
-- Advertisement --
Teamstudio announces the 2010 spotlight awards winners!
We had some extraordinary submissions for the 3rd annual Teamstudio Spotlight Awards, and choosing the winners was no easy task for our judges! Click here to find out who won, and to learn more about these remarkable applications and the genius developers behind them!
Tap here for more information. |
|
|
|
|
|
|
|
|
|
|
