Umbraco UI Builder
CMSCloudHeartcoreDXP
15.latest
15.latest
  • Umbraco UI Builder Documentation
  • Known Issues
  • Release Notes
  • Getting Started
    • First Steps with UI Builder
    • Requirements
    • Installing Umbraco UI Builder
    • Licensing
    • Configuration
    • User Interface
  • Upgrading
    • Upgrade your UI Builder setup
    • Upgrading Umbraco UI Builder
    • Version Specific Upgrade Notes
    • Migrate from Konstrukt to Umbraco UI Builder
  • How-to Guides
    • Creating your First Integration
  • Areas
    • Explore Areas in UI Builder
    • Sections
      • Summary Dashboards
    • Trees
      • Folders
    • Dashboards
    • Context Apps
  • Collections
    • Work with Collections in UI Builder
    • The Basics
    • List Views
      • Field Views
    • Editors
    • Child Collections
      • Child Collection Groups
      • Retrieve Child Collections
    • Related Collections
    • Entity Identifier Converters
  • Searching
    • Add Search to Your Collections
    • Searchable Properties
  • Filtering
    • Filter Your Data with Ease
    • Global Filters
    • Data Views
      • Data Views Builders
    • Filterable Properties
  • Actions
    • Trigger Actions in UI Builder
    • The Basics
    • Action Visibility
    • Inbuilt Actions
  • Cards
    • Display Insights with Cards
    • Count Cards
    • Custom Cards
  • Property Editors
    • Enhance Input with Property Editors
    • Entity Picker
  • Advanced
    • Ready to go deeper?
    • Virtual Sub Trees
    • Encrypted Properties
    • Value Mappers
    • Repositories
    • Events
  • Miscellaneous
    • Conventions
    • Umbraco Aliases
Powered by GitBook
On this page
  • Defining a Folder
  • Using the AddFolder() Method
  • Using the AddFolder() Method with Custom Icon
  • Changing a Folder Alias
  • Using the SetAlias() Method
  • Changing a Folder Icon Color
  • Using the SetIconColor() Method
  • Adding a Sub-Folder To a Folder
  • Using the AddFolder() Method for Sub-Folders
  • Using the AddFolder() Method for Sub-Folders with Custom Icon
  • Adding a Collection to a Folder
  • Using the AddCollection<>() Method
  • Using the AddCollection<>() Method with Custom Icons

Was this helpful?

Edit on GitHub
Export as PDF
  1. Areas
  2. Trees

Folders

Configuring folders to organise trees in Umbraco UI Builder.

PreviousTreesNextDashboards

Last updated 2 months ago

Was this helpful?

Folders help organize trees in Umbraco UI Builder, allowing you to structure content with nested folders and collections. A folder can exist within a tree or as a sub-folder within another folder. Folders can contain either sub-folders or .

Defining a Folder

Using the AddFolder() Method

Adds a folder to the current tree with the specified name and a default folder icon.

Method Syntax

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

Example

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

Using the AddFolder() Method with Custom Icon

Adds a folder to the current tree with a specified name and icon.

Method Syntax

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

Example

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

Changing a Folder Alias

When creating a new folder, an alias is automatically generated. However, if you need a specific alias, you can use the SetAlias method to override it.

Using the SetAlias() Method

Sets a custom alias for a folder.

Method Syntax

SetAlias(string alias) : FolderConfigBuilder

Example

folderConfig.SetAlias("settings");

Changing a Folder Icon Color

Using the SetIconColor() Method

Sets the folder icon color to the given color. The available colors are: black, green, yellow, orange, blue, or red.

Method Syntax

SetIconColor(string color) : FolderConfigBuilder

Example

folderConfig.SetIconColor("blue");

Adding a Sub-Folder To a Folder

Using the AddFolder() Method for Sub-Folders

Adds a sub-folder inside the current folder with a specified name and a default folder icon.

Method Syntax

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

Example

folderConfig.AddFolder("Categories", subFolderConfig => {
    ...
});

Using the AddFolder() Method for Sub-Folders with Custom Icon

Adds a sub folder to the current folder with a specified name and custom icon.

Method Syntax

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

Example

folderConfig.AddFolder("Categories", "icon-tags", subFolderConfig => {
    ...
});

Adding a Collection to a Folder

Using the AddCollection<>() Method

Method Syntax

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

Example

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

Using the AddCollection<>() Method with Custom Icons

Method Syntax

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

Example

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

To define a folder, use one of the AddFolder methods on a or parent Folder config builder instance.

Adds a collection to the current folder with the given names, descriptions, and default icons. The ID property must be defined. For more details, see the article.

Adds a collection to the current folder with the given names, description and icons. The ID property must be defined. For more details, see the article.

Tree
Collections
Collections
Collections
Tree with Settings folder