A tree is a hierarchical structure that helps organize a section into logical sub-sections. A tree is accessed in the main side panel of the Umbraco interface. In Umbraco UI Builder, a section may only have a single tree definition. However, you can use folder nodes to help organize the tree structure as you need it.
Configuring a Umbraco UI Builder section tree
The tree configuration for Umbraco UI Builder sections is a sub-configuration of a Section config builder instance and is accessed via its Tree method.
The tree configuration for existing sections is a sub-configuration of a WithSection config builder instance and is accessed via one of its AddTree methods.
Sets the trees icon color to the given color. The options that are possible are black, green, yellow, orange, blue or red.
Only trees added to existing sections have an icon. Trees added to Umbraco UI Builder sections don't show a tree icon instead they go straight into displaying the tree contents.
Adds a collection to the current tree/group with the given names, descriptions, and default icons. An ID property accessor expression is required so that Umbraco UI Builder knows which property is the ID property. For more information check the Collections documentation.
// ExampletreeConfig.AddCollection<Person>(p =>p.Id,"Person","People","A collection of people", collectionConfig => {...});
Adds a collection to the current tree/group with the given names, description and icons. An ID property accessor expression is required so that Umbraco UI Builder knows which property is the ID property. For more information check the Collections documentation.
// ExampletreeConfig.AddCollection<Person>(p => p.Id, "Person", "People", "A collection of people", "icon-umb-users", "icon-umb-users", collectionConfig => {
...});
Extending an existing tree
You can extend existing trees adding Umbraco UI Builder context apps and virtual sub trees by calling the WithTree method of a WithSectionConfigBuilder instance.
Adds a context app with the given name and default icon before the context app with the given alias. For more information check the Context App documentation.
Adds a context app to the Umbraco menu with the given name and icon before the context app with the given alias. For more information check the Context App documentation.
Adds a context app with the given name and default icon after the context app with the given alias. For more information check the Context App documentation.
Adds a context app to the Umbraco menu with the given name and icon after the context app with the given alias. For more information check the Context App documentation.