Navigation list from Notes view in Twitter Bootstrap (with XPages)

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.

navlist example

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:

notesview clean

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:

result nav list

 

 

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!

job-wanted

Advertisements

5 thoughts on “Navigation list from Notes view in Twitter Bootstrap (with XPages)

  1. Bjørn Cintra 2013-May-30 / 10:28 pm

    If you have 15000 documents (and use a ViewNavigator with the caching set properly), I suspect you would at least use as much time downloading the generated html as you would reading the view, if not more.
    Profile documents are not reliable, and sessionScope is pr user, as long as the data doesn’t change (too much), applicationScope can be used, but you need to syncronize the write if you generate the data on request. If you have the possibility to use something like EhCache on your server, this is the best option.

    A better way of solving it is to either load only the categories in the nav list, and a click on a category loads the data itself into a Bootstrap table. Even better yet, is to load category levels on demand using ajax (there are Bootstrap tree-menus out there)

    • Patrick Kwinten 2013-May-31 / 10:38 am

      Thanks for your thoughts Björn!

      I was not aware of Bootstrap tree menu’s but I found some examples e.g. http://bootsnipp.com/snipps/collapsible-tree-menu

      The main problem is that most intranet sites contain too many levels of information. More than 4 levels is not uncommon (that’s why users hardly find information). And editors don’t with abbreviations e.g. A&T for “Architecture & Technology” cause people would not understand them (I agree. BYOD stands for Bring your own developer?).

      • gilgamesjh 2013-May-31 / 11:14 am

        I know, I do a lot of intranets, and organizing information is a huge part of what we do 🙂
        The Notes model of deeply nested views are a great way of organizing lots of information, but a pain on the web (as it doesn’t translate very well), as you know. Good search helps, and “flattening” the views (for example by pulling the TOC (aka categories) out of the view) helps too.

        A way to approach this is maybe to show 1 (+1 open?) level at a time in the TOC, and enable navigation “back” trough use of breadcrumbs. People seem to like (and understand) breadcrumbs.

        When translating from a “classic” Notesapp to the web, sometimes a different approach to the presentation is needed for best results.

      • Patrick Kwinten 2013-May-31 / 11:23 am

        A TOC and breadcrumbs make a strong combination, I agree too

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s