CardScanR available on OpenNTF

I finalized an initial (and presumably final) release on OpenNTF, available here.

The application is a simple contact registration application and ofcourse XPages based. I think the application can be a great start to extend it as an inquiry application…

Personally I learned a bit more on combining LS agents with XPages, navigation rules and ofcourse the OneUI user interface definition (still a puzzle sometimes).

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

Transforming RSS feeds into HTML, run an agent or use a JS Library?

A customer asked me if it would be easy to make (snippets of) RSS feeds from Notes blog applications visible on html pages (generated by Domino)?

Sure I said, but a search on Google brought me however no direct copy and paste result.

I played before with XML and transformation but I am just wondering what would most effective and more important easy for an Editor who maintains a page?

Just adding a little JavaScript on your page and providing the url of the feed, possibly the url of a stylesheet and a parameter how many items you want to have displayed maximum sounds the easiest for me. I am already using JQuery, could I take advantage of this?

How to tackle possible domain issues? Using an agent and do the transfarmation here? What about performance?

Right now I am still searching, but if you have some guidance your help is appreciated!

PS. I looked at services as RSS Include, would be great if there would be a generic solution in Notes for such a service.