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:

breadcrumbs

 

Not really exciting but hopefully helpful for you.

Job Wanted

Looking for a creative brain? Choose me!

job-wanted

Advertisements

One thought on “breadcrumbs in XPages (non extension library style)

  1. Howard 2013-June-19 / 3:59 pm

    Nice, only limitation is that the this would only work with response documents and would show the trail back to the main document. Not really a true breadcrumb of how you got there???

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