Kwintessential Notes

In a modernization project (increase of browser compatibility) I needed to find a solution for a list of links, categorized and sorted like a Notes View.

Since I already use Bootstrap as CSS framework I decided to check the following Bootstrap Treeview project: https://github.com/jonmiles/bootstrap-treeview .  I was satisfied with the following example(s):

The initialisation is pretty simple:

Now I just needed to set up a REST service to provide me the data. The service is setup on an XPage and bounded to a Java class:

The Java class I will reuse for providing multiple data streams so it detects the different method parameters:

As mentioned the data for the list comes from a Notes View. As you all know views entries have different characteristics which I have to bear in mind:

• Documents can land anywhere in the view since it is categorized on a text field where the multiple levels can set individually eg Europe\\Sweden\\Stockholm or Afrika\\Johannesburg.
• The view also holds links for other menus organized under a category so I decided to us a viewnavigator and start collecting data from a specific category.
• For each entry in the view I have to check what type it is: category, document or total. The last one is not of my interest so I have to skip if that option occurs.
• The columnindentlevel tells me all about where I am in the view in comparison with the columnindentlevel of the previous entry. Here are the scenarios:

// case 1: current indent level < columnindentlevel
// -> new category, propobably start situation
// case 2: current indent level = column indentlevel
// -> new category (sibling) but close the previous
// one first (just one level)
// case 3: current indent level > column indent
// level -> new category but closes the previous
// one(s) first. how many depends on difference curr
// and column level

Ofcourse categories behave different that documents.

So here is the code:

Some notes:

• I have set the header of the REST service to text/html and the plugin needs a JavaScript object. Therefor capture my data response in an eval() method.
• A target attribute is not provided by the plugin, so I add one myself. Categories have the # as href so based on that info I include a target attribute or not. I do this via a function:

• If the treeview is collapsed there is no anchor element for underlying list-items so you cannot add the target for all links.
• Also when collapsing and expanding a category the added target attributes are gone. So for opening of every category you need to re-apply the href attribute for underlying anchors.
• A category can be opened via a ‘twistie’ image or the text link so we need to register an action on these onclick events

The result is a nice looking ‘Notes View data-driven’ treeview with Bootstrap styling:

Happy coding 🙂

PS. I noticed I have a lot of unused local variables in my code, you may clean that up 🙂