Umbraco UI Builder strives to closely mimic the content pipeline while adhering to public and supported APIs. This ensures full compatibility with the Data Type suite for property editing. However, some features in the Umbraco Core rely on internal methods, making full support for certain functionalities challenging. Below is a list of known issues.

Property Editors

Tags

While Umbraco UI Builder supports persisting tag values, it currently does not write these tags to the cmsTags database table. This functionality is managed by the internal tagsRepository, which is not publicly accessible, preventing direct saving in the same manner as Umbraco Core.

Block Editors

Block Editors (Block List/Block Grid) are not currently supported due to casting errors between the JSON string representation and collection property.

An implementation to address this is investigated and will be scheduled for a future major release.

This documentation platform covers only major versions of Umbraco UI Builder. If you are using an unsupported version, you need to go elsewhere.

Umbraco UI Builder is a tool for creating custom Backoffice User Interfaces (UIs) in Umbraco using a fluent API.

If you have a custom data store that you want to manage within Umbraco, you can use Umbraco UI Builder. With few lines of code, you can configure a custom administration UI, and reuse many core components with a consistent look and feel.

With Umbraco UI Builder, custom backoffice integrations can now be set up in minutes rather than days.

Umbraco UI Builder can be integrated into different areas of the Umbraco Backoffice. Before you start managing content, it is essential to decide which area best suits the presentation of your data. Each area offers unique features for displaying and interacting with content.

Once you have identified the most appropriate area, you can proceed with configuring it to suit your needs.

Key Areas for Integration

• : The Sections area allows you to organize your content in a structured layout, enabling users to navigate different parts of the backoffice.

• : The Dashboards area is ideal for creating custom views that provide quick access to key information and statistics.

• : Context Apps provide contextual tools and information based on the specific content a user is working with.

Selecting the correct area is essential to ensure your UI is both functional and user-friendly. Consider the nature of your content and the tasks users need to perform when deciding which area to use.

This article provides upgrade instructions for major versions of Umbraco UI Builder.

Legacy Version Upgrade Notes

For out-of-support versions, see the .

Umbraco UI Builder provides property editors for managing data inside Umbraco content nodes.

The available property editors are:

Umbraco UI Builder includes a search API for filtering and locating specific entities within a collection. This enhances usability, especially in collections with large datasets.

Get started by reviewing how to define searchable properties.

A summary dashboard appears automatically at the root of an Umbraco UI Builder section. It provides an overview of key collections within that section, enabling quick access to list views. Additionally, it allows for adding new entries to the collection, provided the collection is not set to read-only.

By summarizing important data and simplifying navigation, the summary dashboard improves content management efficiency.

Displaying a Collection on the Summary Dashboard

Fluent Conventions

Umbraco UI Builder follows a fluent configuration style, allowing method chaining for concise and readable code. Alternatively, a lambda expression can be used for a more structured approach.

Umbraco UI Builder provides different inbuilt actions that you can use right away.

ExportEntityAction

Namespace: Umbraco.UIBuilder.Infrastructure.Configuration.Actions

Exports entity data to a Comma-Separated Values (CSV) file. It converts all properties into column headings and renders each entity's property values in rows.

In this article, you will learn how to install Umbraco UI Builder into your Umbraco CMS implementation.

Install via Command Line

Run the following command in your web project:

For a class library without UI elements, install:

Install via Visual Studio

To install via Visual Studio, follow these steps:

1. Open Visual Studio and load your project.

2. Go to Tools -> NuGet Package Manager -> Manage NuGet Packages for Solution...

3. Select the Browse tab and search for Umbraco.UIBuilder.

1. Select a version from the Version drop-down based on the Umbraco CMS version you are using.

2. Click Install.

3. [Optional] Search for and install Umbraco.UIBuilder.Startup if installing without UI elements.

Installing a License

For details on how to install a license, see the article.

You can configure Umbraco UI Builder either via a Composer or in the Program.cs.

Option 1: Configuring via a Composer

