Trees

Configuring and customizing Trees to organize and manage the backoffice interface effectively.

A tree is a hierarchical structure that organizes sections into sub-sections. It appears in the main side panel of the Umbraco interface. In Umbraco UI Builder, each section can only have one tree definition, but you can use folder nodes to organize the tree.

Tree

Configuring a Umbraco UI Builder Section Tree

The tree configuration for Umbraco UI Builder sections is part of the Section config builder and is accessed via its Tree method.

Using the Tree() Method

This method defines the structure and behavior of a tree within a section.

Method Syntax

Tree(Lambda treeConfig = null) : TreeConfigBuilder

Example

sectionConfig.Tree(treeConfig => {
    ...
});

Adding a Tree to an Existing Section

To add a tree to an existing section, use one of the AddTree methods from the WithSection config builder.

Using the AddTree() method

This method adds a tree to the current section, specifying its name and icon.

Method Syntax

AddTree(string name, string icon, Lambda treeConfig = null) : TreeConfigBuilder

Example

withSectionConfig.AddTree("My Tree", "icon-folder", treeConfig => {
    ...
});

Grouping Trees with AddTree() Method

This method adds a tree to the current section under a specified group.

Method Syntax

AddTree(string groupName, string name, string icon, Lambda treeConfig = null) : TreeConfigBuilder

Example

withSectionConfig.AddTree("My Group", "My Tree", "icon-folder", treeConfig => {
    ...
});

Using AddTreeBefore() to Position a Tree

This method adds a tree to the current section before the tree with the specified alias.

Method Syntax

AddTreeBefore(string treeAlias, string name, string icon, Lambda treeConfig = null) : TreeConfigBuilder

Example

withSectionConfig.AddTreeBefore("member", "My Tree", "icon-folder", treeConfig => {
    ...
});

Using AddTreeAfter() to Position a Tree

This method adds a tree to the current section after the tree with the specified alias.

Method Syntax

AddTreeAfter(string treeAlias, string name, string icon, Lambda treeConfig = null) : TreeConfigBuilder

Example

withSectionConfig.AddTreeAfter("member", "My Tree", "icon-folder", treeConfig => {
    ...
});

Changing the Tree Icon Color

Using the SetIconColor() Method

This method changes the color of the tree’s icon. The available options are black, green, yellow, orange, blue, or red.

Only trees in existing sections have an icon. Trees in Umbraco UI Builder sections display the tree contents directly.

Method Syntax

SetIconColor(string color) : TreeConfigBuilder

Example

collectionConfig.SetIconColor("blue");

Adding a Group to a Tree

Using the AddGroup() Method

This method adds a group to the current tree with the specified name.

Only trees in Umbraco UI Builder sections support groups.

Method Syntax

AddGroup(string name, Lambda groupConfig = null) : GroupConfigBuilder

Example

treeConfig.AddGroup("Settings", groupConfig => {
    ...
});

Adding a Folder to a Tree or Group

Using the AddFolder() Method

This method adds a folder node inside a tree or group, using the default folder icon. For more details, see the Folders article.

Method Syntax

AddFolder(string name, Lambda folderConfig = null) : FolderConfigBuilder

Example

treeConfig.AddFolder("Settings", folderConfig => {
    ...
});

Using the AddFolder() Method with Custom Icon

This method adds a folder with a specified icon inside a tree or group. For more details, see the Folders article.

Method Syntax

AddFolder(string name, string icon, Lambda folderConfig = null) : FolderConfigBuilder

Example

treeConfig.AddFolder("Settings", "icon-settings", folderConfig => {
    ...
});

Adding a Collection to a Tree or Group

Using the AddCollection<>() Method

This method adds a collection to the current tree or group, specifying its names, descriptions, and default icons. The ID property must be defined. For more details, see the Collections article.

Method Syntax

