Breadcrumbs from Notes view in Twitter Bootstrap (with XPages)

Long long long time ago I wrote how to create breadcrumbs in Notes and on the Web with help of JQuery. In case you are interested using Twitter Bootstrap with XPages chances are you want to provide similar navigational options for your beloved users.

The code below demonstrates how to achieve this.

<xp:this.data>
<xp:dominoDocument var=”currentDocument” formName=”Document”></xp:dominoDocument>
</xp:this.data>

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

and the SSJS function looks like:

function getBreadCrumb(){
var nav:NotesViewNavigator = database.getView(“$v-treeview”).createViewNav();
var doc:NotesDocument = currentDocument.getDocument();
if (nav.gotoEntry(doc)) {
var entry:NotesViewEntry = nav.getCurrent();
var list = “”;
list = “<li>” + entry.getColumnValues().elementAt(1).toString() + “</li>” + list;
while (nav.gotoParent(entry)){
entry = nav.getCurrent();
list = “<li>” + entry.getColumnValues().elementAt(1).toString() + “<span class=\”divider\”>/</span></li>” + list;
}
return “<ul class=\”breadcrumb\”>” + list + “</ul>”;
}
return “no docs found”
}

The Notes view $v-treeview has already href references in the column where I collect the information from:

notes view

Don’t forget to set the Display options for Web for the form. I select the form that contains the computed text that calls the getBreadCrumb() function.

Here is how the view looks like in the browser:

Notes view for web

And here the result when I open a document:

breadcrumb tb

Please leave a note when you have suggestions for improvement OR if you have code to put view info into a nav list to create a collapsible menu.

Job Wanted

Looking for a creative brain? Choose me!

job-wanted

Advertisements

2 thoughts on “Breadcrumbs from Notes view in Twitter Bootstrap (with XPages)

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