A Composer is a common approach for registering and configuring services in Umbraco during application startup.

To configure Umbraco UI Builder via a Composer:

1. Create a file called UIBuilderComposer.cs in your project.

2. Implement the IComposer interface and add the configuration inside the Compose method:

Option 2: Configuring via Program.cs

You can also configure Umbraco UI Builder directly in Program.cs using the AddUIBuilder extension method.

To configure Umbraco UI Builder:

1. Open the Program.cs file in your project.

2. Locate the CreateUmbracoBuilder() method.

3. Add AddUIBuilder before AddComposers()

Example Configuration

For a complete sample configuration, see the article.

The AddUIBuilder method accepts a delegate function, allowing you to configure your solution using fluent APIs.

This section summarizes the changes and fixes introduced in each version of Umbraco UI Builder. Each release includes a link to the UI Builder issue tracker, where you can find a list of resolved issues. Individual issues are also linked for more details.

If there are any breaking changes or other issues to be aware of when upgrading they are also noted here.

Release History

Below are the release notes for Umbraco UI Builder, detailing all changes in this version.

(December 18th 2025)

• Updated the cards UI adopting a slimmer appearance

• Fixed card counter caused by a regression in 17.0.0

• Fixed a top padding issue with child collections

(December 12th 2025)

• Fixed a regression impacting child collections

(December 11th 2025)

• Added additional localization support for editor fields labels and descriptions, collection filters, cards, data views

• Fixed entity menu actions display

• Enable columns sorting for collections list view

17.0.0 (November 27th 2025)

• Final release to support Umbraco 17

17.0.0-rc2 (November 25th 2025)

• Compatibility update for Umbraco 17.0.0-rc4 and Swashbuckle 10

17.0.0-rc1 (November 3rd 2025)

• Compatibility update for Umbraco 17.0.0-rc1

Legacy Release Notes

You can find the release notes for Konstrukt in the .

Custom cards enable more complex metric calculations and are defined by a class that implements the Card base class.

When Umbraco UI Builder resolves a card, it tries to do so from the global DI container. This means you can inject any dependencies required for the card's value calculation. If no type is found in the DI container, Umbraco UI Builder will fall back to manually instantiating a new instance of the value mapper.

Defining a Custom Card

To define a custom card, create a class that inherits from the base class Card and configure it in the constructor as shown below:

Configuration Options

Adding a Custom Card to a Collection

Using the AddCard() Method

Adds a custom card of the specified type to the collection.

Method Syntax

Example

Using the AddCard(Type cardType) Method

Adds a custom card of the specified type to the collection, using the Type parameter to pass the card type dynamically.

Method Syntax

Example

Field Views allow customization of the markup used by a field when displayed in a list view. Field Views are implemented as .NET Core View Components, which are passed a FieldViewsContext argument containing information about the entity/field being rendered.

Defining a Field View

You can define a field view in one of two ways:

Basic View File for the Built-In FieldView View Component

For field views, place a view file in the /Views/Shared/Components/FieldView folder with the following markup.

To register the view, pass the name of the view file (excluding the .cshtml file extension) to the relevant API method.

Custom View Component

For more complex field views, create a custom view component class that can use dependency injection for any required dependencies. Use the following signature:

{% hint style="info" %} The FieldViewContext parameter in the InvokeAsync method must be named context. {% endhint %}

For the view component, place a Default.cshtml file into the /Views/Shared/Components/MyComplexFieldView folder with the following markup:

The Field View Context

Field view components are passed a FieldViewContext object with the following properties:

Setting the Field View of a List View Field

A field view is assigned to a list view field as part of the list view configuration. For more information, see the article.

Count cards allow you to define cards directly against the Collection configuration, providing a basic where clause to use in a count SQL statement. These work perfectly for basic data visualizations based on counts of entities in a collection.

If you need to do more than a basic count, see the Custom Cards article.

Adding a Count Card to a Collection

Count cards display basic summaries of key information that may be useful to the editor.

Using the AddCard() Method

