Give your Domino views life with DHTML

Email:

Home
In This Issue
EasyPrint

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. Click picture for a larger image.

Figure B shows those same results expanded.

FIGURE B

And here are the expanded results. Click 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. Click 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. Click 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".

[ Next ]

ZATZ Home · News · Back Issues · Credits/Trademarks · Link To Us

-- Advertisement --
PistolSTAR: the de facto standard for Lotus authentication
PistolStar's Password Power integrates with Microsoft Active Directory to enable single sign-on to Lotus applications and automatic recovery of the Notes ID password via self-service reset of the Active Directory password.

A single set of credentials to remember - one set of password policies to manage.
Cost-effective plug-ins integrate smoothly with your environment.
Proven, ground-breaking technology deployed to millions of users.

Learn more.

-- Advertisement --
How good are your Notes Reports?
Integra for Notes provides high value reporting and data analysis from Lotus Notes databases using Microsoft Word, Excel and PDF files.

Enhance traditional static reports with Excel data analysis, pivot tables, macros
Report from any Lotus Notes databases without changes to database design
Runs reports through a Lotus Notes client and a web browser
Enables Report scheduling or distribution by e-mail, printing or storing in a Notes database
Allows use of LotusScript for advanced data manipulation

Enables self service reporting capabilities to end-users.

Click for more info.

Editor's Login