Basic Org Charts With xe:navigator and xe:beanTreeNode

Jul 6, 2012, 9:30 AM

The topic of generating org charts on an XPage came up recently, and I decided to try my hand at making a pretty basic one using a technique similar to my re-use of Outline design elements from the other week. Not only are the generated hierarchies potentially useful, but it ended up providing a much cleaner example of how to recursively generate an Extension-Library tree.

To get started, I mocked up some basic data: I created a standard Domino directory database and created users with unique ShortName values and the ShortName of their immediate boss in the Manager field, with anyone at the top level having a blank field. Then, because I'm too lazy to look through the existing views to see if one does it, I created a "Managers" view that simply shows Person documents categorized by their Manager field (with a bit of computation to convert self-referential documents to top-level). You can see the live result in the test database, along with applicable code excerpts:

The algorithm itself provides a nice exercise in recursion:

  1. Get a list of all top-level managers
  2. For each of those names:
    1. Find their child count to determine whether or not they're a leaf
    2. Create an outline entry with their name
    3. For each child entry, repeat this process

This could potentially be modified to query an LDAP server instead of reading a view directly, which would make it more flexible (and complicated), and the output could be modified or re-used for other visual representations, as needed.

The absolute most important thing when doing recursion, though, is to make sure you listen to music with an appropriately-nerdy title, such as:

Commenter Photo

Patrick Kwinten - Jul 6, 2012, 3:04 PM

this sounds in potential very powerfull. does it also work with views with a response hierarchy?

Commenter Photo

Jesse Gallagher - Jul 6, 2012, 6:05 PM

Having it traverse a view and building nodes based on the response hierarchy of the view wouldn't be too bad. I suspect the best way to do it would be using a ViewNavigator and the code would actually kind of resemble my Outline thing in the previous post.

Commenter Photo

Muhsin Yen - Oct 14, 2015, 3:46 AM

thank you~ you code

naviagtor static item when selected is set true and user click it and the item have  default background color.

​and use xe:beanTreeNode​

I use you example, and I have a question is navigator property setSelected 

i want to in navigator when user click it and this item change the default background color?

New Comment