Adds a count card with the specified name and a where clause filter expression. The filter expression must be a boolean value.

Method Syntax

Example

Using the AddCard() Method with Icon

Adds a count card with the specified name, an icon, and a where clause filter expression. The filter expression must be a boolean value.

Method Syntax

Example

Change the Color of a Count Card

Using the SetColor() Method

Sets the color for the count card.

Method Syntax

Example

Add a Suffix to a Count Value

Using the SetSuffix() Method

Sets a suffix to be displayed alongside the card value.d

Method Syntax

Example

Formatting the Value of a Count

Using the SetFormat() Method

Sets a custom format for the card's value.

Method Syntax

Example

Use global filters to work with a specific subset of data within a collection. These filters apply to all queries for a given collection.

Applying a Global Filter

Configure global filters in the Collections settings.

Using the SetFilter() Method

Defines a filter using a where clause expression. The expression must return a boolean value.

Method Syntax

Example

Cards provide an API to display summary information in a card-based format, which is useful for displaying key metrics about a collection.

Cards can be defined in two ways:

The Entity Picker property editor allows selecting one or more entities from an Umbraco UI Builder collection.

Configuring an Entity Picker

To configure an entity picker, follow these steps:

Data views builders allow you to create a collection’s data views dynamically at runtime. By default, Umbraco UI Builder uses hard-coded data views from the configuration. However, if you need to generate data views dynamically, a data views builder is required.

When resolving a data views builder, Umbraco UI Builder first attempts to retrieve it from the global Dependency Injection (DI) container. This allows injecting required dependencies into the builder. If no type is defined in the DI container, Umbraco UI Builder falls back to manually instantiating a new instance of the value mapper.

Defining a Data Views Builder

This article explains how to manually upgrade Umbraco UI Builder to the latest version. Before upgrading Umbraco UI Builder, see the for potential breaking changes and common pitfalls.

Umbraco UI Builder is a commercial product. You can use Umbraco UI Builder locally without a license. When running Umbraco UI Builder on a public domain the usage is limited to a single editable collection. To remove these restrictions, a valid license is required.

How Licensing Works

Licenses are sold per backoffice domain and applies to all subdomains. If you have alternative staging/QA environment domains, additional domains can be added to the license on request.

Value mappers in Umbraco UI Builder act as intermediaries between the editor UI and the database, allowing customization of stored field values. By default, Umbraco UI Builder saves data as it would be stored in Umbraco, but value mappers enable modifications.

When resolving a value mapper, Umbraco UI Builder first checks the global DI container. If no type is defined, it manually instantiates a new instance.

Defining a Value Mapper

To define a mapper, create a class that inherits from the base class ValueMapper

In addition to , you may need to create specific views of a collection's data. Umbraco UI Builder provides multiple filtering mechanisms to help with this.

Choose a filtering method from the list below to find out more.

In this article, you will find the requirements to get started with Umbraco UI Builder. Umbraco UI Builder allows you to create and manage custom UI elements for your Umbraco backoffice.

Prerequisites

• Umbraco 15+ website configured and ready to install Umbraco UI Builder.

A collection in Umbraco UI Builder represents a group of entities for a specific data model. It serves as the primary configuration object for defining how the collection integrates into the UI.

You can configure its list view appearance and editing options.

Get started by reviewing the basics of collection configuration.

This guide walks you through a basic implementation of Umbraco UI Builder to manage a custom database table.

Setting Up the Database

Umbraco UI Builder uses PetaPoco as its default persistence layer.

In this section, you will create a Person table to store data.

To create a Person table, run the following script in SQL Server Management Studio (SSMS).

This script creates a table for storing people’s details. You may want to populate it with some dummy data for testing.

Setting Up the Model

With the database table created, define the Person model in your project.

To create a Model:

1. Create a new folder called Models in your project.

2. Add a new class file called Person.cs.

3. Add the following code:

Configure Umbraco UI Builder

With the database and model set up, it is time to configure Umbraco UI Builder to work with the Person model. This will allow you to manage Person entities from the Umbraco backoffice.

