Konstrukt
Search…
Trees
Configuring trees in Konstrukt, the back office UI builder for Umbraco.
A tree is a hierarchical structure that helps organise a section into logical sub-sections and is accessed in the main side panel of the Umbraco interface. In Konstrukt, a section may only have a single tree definition, however you can use folder nodes to help organise the tree structure how you need it.
Tree

The tree configuration for Konstrukt sections is a sub configuration of a Section config builder instance and is accessed via it's Tree method.

Accesses the tree config of the given section.
// Example
sectionConfig.Tree(treeConfig => {
...
});

The tree configuration for existing sections is a sub configuration of a WithSection config builder instance and is accessed via one of it's AddTree methods.

Adds a tree to the current section.
// Example
withSectionConfig.AddTree("My Tree", "icon-folder", treeConfig => {
...
});

Adds a tree to the current section in a group with the given name.
// Example
withSectionConfig.AddTree("My Group", "My Tree", "icon-folder", treeConfig => {
...
});

Adds a tree to the current section before the tree with the given alias.
// Example
withSectionConfig.AddTreeBefore("member", "My Tree", "icon-folder", treeConfig => {
...
});

Adds a tree to the current section after the tree with the given alias.
// Example
withSectionConfig.AddTreeAfter("member", "My Tree", "icon-folder", treeConfig => {
...
});

Sets the trees icon color to the given color. Possible options are black, green, yellow, orange, blue or red.
NB: Only trees added to existing sections have an icon. Trees added to Konstrukt sections don't show a tree icon instead they go straight into displaying the tree contents.
// Example
collectionConfig.SetIconColor("blue");

Adds a group to the current tree with the given name.
NB: Only Konstrukt section trees can configure groups, where trees added to existing sections cannot.
// Example
treeConfig.AddGroup("Settings", groupConfig => {
...
});

Adds a folder to the current tree / group with the given name and a default folder icon. See the Folders documentation for more info.
// Example
treeConfig.AddFolder("Settings", folderConfig => {
...
});

Adds a folder to the current tree / group with the given name + icon. See the Folders documentation for more info.
// Example
treeConfig.AddFolder("Settings", "icon-settings", folderConfig => {
...
});

Adds a collection to the current tree / group with the given names and description and default icons. An ID property accessor expression is required so that Konstrukt knows which property is the ID property. See the Collections documentation for more info.
// Example
treeConfig.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 Konstrukt knows which property is the ID property. See the Collections documentation for more info.
// Example
treeConfig.AddCollection<Person>(p => p.Id, "Person", "People", "A collection of people", "icon-umb-users", "icon-umb-users", collectionConfig => {
...
});

You can extend existing trees adding Konstrukt context apps and virtual sub trees by calling the WithTree method of a KonstruktWithSectionConfigBuilder instance.

Starts a sub configuration for the existing Umbraco tree with the given alias.
// Example
sectionConfig.WithTree("content", withTreeConfig => {
...
});

Adds a context app with the given name and default icon. See the Context App documentation for more info.
// Example
withTreeConfig.AddContextApp("Comments", contextAppConfig => {
...
});

Adds a context app to the Umbraco menu with the given name and icon. See the Context App documentation for more info.
// Example
withTreeConfig.AddContextApp("Comments", "icon-chat", contextAppConfig => {
...
});

Adds a context app with the given name and default icon before the context app with the given alias. See the Context App documentation for more info.
// Example
withTreeConfig.AddContextAppBefore("umbContent", "Comments", contextAppConfig => {
...
});

Adds a context app to the Umbraco menu with the given name and icon before the context app with the given alias. See the Context App documentation for more info.
// Example
withTreeConfig.AddContextAppBefore("umbContent", "Comments", "icon-chat", contextAppConfig => {
...
});

Adds a context app with the given name and default icon after the context app with the given alias. See the Context App documentation for more info.
// Example
withTreeConfig.AddContextAppAfter("umbContent", "Comments", contextAppConfig => {
...
});

Adds a context app to the Umbraco menu with the given name and icon after the context app with the given alias. See the Context App documentation for more info.
// Example
withTreeConfig.AddContextAppAfter("umbContent", "Comments", "icon-chat", contextAppConfig => {
...
});
Copy link
Edit on GitHub
On this page
Configuring a Konstrukt section tree
Adding a tree to an existing section
Changing the tree icon color
Adding a group to a tree
Adding a folder to a tree / group
Adding a collection to a tree / group
Extending an existing tree
Adding a context app to an existing tree