Dropdown menu from Notes view in Twitter Bootstrap (with XPages)

Introduction

OK, so I was a bit unsatisfied with the navigation list in my previous post. The nav-list component seems not to be destined to contain too many category sub levels.

Dropdowns

Toggleable, contextual menu for displaying lists of links.

Pills

I am not sure how you would describe pills in Twitter Bootstrap but to me they look more like buttons you build a navigation with.

Implementation

Again I used Mark Leusink’s Bootstrap4XPages demo site. As source for my documents I am re-using the same view from my previous post:

I found an example code for nesting lists on Fiddle and modified it a bit to my needs.

I display the results via a computed field that looks as followed:

<xp:text escape=”false” id=”computedField1″ value=”#{javascript:getList()}” ></xp:text>

The function getList() is very similar to the one in my previosu post and looks as followed:

function getList() {
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=\”dropdown\”>”;
list = list + “<ul class=\”nav nav-pills\”>”;
list = list + “<li class=\”dropdown active\” id=\”accountmenu\”>”;
list = list + “<a class=\”dropdown-toggle\” data-toggle=\”dropdown\” href=\”#\”>Home</a>”;
list = list + “<ul class=\”dropdown-menu\”>”
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 class=\”dropdown-submenu\”>”;
list = list + “<a href=\”#\” tabindex=\”-1\”>” + entryValue + “</a>”;
list = list + “<ul id=\”” + entryValue + “\” class=\”dropdown-menu\”>”;
//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></li></ul></div>”;
//closure well sidebar-nav

return list;
} else {
return “no documents found”;
}
}

Here is what the result looks like:

Alternative

The example above looks nice but I am not sure what the purpose of nav-pills are? (don’t ask a Dutch the pills Q)  I guess users would expect site navigation to be in a navigational bar, so expect another post on the nav-bar component.

Job Wanted

Looking for a creative brain? Choose me!