AddCollection<TEntityType>(
    Lambda idFieldExpression, 
    string nameSingular, 
    string namePlural, 
    string description, 
    Lambda collectionConfig = null
) : CollectionConfigBuilder<TEntityType>

Example

treeConfig.AddCollection<Person>(
    p => p.Id, 
    "Person", 
    "People", 
    "A collection of people", 
    collectionConfig => {
        ...
    }
);

Using the AddCollection<>() Method with Icons

This method adds a collection to the current tree or group, specifying its names, descriptions, and custom icons. The ID property must be defined. For more details, see the Collections article.

Method Syntax

AddCollection<TEntityType>(
    Lambda idFieldExpression, 
    string nameSingular, 
    string namePlural, 
    string description, 
    string iconSingular, 
    string iconPlural, 
    Lambda collectionConfig = null
) : CollectionConfigBuilder<TEntityType>

Example

treeConfig.AddCollection<Person>(
    p => p.Id, 
    "Person", 
    "People", 
    "A collection of people", 
    "icon-umb-users", 
    "icon-umb-users", 
    collectionConfig => {
        ...
    }
);

Extending an Existing Tree

To extend existing trees, call the WithTree method on a WithSectionConfigBuilder instance.

Using the WithTree() Method

This method starts a sub-configuration for an existing tree with the specified alias.

Method Syntax

WithTree(string alias, Lambda treeConfig = null) : WithTreeConfigBuilder

Example

sectionConfig.WithTree("content", withTreeConfig => {
    ...
});

Adding a Context App to an Existing Tree

Using the AddContextApp() Method

This method adds a context app with the specified name and default icon. For more details, see the Context Apps article.

Method Syntax

AddContextApp(string name, Lambda contextAppConfig = null) : ContextAppConfigBuilder

Example

withTreeConfig.AddContextApp("Comments", contextAppConfig => {
    ...
});

Using the AddContextApp() Method with Custom Icon

This method adds a context app with the specified name and custom icon. For more details, see the Context Apps article.

Method Syntax

AddContextApp(string name, string icon, Lambda contextAppConfig = null) : ContextAppConfigBuilder

Example

withTreeConfig.AddContextApp("Comments", "icon-chat", contextAppConfig => {
    ...
});

Adding a Context App Before or After Another Context App

Using the AddContextApp() Method Before Another Context App

This method adds a context app with the specified name and default icon before the specified context app alias. For more information, see the Context Apps article.

Method Syntax

AddContextAppBefore(string beforeAlias, string name, Lambda contextAppConfig = null) : ContextAppConfigBuilder

Example

withTreeConfig.AddContextAppBefore("umbContent", "Comments", contextAppConfig => {
    ...
});

Using the AddContextApp() Method with Custom Icon Before Another Context App

This method adds a context app with the specified name and custom icon before the specified context app alias. For more information, see the Context Apps article.

Method Syntax

AddContextAppBefore(string beforeAlias, string name, string icon, Lambda contextAppConfig = null) : ContextAppConfigBuilder

Example

withTreeConfig.AddContextAppBefore("umbContent", "Comments", "icon-chat", contextAppConfig => {
    ...
});

Using the AddContextApp() Method After Another Context App

This method adds a context app with the specified name and default icon after the specified context app alias. For more information, see the Context Apps article.

Method Syntax

AddContextAppAfter(string afterAlias, string name, Lambda contextAppConfig = null) : ContextAppConfigBuilder

Example

withTreeConfig.AddContextAppAfter("umbContent", "Comments", contextAppConfig => {
    ...
});

Using the AddContextApp() Method with Custom Icon After Another Context App

This method adds a context app with the specified name and custom icon after the specified context app alias. For more information, see the Context Apps article.

Method Syntax

AddContextAppAfter(string afterAlias, string name, string icon, Lambda contextAppConfig = null) : ContextAppConfigBuilder

Example

withTreeConfig.AddContextAppAfter("umbContent", "Comments", "icon-chat", contextAppConfig => {
    ...
});