Trees
Configuring and customizing Trees to organize and manage the backoffice interface effectively.
Last updated
Was this helpful?
Configuring and customizing Trees to organize and manage the backoffice interface effectively.
Last updated
Was this helpful?
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.
The tree configuration for Umbraco UI Builder sections is part of the Section
config builder and is accessed via its Tree
method.
Tree()
MethodThis method defines the structure and behavior of a tree within a section.
Tree(Lambda treeConfig = null) : TreeConfigBuilder
sectionConfig.Tree(treeConfig => {
...
});
To add a tree to an existing section, use one of the AddTree
methods from the WithSection
config builder.
AddTree()
methodThis method adds a tree to the current section, specifying its name and icon.
AddTree(string name, string icon, Lambda treeConfig = null) : TreeConfigBuilder
withSectionConfig.AddTree("My Tree", "icon-folder", treeConfig => {
...
});
AddTree()
MethodThis method adds a tree to the current section under a specified group.
AddTree(string groupName, string name, string icon, Lambda treeConfig = null) : TreeConfigBuilder
withSectionConfig.AddTree("My Group", "My Tree", "icon-folder", treeConfig => {
...
});
AddTreeBefore()
to Position a TreeThis method adds a tree to the current section before the tree with the specified alias.
AddTreeBefore(string treeAlias, string name, string icon, Lambda treeConfig = null) : TreeConfigBuilder
withSectionConfig.AddTreeBefore("member", "My Tree", "icon-folder", treeConfig => {
...
});
AddTreeAfter()
to Position a TreeThis method adds a tree to the current section after the tree with the specified alias.
AddTreeAfter(string treeAlias, string name, string icon, Lambda treeConfig = null) : TreeConfigBuilder
withSectionConfig.AddTreeAfter("member", "My Tree", "icon-folder", treeConfig => {
...
});
SetIconColor()
MethodThis 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.
SetIconColor(string color) : TreeConfigBuilder
collectionConfig.SetIconColor("blue");
AddGroup()
MethodThis method adds a group to the current tree with the specified name.
Only trees in Umbraco UI Builder sections support groups.
AddGroup(string name, Lambda groupConfig = null) : GroupConfigBuilder
treeConfig.AddGroup("Settings", groupConfig => {
...
});
AddFolder()
MethodThis method adds a folder node inside a tree or group, using the default folder icon. For more details, see the Folders article.
AddFolder(string name, Lambda folderConfig = null) : FolderConfigBuilder
treeConfig.AddFolder("Settings", folderConfig => {
...
});
AddFolder()
Method with Custom IconThis method adds a folder with a specified icon inside a tree or group. For more details, see the Folders article.
AddFolder(string name, string icon, Lambda folderConfig = null) : FolderConfigBuilder
treeConfig.AddFolder("Settings", "icon-settings", folderConfig => {
...
});
AddCollection<>()
MethodThis 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.
AddCollection<TEntityType>(
Lambda idFieldExpression,
string nameSingular,
string namePlural,
string description,
Lambda collectionConfig = null
) : CollectionConfigBuilder<TEntityType>
treeConfig.AddCollection<Person>(
p => p.Id,
"Person",
"People",
"A collection of people",
collectionConfig => {
...
}
);
AddCollection<>()
Method with IconsThis 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.
AddCollection<TEntityType>(
Lambda idFieldExpression,
string nameSingular,
string namePlural,
string description,
string iconSingular,
string iconPlural,
Lambda collectionConfig = null
) : CollectionConfigBuilder<TEntityType>
treeConfig.AddCollection<Person>(
p => p.Id,
"Person",
"People",
"A collection of people",
"icon-umb-users",
"icon-umb-users",
collectionConfig => {
...
}
);
To extend existing trees, call the WithTree
method on a WithSectionConfigBuilder
instance.
WithTree()
MethodThis method starts a sub-configuration for an existing tree with the specified alias.
WithTree(string alias, Lambda treeConfig = null) : WithTreeConfigBuilder
sectionConfig.WithTree("content", withTreeConfig => {
...
});
AddContextApp()
MethodThis method adds a context app with the specified name and default icon. For more details, see the Context Apps article.
AddContextApp(string name, Lambda contextAppConfig = null) : ContextAppConfigBuilder
withTreeConfig.AddContextApp("Comments", contextAppConfig => {
...
});
AddContextApp()
Method with Custom IconThis method adds a context app with the specified name and custom icon. For more details, see the Context Apps article.
AddContextApp(string name, string icon, Lambda contextAppConfig = null) : ContextAppConfigBuilder
withTreeConfig.AddContextApp("Comments", "icon-chat", contextAppConfig => {
...
});
AddContextApp()
Method Before Another Context AppThis 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.
AddContextAppBefore(string beforeAlias, string name, Lambda contextAppConfig = null) : ContextAppConfigBuilder
withTreeConfig.AddContextAppBefore("umbContent", "Comments", contextAppConfig => {
...
});
AddContextApp()
Method with Custom Icon Before Another Context AppThis 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.
AddContextAppBefore(string beforeAlias, string name, string icon, Lambda contextAppConfig = null) : ContextAppConfigBuilder
withTreeConfig.AddContextAppBefore("umbContent", "Comments", "icon-chat", contextAppConfig => {
...
});
AddContextApp()
Method After Another Context AppThis 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.
AddContextAppAfter(string afterAlias, string name, Lambda contextAppConfig = null) : ContextAppConfigBuilder
withTreeConfig.AddContextAppAfter("umbContent", "Comments", contextAppConfig => {
...
});
AddContextApp()
Method with Custom Icon After Another Context AppThis 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.
AddContextAppAfter(string afterAlias, string name, string icon, Lambda contextAppConfig = null) : ContextAppConfigBuilder
withTreeConfig.AddContextAppAfter("umbContent", "Comments", "icon-chat", contextAppConfig => {
...
});