Introduction
In my previous post I demonstrated how you create breadcrumbs from Notes view in Twitter Bootstrap. A typical Notes application contains an outline (I assume you don’t the Navigator design element anymore). In this post I demonstrate how to create something similar in Twitter Bootstrap, a Nav List.
Nav Lists
A Nav list is a simple and easy way to build groups of nav links with optional headers. They’re best used in sidebars like the Finder in OS X. You can nest nav-lists and then they come quit close to categorized or hierarchical structured documents (e.g. parent & response).
Implementation
As  a start database I used Mark Leusink’s Bootstrap4Xpages demo site which you can download here.
As source I am also using a similar view as I used in my previous post. Here is how it looks like:
I found an example code for nesting lists on Fiddle. Note that you can extend nav-list with mouse over behavior but I fear for mobile phones and tablets this will be a crime.
I display the results via a computed field that looks as followed:
<xp:text escape=”false” id=”computedField2″ value=”#{javascript:getNavList()}”></xp:text>
The function getNavList() looks as followed:
function getNavList(){
var nav:NotesViewNavigator = database.getView(“$v-treeview-clean”).createViewNav();
var entry:NotesViewEntry = nav.getFirst();
if (entry !=null){
var countLevel:Integer = 0;
var curLevel:Integer;
var list = “<div class=\”well sidebar-nav\”><ul class=\”nav nav-list\”>”;
while (entry !=null){
var edoc:NotesDocument = entry.getDocument();
entryValue = entry.getColumnValues().elementAt(1).toString();
var col:NotesDocumentCollection = edoc.getResponses();
curLevel = entry.getColumnIndentLevel();
if (col.getCount()>0){
//prep for new entry with response(s)
var difLevel = countLevel – curLevel ;
var closure = “”
for (var i=0; i<(difLevel); i++){
closure = closure + “</ul></li>”
}
list = list + closure;
list = list + “<li>”;
list = list + “<a href=\”#\” data-toggle=\”collapse\” data-target=\”#” + entryValue + “\”>” + entryValue + “</a>”;
list = list + “<ul id=\”” + entryValue + “\” class=\”collapse in\”>”;
//increase counter
countLevel = curLevel + 1;
}
else{
if(curLevel==countLevel){
list = list + “<li><a href=\”#\”>” + entryValue + “</a></li>”;
}
else if(curLevel<countLevel){
var difLevel = countLevel – curLevel ;
var closure = “”
for (var i=0; i<(difLevel); i++){
closure = closure + “</ul></li>”
}
list = list + closure
countLevel = curLevel;
}
else {
//
}
}
var tmpentry:NotesViewEntry = nav.getNext(entry);
entry.recycle();
entry = tmpentry;
}
//final closure, last entry could be response doc
var closure = “”
for (var i=1; i<(countLevel); i++){
closure = closure + “</ul></li>”
}
list = list + closure
//closure nav nav-list
list = list + “</ul>”;
//closure well sidebar-nav
list = list + “</div>”;
return list;
}
else{
return “no documents found”;
}
}
In order to make it look nice embed the computed field in div element and give it a span class.
Below you see the final result:
You notice directly an obvious problem: the long title references which are typical for Notes documents.
Alternative
Twitter Bootstrap offer other alternatives which might be more suitable for transforming Notes views. And example is the dropdown. This you can extend with the dropdown JavaScript plugin.
Point for improvement
A class I did not use for the LI element is nav-header. This gives a nice outstanding header, which are great for categorized views.
A class I did not use for the LI element is active which highlights a list item. When using the nav-list on documents opened via an XPage I guess it is best practice to add the class name when the document is ready on the client.
The HREF attribute is not computed but this can be extracted from the viewentry.
Performance. The view above contains very little documents. I still have to test it with larger databases. Some examples where I want to use the nav-list contain more than 15000 documents in the view. I wonder how much I can use sessionScope or place the HTML in a profile document. Any suggestions here are welcome.
Tools used
Beside DDE is used heavily NotePad++ to check the generated HTML.
Job Wanted
Looking for a creative brain? Choose me!
Kwintessential Notes 