The following steps cover the Program.cs approach. For more details, including configuring via a Composer, see the article.

Configuring via Program.cs

1. Open the Program.cs file in your project.

2. Locate the CreateUmbracoBuilder() method.

3. Add AddUIBuilder before AddComposers()

Example Configuration

Here’s an example configuration defining a section, a list view, and an editor for managing Person entities:

Accessing the Umbraco Backoffice

After defining the configuration, compile and run your project. To access the newly defined section, you need to give permission to the backoffice user account:

1. Login to the Umbraco backoffice.

2. Go to the Users section.

3. Navigate to the user group you wish to assign the newly defined section.

1. Submit the changes.

2. Refresh the browser to view the new section.

If you click on a person's name, you will see the following screen:

Summary

This setup allows you to extend and customize your Umbraco site by managing data and entities directly in the backoffice. The simplicity of the implementation allows to create dynamic, user-friendly interfaces for your own data models.

A list view displays a collection entity in a list format and includes features like pagination, custom data views, searching, and bulk actions.

Configuring a List View

The list view configuration is a sub-configuration of a Collection config builder instance and can be accessed via the ListView method.

Using the ListView() Method

Accesses the list view configuration for the specified collection.

Method Syntax

Example

Adding a Field to the List View

Using the AddField() Method

Adds a specified property to the list view.

Method Syntax

Example

Changing the Heading of a Field

Using the SetHeading() Method

Sets the heading for a field in the list view.

Method Syntax

Example

Formatting the Value of a Field

Using the SetFormat() Method

Sets the format expression to the field in the list view.

Method Syntax

Example

Setting the View of a Field

You can customize the field's markup with field views, allowing richer visualizations of the content. For more details, see the article.

Using the SetView() Method

Sets the view component for the list view field.

Method Syntax

Example

Using the SetView<TView>() Method

Sets the view component for the list view field.

Method Syntax

Example

Setting the Visibility of a Field

Using the SetVisibility() Method

Controls the runtime visibility of a field in the list view.

Method Syntax

Example

Changing the Page Size

Using the SetPageSize Method

Sets the number of items per page for the list view.

Method Syntax

Example

This guide walks you through migrating a default Konstrukt solution to Umbraco UI Builder.

Key Changes

Before starting, review these key changes that impact the migration process.

Project, Package, and Namespace changes

Code and UI Changes

Step 1: Replace Dependencies

Replace all existing Konstrukt dependencies with Umbraco UI Builder dependencies.

1. Remove existing Konstrukt packages:

1. Delete the Konstrukt App_Plugins folder:

1. Install Umbraco.UIBuilder:

1. Compile your project against .NET 7.0.

Step 2: Update Namespaces and Entity Names

Update all Konstrukt references to their Umbraco UI Builder alternatives. Ensure you update any Views/Partials that also reference these. See the section for reference.

Step 3: Update Configuration

If your configuration is in a single statement, replace AddKonstrukt with AddUIBuilder.

For multi-step configurations using Action or Card classes, update the config builders and base classes to their UI Builder alternatives as described in .

Step 4: Finalize the Migration

1. Delete obj/bin folders for a clean build.

2. Recompile all projects and ensure all dependencies are restored correctly.

3. Remove existing Konstrukt license files from umbraco\Licenses folder.

1. Run the project.

In one-to-many relationships, a parent entity is associated with multiple entities from another collection. In Umbraco UI Builder, retrieving child collections from such relationships is supported through child repositories. This enables you to access related data effectively, helping to maintain a well-organized backoffice UI.

Models Representation

For a one-to-many relationship, you typically have two models: one for the parent entity and one for the child entity.

In the above example, the Student model represents the parent entity. A student can have multiple associated StudentProjects.

The StudentProjects model represents the child entity. The StudentId is a foreign key that links each StudentProject to the Student entity, establishing the one-to-many relationship.

Child Repositories

