Tree Widget Example

The configurable tree widget is an advanced widget which can be used to display a recursive tree structure (as an unordered list).
Its main purpose is as a learning tool so new users can learn about structr functionality and adapt the widget to fit their needs.

It needs to be configured with the root object(s) and the attribute name of the collection of children.
In its default configuration it assumes a schema type TreeElement which is related to itself in a One-to-Many relationship. The remote attribute names are assumed as parent and children.
(The root is defined as the node which has no parent node - if more than one node has no parent node, the tree has multiple root elements)

The other configuration switches are for more complex/nested trees. The name of the tree needs to be unique so it can recursively include itself without running into ambiguously named components. This is because it uses the include() function to include a named hidden inner element.

Schema

This schema configuration allows us to use the default widget configuration.

Example Tree Data

We create a couple of TreeElement nodes and connect them appropriately in the Data section to create an example tree.

The resulting tree

After dropping the widget into a new page, we can adjust the configuration to our needs. In this example we use the default configuration and click “Append Widget”

The result is as follows. By default the name attribute of the nodes is displayed and a list of children is rendered. The widget can be adjusted afterwards to display more data or HTML structures in the <li> element in the page tree.