Servoy Tutorial: Table Tree View

    Servoy Tutorial Photo Credit: Denis Collette via Compfight

    Servoy Tutorial Photo Credit:
    Denis Collette via Compfight

    This Servoy Tutorial is on how to build a table with expandable/collapsible nodes, like a tree. True, you can probably find a CSS, JQuery or DHTML control that does it better, but this is done using the native Servoy table view.

    I first did this back in Servoy 4, and have used it on almost every project I have worked on. Seems like there is always a need to show related records (or child records) in table views. It’s not always appropriate to use a tree view, and as I mentioned in my Servoy tutorial The Demise of the Tree View, users hate the tree view (in my experience). So, I thought I would share the basics here, in the hopes that it will help someone else, maybe even inspire a more elegant solution (using objects?), that in turn, is also shared with the community. I’m sure others have had a need for a table with child nodes, so let’s take a look how to implement this.

    In almost every table I add to a database, there are some standard columns that get added. Columns like “created_by_id”, “created_date”, “modified_by_id”, “modified_date” are the classic ones (left out of this example for simplification), but I also always add columns called “sequence_nr”, “sequence_icon”. I use these two columns for sorting records in all table views, as discussed in my earlier Servoy tutorial Optimized Table Shuffle. In this implementation, we add two additional columns, called “parent_id”, “parent_icon”, which will be used for handling the node expand/collapse effects. Any table in your database, that you want to use this technique with, needs these four columns.

    tableTree_4

    Shown below is a table view that will be used to demonstrate the node expand/collapse effect. Notice that row 2, 6 and 10 are showing a different icon in column 1 then the other rows. The icon in column one is the value of “parent_icon” from our table. I’m also showing the “tree_id”, “parent_id” and “sequence_nr” columns from the table, so that we get some insight as to what is going on.

    When this form is shown, the scopes.utils.tableTreeView_refresh() method is called. This method takes care of refreshing all the values of “parent_icon”, and restores the view to show nodes depending on whether they were last collapsed or expanded. In this case, we see all the parent nodes (with the arrows) are collapsed.

    tableTree_1

    When we click on the arrow icon for row 2, the scopes.utils.tableTreeView_toggleParent() method will be called. It will expand the parent node and show the children. The children get a new “parent_icon” that shows whether they are a child or the last child. In our example, 2b is the last child of parent 2.

    tableTree_2

    Clicking collapsed parent nodes 6 and 10 reveals the remaining children. We can now see all the records with no children, as well as all the parents and their children. If you leave this view and come back, it will be restored to exactly as shown below.

    tableTree_3

    I’m not going to go through the code and try an explain it. Suffice it to say it does a lot of array manipulations. I stripped out as many of the extra features as I could, so you have the basic example to study.

    There are several things that have been removed, that would be a good exercise for you to work on, if you need this type of view (or maybe just hire someone to help you?). For example, often data needs to be filtered by other keys, because the records in the table view is filtered, so you need to take that into consideration. Also, you may want to save the expand/collapsed view by user, so that the view is restored to its prior state for the logged in user. What about expanding children of children (more than one level deep)? Hmmm….

    Here is the method that fires when column 1, parent_icon, is clicked. It takes care of setting a parent to either expand or collapse, and then calls the refresh method to load the appropriate children.

    That concludes this Servoy tutorial; short and sweet. Hopefully someone out there finds the technique shown here useful and can learn a thing or two from the example. I hope you enjoyed it, and I look forward to bringing you more Servoy tutorials in the future.

    Please subscribe to receive notification when new articles are published, and share your comments below.

    Gary Dotzlaw

    Gary Dotzlaw

    CEO at Dotzlaw Consulting
    Gary Dotzlaw has 20+ years of experience as a professional software developer and has worked with over 100 companies throughout the USA and Canada. Gary has extensive qualifications in all facets of the project life cycle, including initial feasibility analysis, conceptual design, technical design, development, implementation and deployment. Gary is an expert Servoy Developer, with extensive large-commercial project experience, and has written numerous advanced tutorials on Servoy development.