Monday, April 24, 2006

Using AJAX to generate view dynamically.

Lotus Notes view can be formatted using "$$ViewTemplate" form on the web. It can be display as normal HTML or Java Applet. Java Applet can be quite slow if users does not have good connection to the server or through Internet access. Using conventional way, every view action (collapse, expand, next, previous, etc) will refresh/reload the web view page.

Page reload can be reduced by using AJAX to retrieve view data. "ReadViewEntries" can be used to access view data in XML form. Refer to Lotus Designer Help for detail on "ReadViewEntries".

Example url to retrieve XML view data:
http://servername/db.nsf/myview?ReadViewEntries

Example XML data
<?xml version="1.0" encoding="UTF-8" ?>
<viewentries toplevelentries="2">
<viewentry position="1" unid="EF312582F4ACDD4448256EF9000BAC7D" noteid="926" siblings="4">
<entrydata columnnumber="0" name="Acronym">
<text>HSE</text>
</entrydata>
<entrydata columnnumber="1" name="Description">
<text>Health Safety and Environment</text>
</entrydata>
</viewentry>
<viewentry position="2" unid="71697069D0B0198148256F0A0014FD8A" noteid="942" siblings="4">
<entrydata columnnumber="0" name="$Acronym">
<text>CG</text>
</entrydata>
<entrydata columnnumber="1" name="Description">
<text>Consumer Goods</text>
</entrydata>
</viewentry>
</viewentries>

From the XML document, you can traverse the structure and build your view. You can get the "viewentry" and then the "entrydata" from the XML. I will go in more detail example of building simple table from the XML in later write up.

To build a view, create a HTML Form. Insert a <div> area where the view is going to be display. Create the necessary buttons for the view actions (Collapse, Expand, etc).

<div id="viewtable"></div>

On form load, make a xmlhttp call to retrieve the xml data (eg. using prototype.js - refer to this)
In the form, onLoad:
getView("http://servername/db.nsf/myview?ReadViewEntries");

In the JS Header

function getView(url){
var myAjax = new Ajax.Request(
url,
{
method: "get",
onComplete: displayView
});
}

function displayView(xmlDoc){
var viewtable = xmlDoc.responseText;
//do your processing to build the view table
var viewentry = xmlDoc.responseXML.documentElement.getElementsByTagName("viewentry");

//display the XML in the "viewtable" div (replace this with your custom design view HTML.
$("viewtable").innerHTML = viewtable;
}

Then for every view action, you can call the getView() function with the appropriate url parameters.
For example to collapse the view, create a collapse button. OnClick
getView("http://servername/db.nsf/myview?ReadViewEntries&CollapseView");

So using this way, you can dynamically get the view data and build the view onto the page without refreshing the page.

5 comments:

Anonymous said...

great technique!
but how do i keep url-links in view columns in order to open the documents directly out of the view?
i managed to format the column values by using display & table classes in css, but is there any chance to get the column headers, too?
s_kotti

William Beh said...

@s_kotti. You can use the unid from the viewentry to create anchor links to open the documents.

To set the column header, I use the programmatic Name in the Column property. But be careful when using the programmatic Name. Check out the Designer help file for more detail on the programmatic column name.

Anonymous said...

..i might be wrong, but i get only plain text with the readviewentries command, so how do i format the unids to anchor links? do i need an xsl template or is it possible with simple css?
for the column headers i can get all information by ReadDesign command, but this will only return tags with no content. i tried with content & pseudo-classes in css, but it wont work, do you use js to loop through the column attribs?
thanks!
s_kotti

Anonymous said...

Any one try this with multiple views? Is it possible to show multiple views for ex. I have a webpage were you can select links to views but then you have to go to another page with the view in it then go back when you want to select something else. It would be nice to click a view link then the view shows in the same page.

azer said...

could you efford any example that shows this great technique?please