You might find it helpful to be able to view your staff's structure in an easily modifiable tree view, and if so, this recipe is for you! All this is is a couple of HTML/Javascript/Lava code blocks that interact with each other, and is easy to setup for anyone who is comfortable copying and pasting code.


If you are curious, and a visual person like I am, here is a graph showing the flow of information and how the code blocks interact with each other inside of ROCK.


Essentially, there are three components: a page in ROCK for displaying the staff tree, a workflow that "refreshes" the tree (for when changes are made), and a group that stores your staff members. Simple, right? (Kind of).

If you are wondering why the staff tree page doesn't pull live information from the staff group which would eliminate the need for a workflow in this equation, it is because the code to calculate who is nested under who has several nested for loops which quickly reduce the page loading speed to a crawl. This solution keeps the page loading speed quick. There may be a better way to do this, but lava is not very friendly for manipulating "complex" data structures like a tree with tree nodes, so this is the best I could come up with. The "Refresh Workflow" runs some lava to calculate the HTML for the tree, and stores the result in a group member attribute called "TreeHTML". The reason each person has their own attribute instead of having one global group attribute is because the tree is rendered with a specific person as the "root" or "top" person of the tree, so every person in the group can have their own view of the staff tree, with themselves at the top and the people they supervise below them. 

Instructions for Implementing

  1. Create a page on ROCK wherever you see fit and call it something like "Staff Tree View". This is where you will view the tree.
  2. Add an HTML block to this page.
  3. Copy and Paste this code into the HTML block: StaffTreeView.txt
  4. Create a second page (preferably as a 'child' page to the first page) and call it something like "Staff Tree View Refresh Page"
  5. Add an HTML bock to this page too.
  6. Copy and Paste this code into the HTML block: StaffTreeRefreshPage.txt
  7. In the HTML block settings (cog) check "WorkflowActivate" under "Enabled lava commands".
  8. Import this workflow: Staff_Tree_Refresh_Workflow.json (hint: right click and "save link as" to save this as a file)
  9. Create a group for your staff and name it whatever you would like (or, you can also modify an existing group).
  10. Add the following Group Member Attributes to your Staff Group:StaffTreeRefreshGroupMemberAttributes.jpg
  11. Lastly, go back into the HTML block of the "Staff Tree View" page and edit the four values at the top. To find "Group ID" navigate to the group in group viewer and it will be in the url ("GroupId=x"). To find "Workflow ID", follow the same steps ("workflowTypeId=x"). The "Refresh page URL" is the URL of the second page you created, copy it and paste it into the quotes. Same with the base database URL (make sure it doesn't end in a slash when you paste it).
  12. (Optional) - Add a "Launch Page" like this one:                                                         Tree_Launch_Page.jpg

 i. Add a new page in CMS Page settings and add the following HTML to that page: StaffTreeLauncherPage.txt

ii. Change the four variables at the top of the HTML to the appropriate values that apply to you (hint: to find the group ID of your group, navigate to the group in group viewer and in the URL it will show "GroupId=x".

Instructions for use

  1. When you successfully set all this up, you'll be greeted with a block of text that says "No person parameter found..." blah blah blah. This is because the page you created is dynamically able to load a tree view with whoever you want at the "top" of the tree. You must specify who you want at the top of the tree by putting in "?person=something" at the end of the URL where "something" is the full name of the person you want at the top of the tree. What this means is that if you have several leaders at your church that manage separate teams, you can send them individual links where they only see their team (and nobody else) - pretty cool!
  2. When you click on someone's name, you get two options. One is to view their ROCK profile, and another is to edit the group member details (for changing who they report to, etc).
  3. When you make changes to someone in the group (i.e. changing their supervisor value, or their campus), you must click "refresh tree" at the top. This will recreate the HTML for the page with the new values and refresh the page automatically.


1.1 - Fixed bug that caused people with names that have a capital letter in the middle of the name to not be found in the staff group. (fixed in new StaffTreeView.txt file)

1.0 - Initial Release