Lotus Notes categorized view Accordian using jQuery

This is another early SnTT. This is another follow up previous writeup on categorized views. Lotus Notes categorized view on web will require refresh for every expand or collapse of the view. To counter this, retrieve all the data and build our own view. In this example, I'm using jQuery instead.

I've create a simple example of building a Accordian style categorized view using jQuery. It retrieve the view xml - ReadViewEntries - and build the categorized view. It uses jQuery basic effects to slide up and down the content when expanding or collapsing the view.

1) Firstly include the jquery.js in the header. Download this viewfunction.js and add it into the header.

"<script type='text/javascript' src='/"+ @WebDbName +"/jquery.js'></script> <script type='text/javascript' src='/"+ @WebDbName +"/viewfunction.js'></script>"

2) Create a division name "viewdisplay". The generated view will be populated in this division.

<div id="viewdisplay">

3) In the JS Header add the code below. The jQuery $(document).ready(function(){}); event will be called the instant the DOM is ready to be manipulated. Pass in the view URL (?ReadViewEntry).

$(document).ready(function(){
getView("servername/dbpath/viewname?ReadViewEntries&ExpandView&amp;Count=1000")
});

4) the getView function will built the view and display it in the "viewdisplay" division. For each category, it will append in the class "catcol<num>" (num starting form 0). Then for each column, it will append the class "col<num>" (num starting from 0). So you can format the look and feel for the view.

Example css for the view
.catcol0{clear:both;margin-left:20px;}
.catcol1{clear:both;margin-left:40px;}
.col0{clear:both;float:left;margin-left:60px;width:200px;}

Please take note that this is just a simple working example. It can generate single and multiple category. Make sure the view are expanded when using this (defeats the purpose if keep it collapse as the script will have to go to backend to retrieve the content). At the moment, the function still does not take into consideration of building views starting somewhere in the middle of the view. The slideUp and slideDown effects works nicely on Firefox. On IE, there will be some slight flicker. To overcome this, the page have to be renders in XHTML instead.

Download the js and tried it out. Appreciate any feedback on how and what to improve on that.

Updated (28/June/2006) - The viewfunction.js posted previously was not the working version. I've updated the js file.

Show-n-Tell Thursday