Navbar with dropdown menu from Notes view in Twitter Bootstrap (with XPages)

Introduction

Hey hey, sorry to bother you again with a post about using a Notes view in combination with Twitter Bootstrap.

In my previous post I was not sure about using nav-pills. I fear not all users will understand them. I assume that most users are common with a site header with navigational options. This navigation can be like tab bars (hihi watch some real old work) some with nested tabs in fancy drop down menus. Twitter Bootstrap have probably taken notice of this expected behavior and provided therefor the navbar component.

Implementation

I used the same conditions as in my previous post (Mark Leusink’s Bootstrap4XPages demo site and my Notes view:

notesview clean

 

Here is how the code on my XPage looks like:

<div class=”navbar navbar-inverse navbar-fixed-top”>
<div class=”navbar-inner”>
<div class=”container-fluid”>
<a data-target=”.nav-collapse” data-toggle=”collapse”
class=”btn btn-navbar”>
<span class=”icon-bar”></span>
<span class=”icon-bar”></span>
<span class=”icon-bar”></span>
</a>
<a href=”#” class=”brand”>
<xp:text escape=”true” id=”computedField1″ value=”#{javascript:@DbTitle()}”></xp:text></a>
<div class=”nav-collapse”>
<ul class=”nav”>
<li class=”dropdown”>
<a data-toggle=”dropdown” class=”dropdown-toggle” href=”#”>Site Index<b class=”caret”></b></a>
<xp:text escape=”false” disableTheme=”true” value=”#{javascript:getList()}” rendered=”true”></xp:text>
</li>
<li class=”active”>
<xp:link escape=”true” text=”Home” id=”link1″ value=”/index.xsp”></xp:link>
</li>
<li>
<a href=”#”>Static Link 1</a>
</li>
<li class=”divider-vertical”></li>
<li>
<a href=”#”>Static Link 2</a>
</li>
</ul>
<form action=”” class=”navbar-search pull-left”><input type=”text” placeholder=”Search” class=”search-query span2″ /></form>
<ul class=”nav pull-right”>
<li>
<a href=”#”>Static Link 3</a>
</li>
<li class=”divider-vertical”></li>
<li>
<a href=”#”>Static Link 4</a>
</li>
</ul>
</div><!– /.nav-collapse –>
</div>
</div>
</div>

Note: I had to set attributes for escape and disableTheme for the computed field otherwise the navbar would get messed up.

In the computed field I call a SSJS function that is similar to the one in the previous post:

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 = “<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=\”#\”>” + entryValue + “</a>”;
list = list + “<ul 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=0; i<(countLevel); i++){
closure = closure + “</ul></li>”
}
list = list + closure
//closure nav nav-list
list = list + “</ul>”;
return list;
}
else{
return “no documents found”;
}
}

C’est tout!

Result

Here is how the result looks like for desktop:

navbar

 

Reflections

Not bad for something “out of the box”!

I placed the “Site Index” at the beginning because it appears that the expanding of the nested lists continues to the right, even when it has reached the end of your screen 😕 There is the option to set the class for nested list to dropdown-submenu pull-left but I think it will be odd if you collapse one level open to the right and the next to the left.

Mobile users

Mobile users will find it difficult accessing the nested lists as the following image demonstrates:

mobilenavbar

 

Only the first 7 entries seem to become displayed, so when you open nested lists the items below just get pushed away. Luckily they return when you close the nested lists.

Alternative

The options for providing deep-level navigation seem to be a bit limited in Twitter Bootstrap. an alternative might be a collapsible tree menu for TB which you can find an example described here.

Job Wanted

Looking for a creative brain? Choose me!

job-wanted

Advertisements

2 thoughts on “Navbar with dropdown menu from Notes view in Twitter Bootstrap (with XPages)

  1. Matias 2013-July-1 / 2:08 pm

    Thanks u 🙂

  2. Marc Jonkers 2014-May-21 / 2:16 pm

    Patrick,
    Could you send me an nsf file with this implementation of the navbar based on a notes view.
    It seems I can’t get it to work in my application, and I don’t know why.
    Alvast bedankt op voorhand !

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