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.