To retrieve data from child collections, you can use the IRepositoryFactory to create child repository instances. These repositories provide methods to fetch child entities associated with a given parent entity.

In this example:

• The StudentProjectController is using the IRepositoryFactory to create a child repository for StudentProject.

• The GetAll()method retrieves all child entities related to the given parent.

This structure allows efficient retrieval and management of child entities, providing a well-organized way to interact with related data in Umbraco's backoffice.

Before diving into Umbraco UI Builder, it’s important to understand some of the fundamental concepts of the Umbraco UI. This knowledge will help you navigate and leverage the UI Builder more effectively, as it uses the same UI components to construct interfaces.

Section

A section in Umbraco is a distinct area within the backoffice where related content and functionality are grouped. For example, the Content section is where content management happens, while the Media section handles media files.

Tree

The tree represents the hierarchical structure of items within a section. It organizes content, settings, and data, for quick navigation and locating items. For example, the content tree shows the pages of a website in a nested format.

Dashboard

Each section in the Umbraco backoffice typically starts with a dashboard. This is an introductory screen for the section. It often includes useful links or shortcuts, providing an overview or quick access to the most commonly used features.

Collection

The collection displays a list of items in a tree or grid view. It provides an overview of content or data in a table format, with sortable columns and the option to filter or search through the items. This view is used when you need to work with multiple items at once.

Editor

The editor is where the main content editing occurs. It is structured using tabs, fieldsets, and fields. Tabs organize different sections of content, and fieldsets group related fields together. Each field represents a specific piece of data, such as a text box or an image upload.

Workspace Views

Workspace Views are additional functionality that can be added to an editor. They provide extra features based on the content of the item being edited. For instance, a media Workspace View might allow you to resize or crop an image directly from the editor.

Tabs

Tabs are used to organize content within the editor, allowing users to switch between different sections of a content item. For example, one tab might contain the general settings, while another contains media or advanced options.

Menu Item

A menu item represents an action within the context of a tree node or a list item. It is a clickable item that triggers specific tasks, such as deleting or editing an item.

Bulk Action

Bulk actions allow you to perform an operation on multiple items in the list view at once. For example, you might use a bulk action to delete multiple content items or update their status in a single step.

Umbraco stores identifiers in UDI format for most Umbraco object types.

You can read more about them in the UDI Identifiers section of the documentation.

If you want to reference an Umbraco object in your model and retrieve its Integer or Guid value, you must convert the UDI value.

Use one of UI Builder's converters - EntityIdentifierToIntTypeConverter or EntityIdentifierToGuidTypeConverter. Add it as a [TypeConverterAttribute] to your model's foreign key property.

An entity that references an Umbraco object would look like this:

You can also create a custom type converter. UI Builder will handle data persistence automatically.

Umbraco UI Builder allows encrypting properties to store sensitive information securely. When a property is marked as encrypted, its value is automatically encrypted before storage and decrypted upon retrieval.

Defining Encrypted Properties

Using the AddEncryptedProperty() Method

Encrypts the specified property. The property must be of type String. The value is encrypted before storage and decrypted when retrieved.

Method Syntax

Example

Searchable properties allow you to define any String based properties in a model. It can be searched via Umbraco UI Builder's list view and entity picker search controls.

Both direct String properties and String properties within nested objects can be made searchable, provided the parent object is not null.

Defining Searchable Properties

Using AddSearchableProperty() Method

Use AddSearchableProperty to specify which properties should be included in search functionality.

Method Syntax

Example

Search Expression Pattern

The search behavior differs based on the version:

• Up to version 15.0.1: Search uses the StartsWith method, meaning results include entries that begin with the search term.

• Version 15.0.1 and later: Search can be configured to use Contains, allowing results that include the search term anywhere within the property value.

Example

Data views allow you to define multiple pre-filtered views of the same data source. This is useful when entities exist in different states and you need a way to toggle between them.

Defining Data Views

Data views are defined via the Collections settings.

Using the AddDataView() Method

Creates a data view with the specified name and a where clause filter expression. The expression must return a boolean value.

