Konstrukt
🚨 Konstrukt is now Umbraco UI Builder 🚨
  • Konstrukt Documentation
  • Getting Started
    • Overview
    • Installation
    • Configuration
    • User Interface
  • Guides
    • Creating your first integration
  • Areas
    • Overview
    • Sections
      • Summary Dashboards
    • Trees
      • Folders
    • Dashboards
    • Context Apps
  • Collections
    • Overview
    • The Basics
    • List Views
      • Field Views
    • Editors
    • Child Collections
      • Child Collection Groups
  • Searching
    • Overview
    • Searchable Properties
  • Filtering
    • Overview
    • Global Filters
    • Data Views
      • Data Views Builders
    • Filterable Properties
  • Actions
    • Overview
    • The Basics
    • Action Visbility
    • Inbuilt Actions
  • Cards
    • Overview
    • Count Cards
    • Custom Cards
  • Property Editors
    • Overview
    • Entity Picker
  • Advanced
    • Virtual Sub Trees
    • Encrypted Properties
    • Value Mappers
    • Repositories
    • Events
  • Extras
    • Conventions
    • Umbraco Aliases
    • Konstrukt vs UI-O-Matic
    • Known Issues
    • Changelog
Powered by GitBook
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
Edit on GitHub
  1. Areas

Trees

Configuring trees in Konstrukt, the back office UI builder for Umbraco.

PreviousSummary DashboardsNextFolders

Last updated 2 years ago

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.

Configuring a Konstrukt section tree

Tree(Lambda treeConfig = null) : KonstruktTreeConfigBuilder

Accesses the tree config of the given section.

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

Adding a tree to an existing section

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

Adds a tree to the current section.

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

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

Adds a tree to the current section in a group with the given name.

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

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

Adds a tree to the current section before the tree with the given alias.

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

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

Adds a tree to the current section after the tree with the given alias.

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

Changing the tree icon color

SetIconColor(string color) : KonstruktTreeConfigBuilder

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");

Adding a group to a tree

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

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 => {
    ...
});

Adding a folder to a tree / group

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

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

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

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

Adding a collection to a tree / group

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

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

AddCollection<TEntityType>(Lambda idFieldExpression, string nameSingular, string namePlural, string description, string iconSingular, string iconPlural, Lambda collectionConfig = null) : KonstruktCollectionConfigBuilder<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

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

Starts a sub configuration for the existing Umbraco tree with the given alias.

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

Adding a context app to an existing tree

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Adds a folder to the current tree / group with the given name and a default folder icon. See the for more info.

Adds a folder to the current tree / group with the given name + icon. See the for more info.

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 for more info.

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 for more info.

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

Adds a context app with the given name and default icon. See the for more info.

Adds a context app to the Umbraco menu with the given name and icon. See the for more info.

Adds a context app with the given name and default icon before the context app with the given alias. See the for more info.

Adds a context app to the Umbraco menu with the given name and icon before the context app with the given alias. See the for more info.

Adds a context app with the given name and default icon after the context app with the given alias. See the for more info.

Adds a context app to the Umbraco menu with the given name and icon after the context app with the given alias. See the for more info.

Section
Folders documentation
Folders documentation
Collections documentation
Collections documentation
Context App documentation
Context App documentation
Context App documentation
Context App documentation
Context App documentation
Context App documentation
Tree
WithSection
KonstruktWithSectionConfigBuilder