Trees
Configuring trees in Umbraco UI Builder, the backoffice UI builder for Umbraco.
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.
![](https://docs.umbraco.com/~gitbook/image?url=https%3A%2F%2F2282367567-files.gitbook.io%2F%7E%2Ffiles%2Fv0%2Fb%2Fgitbook-x-prod.appspot.com%2Fo%2Fspaces%252FaQtFchjsM4Ce0DxWznCF%252Fuploads%252Fgit-blob-c9956e07e081b5a9d1371ba7b93faba00bf0588d%252Ftree.png%3Falt%3Dmedia&width=768&dpr=4&quality=100&sign=abe70b0b&sv=1)
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.
Tree(Lambda treeConfig = null) : TreeConfigBuilder
Accesses the tree config of the given section.
Adding a tree to an existing section
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.
AddTree(string name, string icon, Lambda treeConfig = null) : TreeConfigBuilder
Adds a tree to the current section.
AddTree(string groupName, string name, string icon, Lambda treeConfig = null) : TreeConfigBuilder
Adds a tree to the current section in a group with the given name.
AddTreeBefore(string treeAlias, string name, string icon, Lambda treeConfig = null) : TreeConfigBuilder
Adds a tree to the current section before the tree with the given alias.
AddTreeAfter(string treeAlias, string name, string icon, Lambda treeConfig = null) : TreeConfigBuilder
Adds a tree to the current section after the tree with the given alias.
Changing the tree icon color
SetIconColor(string color) : TreeConfigBuilder
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.
Adding a group to a tree
AddGroup(string name, Lambda groupConfig = null) : GroupConfigBuilder
Adds a group to the current tree with the given name.
Only Umbraco UI Builder section trees can configure groups, where trees added to existing sections cannot.
Adding a folder to a tree/group
AddFolder(string name, Lambda folderConfig = null) : FolderConfigBuilder
Adds a folder to the current tree/group with the given name and a default folder icon. For more information check the Folders documentation.
AddFolder(string name, string icon, Lambda folderConfig = null) : FolderConfigBuilder
Adds a folder to the current tree/group with the given name + icon. For more information check the Folders documentation.
Adding a collection to a tree/group
AddCollection<TEntityType>(Lambda idFieldExpression, string nameSingular, string namePlural, string description, Lambda collectionConfig = null) : CollectionConfigBuilder<TEntityType>
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.
AddCollection<TEntityType>(Lambda idFieldExpression, string nameSingular, string namePlural, string description, string iconSingular, string iconPlural, Lambda collectionConfig = null) : CollectionConfigBuilder<TEntityType>
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.
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.
WithTree(string alias, Lambda treeConfig = null) : WithTreeConfigBuilder
Starts a sub-configuration for the existing Umbraco tree with the given alias.
Adding a context app to an existing tree
AddContextApp(string name, Lambda contextAppConfig = null) : ContextAppConfigBuilder
Adds a context app with the given name and default icon. For more information check the Context App documentation.
AddContextApp(string name, string icon, Lambda contextAppConfig = null) : ContextAppConfigBuilder
Adds a context app to the Umbraco menu with the given name and icon. For more information check the Context App documentation.
AddContextAppBefore(string beforeAlias, string name, Lambda contextAppConfig = null) : ContextAppConfigBuilder
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.
AddContextAppBefore(string beforeAlias, string name, string icon, Lambda contextAppConfig = null) : ContextAppConfigBuilder
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.
AddContextAppAfter(string afterAlias, string name, Lambda contextAppConfig = null) : ContextAppConfigBuilder
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.
AddContextAppAfter(string afterAlias, string name, string icon, Lambda contextAppConfig = null) : ContextAppConfigBuilder
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.
Last updated