Method Syntax

Example

Using the AddDataView() Method with Group

Creates a data view within a specified group, using a where clause filter expression. The expression must return a boolean value.

Method Syntax

Example

Using the AddAllDataView Method

Enables the All option for data views in the collection. The method can take an empty string, which will display the CMS localized All value, plain text, or a localized string.

Method Syntax

Actions allow you to perform custom tasks on collections and their entities from different areas in the UI. For Example: menu actions, bulk actions, or individual table row actions.

To get started with actions, check out the basics:

A section in Umbraco represents a distinct area within the backoffice, such as content, media, and so on. Sections are accessible via links in the main menu at the top of the Umbraco interface. Using Umbraco UI Builder, multiple sections can be defined to organize the management of models logically.

Defining a Section

Sections are defined using the AddSection method on the root-level UIBuilderConfigBuilder

By default, actions are hidden in the UI. You must define when and where an action should appear. This can be done either at the action definition level or when registering it in the collection config.

Controlling Default Action Visibility

To define the default visibility of an action, override the IsVisible method of the Action<> base class.

A child collection is a container for data models that are tied to a parent collection. The child collection system shares the API, offering flexibility for managing and displaying related data within your backoffice UI.

By default, child collections are displayed as context apps within the parent model's editor view. If multiple child collections lead to an overcrowded context apps area, consider using the . Using the API, you can group related child collections under a single context app, with each child collection appearing in separate tabs.

Defining a Child Collection

Related collections support the editing of many-to-many relationships in UI Builder. These are used when multiple entities from one collection are linked to multiple entities from another collection, commonly represented through a junction table.

Example Use Case

A classic example is the relationship between Students and Courses, where each student takes many courses, and each course has many students.

Collections Representation

This is how the collections would be represented:

The models representing the entities would be as follows:

Defining a Related Collection

To define a related collection, follow these two steps:

1. Add the collection definition

2. Add the related collection entity picker and definition

Collection definition

Define a related collection by calling the AddRelatedCollection method on the collection config builder instance.

Using the AddRelatedCollection() Method

This method adds a related collection to the current collection, specifying names, descriptions, and default icons. The ID property must be defined, and the relation configuration defines the junction entity with references to parent and child entities.

Method Syntax

Example

Configuring a Related Collection Entity Picker

Define the child collection entity picker by calling the AddRelatedCollectionPickerField method on the parent collection's fieldset config.

Using the AddRelatedCollectionPickerField() Method

This method adds an entity picker with the specified Data Type name to the parent collection editor.

Method Syntax

Example

Defining Repository Methods

Using the GetRelationsByParentIdImpl<>() Method

Retrieves related collections based on the ID of the parent entity.

Method Syntax

Example

Using the SaveRelationImpl<>() Method

Adds a new related collection to the current parent entity.

Method Syntax

Example

Virtual subtrees inject an Umbraco UI Builder tree structure into another Umbraco tree at a specified location, acting as child nodes of the injection point. They extend built-in or third-party package trees with additional features. For example a "loyalty points" program for an e-commerce site can inject related database tables into a Commerce store tree, making management more intuitive.

Defining Virtual SubTrees

Use the AddVirtualSubTree methods of a WithTreeConfigBuilder instance to define a virtual subtree.

Using the AddVirtualSubTree() Method

Adds a virtual subtree to the current tree with visibility controlled by the specified expression.

Method Syntax

Example

Using the AddVirtualSubTreeBefore() Method

Adds a virtual subtree to the current tree before the tree node matches the match expression, with its visibility controlled by the specified expression.

Method Syntax

Example

Using the AddVirtualSubTreeAfter() Method

Adds a virtual subtree to the current tree after the tree node matches the match expression, with its visibility controlled by the specified expression.

Method Syntax

Example

Control the Virtual SubTrees Inject Location

Control the injection location by passing a visibility expression to the AddVirtualSubTree methods on the root UIBuilderConfigBuilder instance. Without a visibility expression, the subtree appears under every node in the target tree. This expression can be used to identify the exact location where the tree should go.

