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:
- 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 🙂