Domino Space

For the uninitiated: Ajax stands for Asynchronous JavaScript and XML. This is the technology that is providing Web applications with rich, desktop-like features; just take a look at Google Suggest and Google Maps, for instance. An Ajax application does away with the standard start-stop-start HTTP mechanism hitherto used, and makes user interaction appear asynchronous. To read more about Ajax, this is a great introductory article.

Now, the conventional mechanism to display a view in Domino is to use the $$ViewTemplate form. Of late, the embedded view has found favor amongst many developers as well. A third way is to build an Ajax view using a JavaScript class (yeah, JavaScript does ’support’ OOP). This method basically consists of using the ReadViewEntries url-command to build the view.

function NotesView(url)
{
 this.xmlDoc = new ActiveXObject(“Microsoft.XMLDOM”);
 this.xmlDoc.async = false;
…
 this.xmlDoc.load(viewURL + “?ReadViewEntries&count=-1″);
 xx = this.xmlDoc.getElementsByTagName(“viewentries”);
 c = xx.item(0);
 d = c.getAttribute(“toplevelentries”);
 this.docCount = d;
 this.dbColumn = dbColumn;
}

The usage of the this keyword above indicates that docCount and dbColumn are respectively a member-variable and member-method of the NotesView class, and not mere variables. A simple version of the dbColumn function could look like this:

function dbColumn(colNo)
{
 var colEntry = new Array(0);
 viewEntries = this.xmlDoc.getElementsByTagName(“viewentry”);
 var curCol = 0;
 
 for (i=0;i<viewEntries.length;i++)
 {
  entryData = viewEntries[i].getElementsByTagName(“entrydata”);
  
  for (k=0;k<entryData.length;k++)
  {
   curCol = parseInt(entryData[k].getAttribute(“columnnumber”));
  
   if (curCol == colNo)
   {
    entryText = entryData[k].getElementsByTagName(“text”);
    for (j=0;j<entryText.length;j++)
     colEntry.push(entryText[j].firstChild.nodeValue);
   }
  }
 }

 return colEntry;
}

In this simple version of a dbColumn function, we merely iterate through all the columns until the column# that was passed as a parameter is encountered. Then, all the values in that column are oushed into an array which would form the return value of the function.

With this NotesView class, building a ‘dynamic’ view is no big deal; it is just a matter of collecting all (or just the necessary) columns of the view and displaying it in a well-styled table. I personally use it for categorized views – displaying the categories on the left and the category details using the NotesView class (of course, then the url used by the class would contain a RestrictToCategory parameter as well).