The visibility expression receives a VirtualSubTreeFilterContext argument with relevant contextual information. The information includes the current node being rendered, alongside a list of the current user's user groups for permission-based visibility control. It also includes access to an IServiceProvider for dependency resolution.

Example: Filter Injection by Document Type

Control the Position of the injected Virtual SubTrees

The position of a virtual subtree within the child nodes of the injection node is controlled by using one of the AddVirtualSubTreeBefore or AddVirtualSubTreeAfter methods. These methods need to be on the root level UIBuilderConfigBuilder instance. The match expression identifies the node for insertion. This expression passes a single TreeNode argument to determine the position. It also requires a boolean return value to indicate the relevant location has been found.

Below you can find an example of positioning a subtree after a node with the alias "settings":

Configuring a Virtual SubTree

Virtual subtrees use the Tree config builder API including support for folders and collections. There is an exception when adding collections to a subtree where you will have an additional foreign key expression parameter to define. The foreign key expression links the entities of the collection to the parent node of the subtree. For more information, see the article.

Inject Virtual Subtrees into Third-Party Trees

Out of the box, Umbraco UI Builder supports injecting subtrees into the core content, media, members, and member group trees. It also includes third-party support for settings and commerce trees. To inject into additional trees, implement an ITreeHelper to extract necessary data. The tree helper consists of a tree alias for which the tree helper is. It includes methods to correctly identify the full parent path, a unique ID for a given node ID, and to resolve the actual entity ID. The entity ID should be used for the foreign key collection values.

Once you have defined a tree helper, register the DI container in your startup class.

Once registered, any virtual subtree assigned to the helper’s tree alias will use it to locate required data.

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 Collections.

Defining a Folder

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

Using the AddFolder() Method

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

Method Syntax

Example

Using the AddFolder() Method with Custom Icon

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

Method Syntax

Example

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

Example

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

Example

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

Example

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

Example

Adding a Collection to a Folder

Using the AddCollection<>() Method

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.

Method Syntax

Example

Using the AddCollection<>() Method with Custom Icons

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.

Method Syntax

Example

Dashboards in Umbraco UI Builder provide an intuitive way to present important information and tools at the root of a section within the Umbraco backoffice. They serve as a starting point for users, offering quick access to relevant data, insights, or actions. Dashboards can be customized, reordered, and configured to display for specific user groups, making them a flexible tool for enhancing the backoffice experience. When multiple dashboards are available in a section, they appear in a tabbed layout for navigation.

Defining a Dashboard

You can define a dashboard by calling one of the AddDashboard methods on a or a instance.

Using the AddDashboard() Method

Adds a dashboard with the specified name.

Method Syntax

Example

Using the AddDashboardBefore() Method

Adds a dashboard with the specified name before the dashboard with the given alias.

Method Syntax

Example

Using the AddDashboardAfter() Method

Adds a dashboard with the specified name after the dashboard with the given alias.

Method Syntax

Example

Setting a Custom Dashboard Alias

Using the SetAlias() Method

Sets the alias of the dashboard. By default, an alias is automatically generated based on the supplied name. If a specific alias is required, the SetAlias method can be used to override the default.

Method Syntax

Example

Controlling Dashboard Visibility

Dashboard visibility can be controlled using ShowForUserGroup and HideForUserGroup, which specify which user groups can see the dashboard. These settings can be applied multiple times for different user roles.

By default, dashboards are pre-filtered to display only in their defined section. This filtering is combined with the SetVisibility method to control when a dashboard appears.

Using the SetVisibility() Method

Defines visibility rules for the dashboard.

Method Syntax

Example

Assigning a Collection to a Dashboard

A dashboard can display only one collection. To display multiple collections, multiple dashboards must be configured.

Using the SetCollection<>() Method

Assigns a collection to the dashboard with the specified names, descriptions, and default icons. The ID property must be defined. For more details, see the article.

Method Syntax