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
(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.
This schema configuration allows us to use the default widget configuration.
We create a couple of TreeElement nodes and connect them appropriately in the
Data section to create an example 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.
- The Structr Knowledge Graph
- About Structr
- Getting Started
- Installation and Setup
- Working with Structr
- Advanced Topics