breadcrumbs in XPages (non extension library style)

I have still got a question open on the XPages development forum regarding how to use the breadcrumb control from the Extension Library. In case you happen to have an answer on the question, please post  it there (or here…).

Previously I have written more on providing breadcrumbs in Domino and XPages. I overlooked the unshift JavaScript method which allows you to add items in the beginning of an array.

In combination with the getParentID function for a NotesDocument you can simply create an reversed array of all parents and use the array as data a repeat control. Within the repeat control you place a link control and populate the label and document reference.

Here is the code sample:

<?xml version=”1.0″ encoding=”UTF-8″?>
<xp:view xmlns:xp=”http://www.ibm.com/xsp/core”&gt;
<xp:this.data>
<xp:dominoDocument var=”doc” formName=”Document”></xp:dominoDocument>
</xp:this.data>
<xp:div styleClass=”lotusBreadcrumbs” role=”navigation”>
<xp:link value=”/” text=”${database.title}” />
 &gt;&gt; 
<xp:repeat var=”breadcrumbs”>
<xp:this.value><![CDATA[#{javascript:var result = [];
var ref = doc.getParentId();
while(ref){
var parent = database.getDocumentByUNID(ref);
result.unshift({
unid: ref,
label: parent.getItemValueString(“Tx_Document_Title”)
})
ref = parent.getParentDocumentUNID();
}
return result;
}]]></xp:this.value>
<xp:link value=”/0/#{breadcrumbs.unid}” text=”#{breadcrumbs.label}” />
 &gt;&gt; 
</xp:repeat>
<xp:text value=”#{doc.Tx_Document_Title}” />
</xp:div>
</xp:view>

Here is how a result could look like:

 

Not really exciting but hopefully helpful for you.

Job Wanted

Looking for a creative brain? Choose me!

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:

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:

And here the result when I open a document:

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!

Breadcrumbs using JQuery

Bob Balfe asked some time ago who is using JQuery for their Domino development projects. I hoped it was gonna rain with examples of implementation of JQuery plugins in Lotus Notes but so far it remains a bit quiet. So why not describe an example myself?

Figure: Screenshot from the website.

xBreadcrumbs is a nice plugin to JQuery to provide horizontal navigation. It uses an unordered list (UL) as source so when you provide that data dynamically with Notes data it becomes interesting.

In my case the customer wanted to have breadcrumbs on top of documents that are stored in a Notes view. Documents are categorized in a parent-response hierarchy so for each document I have to calculate the complete path from the opened document to its uber-parent (some points on that u) aka as ‘Home’.

Figure: Document location in Notes view.

Figure: Document location in breadcrumb.

Implementation

Download the zip file, extract it and upload the files in your Notes application.

Create a subform that you will embed on the form of your document. Add the following code to the subform:

<script type=”text/javascript” src=”../jquery-1.3.2.min.js”></script>
<script type=”text/javascript” src=”../breadcrumbs/js/xbreadcrumbs.js”></script>
<link rel=”stylesheet” href=”../breadcrumbs/css/xbreadcrumbs.css” />

<script type=”text/javascript”>
$(document).ready(function(){
$(‘#breadcrumbs-2’).xBreadcrumbs({ collapsible: true });
});
</script>

<style type=”text/css”>
.xbreadcrumbs {
background:#FFF none repeat scroll 0 0;
}
.xbreadcrumbs LI {
border-right: none;
background: url(../img/frmwrk/breadcrumb/separator.gif) no-repeat right center;
padding-right: 15px;
}
.xbreadcrumbs LI.current { background: none; }
.xbreadcrumbs LI UL LI { background: none; }
.xbreadcrumbs LI A.home {
background: url(../img/frmwrk/breadcrumb/home.gif) no-repeat left center;
padding-left: 20px;
}
/*  Custom styles for breadcrums (#breadcrumbs-3)  */
.xbreadcrumbs#breadcrumbs-3 {
background: none;
}
.xbreadcrumbs#breadcrumbs-3 LI A {
text-decoration: underline;
color: #0A8ECC;
}
.xbreadcrumbs#breadcrumbs-3 LI A:HOVER, .xbreadcrumbs#breadcrumbs-3 LI.hover A { text-decoration: none; }
.xbreadcrumbs#breadcrumbs-3 LI.current A {
color: #333333;
text-decoration: none;
}
.xbreadcrumbs#breadcrumbs-3 LI {
border-right: none;
background: url(../img/frmwrk/breadcrumb/separator.gif) no-repeat right center;
padding-right: 15px;
padding-left:0px;
}
.xbreadcrumbs#breadcrumbs-3 LI.current { background: none; }
.xbreadcrumbs#breadcrumbs-3 LI UL LI { background: none; padding: 0;  }
</style>

<script src=”../$a-get-bread-crumb?OpenAgent&breadcrumb=<Computed Value>&ul&view=$v-treeview&id=myCrumb&class=xbreadcrumbs&activecrumbclass=current”></script>

The source for my unordered list is the agent $a-get-bread-crumb.

The formula for the computed value is as followed:

@Text(@DocumentUniqueID)

The agent will use the Notes view ‘$v-treeview’, find the document by its document UNID and navigates via each parent all the way up in the Notes view. While doing so the required information to build the unordered list is collected.

By the way, the code for this agent was co-written by my collegue Tomas Ekström.

Reflection

In theory the breadcrumbs were displayed without any problem on the fly. However when moving into production with a database with more than 10.000 documents performance became a problem. It took about 3 seconds to collect the information and thereafter the complete document would be displayed.

Since the customer did not find such a load time acceptable BUT could no longer live without the breadcrumbs any longer I decided to place the subform instead of on top of the form to the bottom of the form and place it via CSS back on top of the document via absolute positioning.

The result is that the content of the document is displayed instantly and the breadcrumbs will follow a few seconds later. Not the nicest solution if you would ask me.

But for small websites (tested with 400 documents) the function works like a charm.

To end this post I will include the code for the agent + some script library.

Code

ULTreeFromView script

class CGI script

$a-get-bread-crumb

Create breadcrumbs (Notes)

The following code lets you store breadcrumbs on a document, based upon the parent-child relation.

Function GetDocumentCategory(doc As notesdocument) As String
Dim session As New notessession
Dim db As notesdatabase
Dim node As notesdocument
Dim Category As String
Set node = doc

Set db = session.currentdatabase

Do While node.isResponse
If node.isvalid Then
Set node = db.getdocumentbyunid(node.parentdocumentunid)
If Category = “” Then
Category = node.Title(0)
Else
Category = node.Title(0) & “\” & Category
End If
End If
Loop

GetDocumentCategory = Category
End Function

Call the function somewhere, for example the querysave event on a form:

Sub Querysave(Source As Notesuidocument, Continue As Variant)
Dim doc As notesdocument
Set doc = source.document
Call doc.replaceitemvalue(“Path”, GetDocumentCategory(doc))
End Sub