Tree Outline with lazy loading

Here is my first outline tree.

It can be populated at once or lazily on demand. The demo app has one StaticTree form that loads the whole tree at once and one DynamicTree form that loads only the first level when the form opens and adds the children on demand.

The tree lives in a LinearPanel on the main form and uses one TreeOutline instance on each node and one TreeData instance on each leaf.

The TreeData is very simple: it is just a form that shows the data on each leaf. It can contain just a few labels (with spacing_above = spacing_below = 'none') or any complex form. In the demo I used links that can be used to do something with the data in the leaf being clicked, like opening the document they represent.

The text on the TreeOutline is on a link that can be clicked to collapse or expand its content. If a load_children_callback function is passed during the creation, then the function is called the first time the link is clicked, and it can be used to add the children to the outline.

The TreeOutline has also a LinearPanel that contains all the TreeOutline and TreeData children.

The form that contains the tree must have a LinearPanel and use its add_component to add the TreeOutlines or TreeDatas for the first level of the tree. The add_item function of the DynamicTree and StaticTree functions on the demo app show how to add leaves and branches to the tree.

Here are the published app and the Clone link.

I made this with a free account, without advanced pro features. Once I put my hands on a pro account, I will try to improve it by:

  • Making it a custom component
  • Playing with html/css to better manage the margins (I don’t like the margins on the right, and the margins on the left create an indentation that looks nice on the outlines, but makes no sense on the data)
  • Add data binding
  • Get rid of the add_item in the containing form, perhaps encapsulating its code in the custom component.

Any feedback is welcome :slight_smile:

6 Likes