Umbraco UI Builder tries its best to mimic the content pipeline as closely as possible whilst sticking to public and supported APIs. This is so that the Data Type suite can be used fully for editing properties. There are some features in the Umbraco Core that are locked away in internal methods. This means that some features may not be fully supported. Below is a list of known issues to date.

Property Editors

Tags

Whilst we have support for persisting the tag's value, we don't currently have the ability to write these tags to the cmsTags DB table. This is all handled via a tagsRepository which is internal so we currently can't save to it as core does.

Multi-Node Tree Picker

When using a Multi-Node Tree Picker with an XPath filter, only filters starting with the $root placeholder will be valid. This is because all other placeholders expect the property editor to be placed on a content node, with that node being used as context.

RTE Macros

Macros in Rich Text Editors don't appear to work properly due to the preview mechanism. They save and run on the front end, but you'll get an error notification in the backoffice as it tries to render a preview.

Block Editors

The Block Editors (Block List/Block Grid) are not supported due to an undefined error with umbVariantContent in the $scope chain.

Umbraco UI Builder is the Umbraco v10+ backoffice UI builder for custom data structures configured via a fluent API.

If you have a custom data store that you want to content manage from within Umbraco, then you can use Umbraco UI Builder. With some 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 take a matter of minutes, rather than days.

Using the Documentation

This documentation is aimed at developers who have at least a basic understanding of Umbraco, as well as C#/MVC principles.

If you are new to Umbraco UI Builder, it is recommended that you start by taking a look at the section. This provides details on the system requirements and how to install Umbraco UI Builder.

Once you have Umbraco UI Builder installed and are wondering "What next?" then you'll want to take a look at the section. This provides a quick-start example of how to configure Umbraco UI Builder.

Use the main menu to dive deeper into Umbraco UI Builder and get to know all of its features in detail. You can then jump to the specific topic you are interested in to find out more.

Finally, for all other resources/useful information you can head over to the section.

Getting Help

If you require assistance you can use our support channels to seek assistance.

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

In this section, we have summarized the changes to Umbraco UI Builder released in each version. Each version is presented with a link to the showing a list of issues resolved in the release. We also link to the individual issues themselves from the detail.

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

A collection is the cornerstone Umbraco UI Builder config and it represents a collection of entities for a given data model. From this config object, you can configure everything about how this collection integrates into the UI. You can also configure how it should display in a list view as well as how it should be edited.

Get started by reviewing the basics of collection configuration.

Actions provide an API to perform custom tasks against a collection and its entities from multiple locations in the UI. Examples: menu actions, bulk actions, or individual table row actions.

Get started with actions by learning about the basics.

A summary dashboard is automatically displayed at the root of a defined Umbraco UI Builder section. It displays summaries of collections found within it that are told to display on the dashboard. It also provides quick links to jump to that collections list view. It can also add quickly a new entry to that collection (if the collection isn't read-only).

Showing a collection on a summary dashboard

Showing a collection in the summary dashboard is controlled via the collection configuration.

ShowOnSummaryDashboard() : CollectionConfigBuilder<TEntityType>

Sets the collection to display on the summary dashboard.

This section will guide you through the key steps necessary to get you started with Umbraco UI Builder.

It is assumed that you have an Umbraco 10+ website configured, and ready to install Umbraco UI Builder.

System Requirements

At this time, the minimum requirements for using Umbraco UI Builder are as follows:

• Umbraco CMS version 10.0/12.0+

• SQL Server Database (SQLite is fine for testing, but not recommended for live deployments)

Versioning

This is an add-on product to Umbraco CMS. Umbraco UI Builder follows the .

Cards provide an API to display basic summary information in a card-based format and are useful for displaying key metrics about a collection.

Cards can be defined in one of two ways:

Umbraco UI Builder is a commercial product. You can run an Umbraco UI Builder unrestricted locally without the need a license. Running Umbraco UI Builder on a public domain will display a warning banner in the backoffice and will limit usage to a single editable collection. To remove these restrictions, you'll need to have a valid license.

How does it work?

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

This article shows how to manually upgrade Umbraco UI Builder to run the latest version. When upgrading Umbraco UI Builder, be sure to also consult the notes to learn about potential breaking changes and common pitfalls.

Before you get to know Umbraco UI Builder, you need to become familiar with the Umbraco UI and a few of its concepts. This is because Umbraco UI Builder reuses these same concepts for constructing its UI.

1. Section A distinct area of the Umbraco backoffice.2. Tree A hierarchical structure to help organize a section. 3. Dashboard An intro screen for a section, usually with useful links for that section.

4. List View A list-based view of items in a tree node.

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

You can read more about them in the 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

A child collection is a container for a given data model that is tied to a parent collection data model. It shares all of the config builder API except child collections cannot contain further child collections.

There are different areas of the Umbraco UI that Umbraco UI Builder can be injected into. Before you get to managing your actual content you need to choose which area makes the most sense to present that data in. Then you can review how to go about configuring that particular type of area.

Choose an area type from the list below to find out more.

Beyond listing collection entities, if you need to be able to locate specific entities within a collection then Umbraco UI Builder provides a search API.

Get started by reviewing how to define searchable properties.

Umbraco UI Builder can be configured directly via the AddUIBuilder extension method on IUmbracoBuilder.

AddUIBuilder

To configure Umbraco UI Builder via the AddUIBuilder

As well as the API for managing your custom data source, Umbraco UI Builder also comes with some property editors. Those property editors help you work with your data inside Umbraco content nodes.

The property editors available are:

Umbraco UI Builder comes with some inbuilt actions that are available for you to use straight away.

ExportEntityAction

Namespace Umbraco.UIBuilder.Infrastructure.Configuration.Actions

Provides a Comma-Separated Values (CSV) export functionality converting all properties to column headings and rendering each entity property values on each row.

ImportEntityAction

Namespace Umbraco.UIBuilder.Infrastructure.Configuration.Actions

Provides a Comma-Separated Values (CSV) import functionality matching column headings with entity properties and mapping row values to an entity.

Fluent Conventions

Most configuration methods in Umbraco UI Builder aim to be fluent. This means that they return a relevant config instance allowing to chain multiple methods calls together in one. For those who prefer to be a bit more verbose, many methods also accept an optional lambda expression. This allows you to pass in a delegate to perform the inner configuration of the element being defined.

// Chaining example
config.AddSection("Repositories").Tree().AddCollection<People>(p => p.Id, "Person", "People");

// Delegate example
config.AddSection("Repositories", sectionConfig => {
    sectionConfig.Tree(treeConfig => {
        treeConfig.AddCollection<People>(p => p.Id, "Person", "People");
    });
});

Naming Conventions

Throughout the API, where a method name starts with Add then multiple configurations can be declared. Whereas if a method name starts with Set then only one instance of the configuration can be declared within the current configuration context.

Repositories are used by Umbraco UI Builder to access the entity data stores. By default, collections will use a generic built-in NPoco repository. However, you can define your own repository implementation should you wish to store your entities via an alternative strategy.

Defining a repository

To define a repository create a class that inherits from the base class Repository<TEntity, TId> and implements all of its abstract methods.

Note: For all Impl methods there are public alternatives without the Impl suffix. However, there are separate implementation methods in order to ensure all repositories fire the relevant Umbraco UI Builder events. This is whether triggered via the Umbraco UI Builder's UI or not.

Changing the repository implementation of a collection

SetRepositoryType<TRepositoryType>() : CollectionConfigBuilder<TEntityType>

Sets the repository type to the given type for the current collection.

SetRepositoryType(Type repositoryType) : CollectionConfigBuilder<TEntityType>

Sets the repository type to the given type for the current collection.

Accessing a repository in code

To help with accessing a repository (default or custom) Umbraco UI Builder has an IRepositoryFactory you can inject into your code base. This includes a couple of factory methods to create the repository instances for you. Repositories should only be created via the repository factory as there are some injected dependencies that can only be resolved by Umbraco UI Builder.

IRepositoryFactory.GetRepository<TEntity, TId>() : Repository<TEntity, TId>

Creates a repository for the given entity type. Umbraco UI Builder will search the configuration for the first section/collection with a configuration for the given entity type. Then it will use that as a repository configuration.

IRepositoryFactory.GetRepository<TEntity, TId>(string collectionAlias) : Repository<TEntity, TId>

Creates a repository for the given entity type from the collection with the given alias.

Data views builders allow you to create a collection data views list dynamically at run time. By default, Umbraco UI Builder will use the hard-coded data views defined in your Umbraco UI Builder config. However, if you need to build your data views list dynamically, then this is when you'd use a data views builder.

When Umbraco UI Builder resolves a data views builder it will attempt to do so from the global DI container. This means you can inject any dependencies that you require for your builder. If there is no type defined in the DI container, Umbraco UI Builder will fall-back to manually instantiating a new instance of value mapper.

Defining a data views builder

To define a data views builder you can create a class that inherits from the base class DataViewsBuilder<TEntityType> and implements the abstract methods.

The required methods are:

• GetDataViews: Returns the list of data views to choose from.

• GetDataViewWhereClause: Returns the boolean where clause expression for the given data views alias.

Setting the data views builder of a collection

Setting a data views builder is controlled via the configuration.

SetDataViewsBuilder<TDataViewsBuilder>() : CollectionConfigBuilder<TEntityType>

Sets the collections data views builder which allows you to define the data views dynamically at run time.

SetDataViewsBuilder(Type dataViewsBuilderType) : CollectionConfigBuilder<TEntityType>

Sets the collections data views builder which allows you to define the data views dynamically at run time.

SetDataViewsBuilder(DataViewsBuilder<TEntityType> dataViewsBuilder) : CollectionConfigBuilder<TEntityType>

Sets the collections data views builder which allows you to define the data views dynamically at run time.

Searchable properties allow you to define any String based properties on a model. They will be searchable via Umbraco UI Builder's list view and entity picker search controls.

You can also use any String based property of nested objects of a model, as long as the parent object is not null.

Defining searchable properties

AddSearchableProperty(Lambda searchablePropertyExpression) : CollectionConfigBuilder<TEntityType>

Adds the given property to the searchable properties collection.

Search Expression Pattern

Up to version 13.1.6, the search was performed using the StartsWith method call. From 13.1.6 and up, search operations can be performed using the Contains method call.

Umbraco UI Builder is installed via the NuGet package manager by issuing the following command in your web project.

dotnet add package Umbraco.UIBuilder

If you wish to install Umbraco UI Builder into a class library without the UI elements, you can add a reference to the Umbraco.UIBuilder.Startup package instead.

dotnet add package Umbraco.UIBuilder.Startup

Alternatively, you can also find and install the NuGet package via the NuGet Package Manager graphical user interface (GUI) in Visual Studio.

Installing a License

See the for details on how to install a license.

If needed to collect sensitive information in a collection but don't want to persist in a plain text format to the data storage mechanism. Umbraco UI Builder can help with this by allowing you to define properties as encrypted. After which any time the value is persisted or retrieved from persistence, Umbraco UI Builder will automatically encrypt and decrypt the value.

Defining encrypted properties

AddEncryptedProperty(Lambda encryptedPropertyExpression) : CollectionConfigBuilder<TEntityType>

Adds the given property to the encrypted properties collection. Property must be of type String. When set, the property will be encrypted/decrypted on write/read respectively.

Field Views allow you to customize the markup used by a field when displayed in a list view. Field Views are implemented as .NET Core View Components that are passed a single FieldViewsContext argument with information about the entity/field being rendered.

Defining a field view

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

A value mapper is an Umbraco UI Builder helper class that sits between the editor UI and the database. It also lets you tweak the stored value of a field. By default Umbraco UI Builder will save a datatype value as it would be stored in Umbraco. Value mappers let you change this.

When Umbraco UI Builder resolves a value mapper it will attempt to do so from the global DI container. This means you can inject any dependencies that you require for your mapper. If there is no type defined in the DI container, Umbraco UI Builder will fall-back to manually instantiating a new instance of value mapper.

Defining a value mapper

Retrieving child collections in one-to-many relationships with UI Builder, can be achieved with the support of child repositories. One-to-many relations are where one parent entity of a collection is associated with multiple entities from another.

Models Representation

The models would look like this:

A child collection group is a container for other child collections. Its purpose is mainly to provide a logical grouping of multiple child collections to help with organization and an improved user experience.

Defining a child collection group

You can define a child collection group by calling one of the AddChildCollectionGroup

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

Defining data views

Data views are defined via the configuration.

If you want to work with a subset of data within a given collection then this is where the global filters come in handy. These allow you to define a filter to apply to all queries for a given collection.

Applying a global filter

Applying a global filter is controlled via the configuration.

This page covers specific upgrade documentation for when migrating to major 13 of Umbraco UI Builder.

A dashboard is a view that is displayed at the root of a section and contains welcome information. It also includes useful tools relevant to the given section. When there are multiple dashboards to display in a section these are presented in a tabbed layout to allow you to switch between the dashboards.

Defining a dashboard

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

AddDashboard(string name, Lambda dashboardConfig = null) : DashboardConfigBuilder

Adds a dashboard with the given name.

AddDashboardBefore(string beforeAlias, string name, Lambda dashboardConfig = null) : DashboardConfigBuilder

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

AddDashboardAfter(string afterAlias, string name, Lambda dashboardConfig = null) : DashboardConfigBuilder

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

Changing a dashboard alias

SetAlias(string alias) : DashboardConfigBuilder

Sets the alias of the dashboard.

Optional: When adding a new dashboard, an alias is automatically generated from the supplied name for you. However, if you need a specific alias you can use the SetAlias method to override this.

Changing when a dashboard should display

Changing when a dashboard is displayed is controlled via an inner config. Options on the inner config are ShowForUserGroup and HideForUserGroup to control the visibility of the dashboard for given user groups. You can call these config methods multiple times to add multiple role configurations.

By default, will pre-filter dashboards to display only on the section it is defined in. This will be combined with the SetVisibility config to decide when to display the dashboard.

SetVisibility(Lambda visibilityConfig) : DashboardConfigBuilder

Sets the dashboard visibility config.

Setting the collection of a dashboard

Dashboards are only able to display a single collection. If you need to display multiple collections, then you need to configure multiple dashboards.

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

Sets the collection of the current dashboard with the given names, descriptions, and default icons. An ID property accessor expression is required so that Umbraco UI Builder knows which property is the ID property. For more information check the .

SetCollection<TEntityType>(Lambda idFieldExpression, Lambda fkFieldExpression, string nameSingular, string namePlural, string description, string iconSingular, string iconPlural, Lambda collectionConfig = null) : ContextAppConfigBuilder

Sets the collection of the current dashboard with the given names, description and icons. An ID property accessor expression is required so that Umbraco UI Builder knows which property is the ID property. For more information check the .

Related collections add support for editing many-to-many relationships with UI Builder. These are found when multiple entities from one collection are associated with multiple entities from another. They are modeled in a database via two tables related to a junction table.

A classic example is with Students and Courses. Each course has many students, and each student takes many courses.

Collections Representation

A representation of your collections would look like this:

And the entities would be represented using the following Models:

Defining a related collection

You can get started with related collection through a two step process:

1. Add collection definition

2. Add related collection entity picker and definition

Collection definition

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

AddRelatedCollection<TEntityType, TRelatedEntityType, TJunctionEntityType>(Expression<Func<TRelatedEntityType, object>> idPropertyExpression, string nameSingular, string namePlural, Action<RelationConfigBuilder<TBuilder, TEntity, TRelatedEntityType, TJunctionEntityType>> relationConfig)

Adds a related collection to the current collection with the given names, descriptions, and default icons. A property accessor expression is required for the entity ID field of the entity. The relation configuration will define the junction entity by specifying the references to parent and child entities.

Configuring a related collection entity picker

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

AddRelatedCollectionPickerField<TValueType>(string alias, string dataTypeName, string label)

Adds an entity picker with the specified Data Type name to the editor of the parent collection.

Defining repository methods

IEnumerable GetRelationsByParentIdImpl(int parentId, string relationAlias)

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

StudentCourse SaveRelationImpl(StudentCourse entity)

Adds a new related collection to the current parent entity.

A list view is a list-based view of a collection entity providing features: pagination for large collections, 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 is accessed via its ListView method.

ListView(Lambda listViewConfig = null) : ListViewConfigBuilder<TEntityType>

Accesses the list view config of the given collection.

Adding a field to the list view

AddField(Lambda propertyExpression, Lambda fieldConfig = null) : ListViewFieldConfigBuilder<TEntityType, TValueType>

Adds the given property to the list view.

Changing the heading of a field

SetHeading(string heading) : ListViewFieldConfigBuilder<TEntityType, TValueType>

Sets the heading for the list view field.

Formatting the value of a field

SetFormat(Lambda formatExpression) : ListViewFieldConfigBuilder<TEntityType, TValueType>

Sets the format expression for the list view field.

Setting the view of a field

With field views, you can customize the markup the list view's field so you can show richer visualizations of the field's content. For more information you can check the .

SetView(string viewComponentName) : ListViewFieldConfigBuilder<TEntityType, TValueType>

Sets the view component for the list view field.

SetView<TView>() : ListViewFieldConfigBuilder<TEntityType, TValueType>

Sets the view component for the list view field.

Setting the visibility of a field

SetVisibility(Predicate<ListViewFieldVisibilityContext> visibilityExpression) : ListViewFieldConfigBuilder<TEntityType, TValueType>

Sets the runtime visibility of the list view field.

Changing the page size

SetPageSize(int pageSize) : ListViewConfigBuilder<TEntityType>

Sets the number of items to display per page for the given list view.

The Entity Picker property editor is an Umbraco property editor that lets you select one or more entities from an Umbraco UI Builder collection.

Configuring an entity picker

To configure an entity picker you need to create a Data Type in the Umbraco backoffice. From the property editor dropdown choose 'Umbraco UI Builder Entity Picker'.

From there choose 'Section' and 'Collection' you wish to pick entities from. You can also choose an optional list view 'Data View' if there are any configured.

You can also set a minimum and maximum number of items to be able to pick if required.

With an entity picker Data Type defined, finish off the configuration by adding it to the desired Document Type definition.

Using an entity picker

Using the entity picker should be pretty familiar as it aims to mimic the content picker as closely as possible.

To pick an entity click the 'Add' link to launch the picker dialog. The dialog should present a paginated list of entities to pick from. If any searchable fields were configured for the entity type, you can perform a search by typing a search term in the search input field.

To pick your items click on the entity names and then click 'Select' in the bottom right-hand corner.

The picker should display a summary of the selected entities which can be sorted by dragging the selected entities into the desired order.

To save the value either save or save and publish the current document.

Getting the value of an entity picker

The entity picker property editor comes with a built-in . This means that whenever you retrieve the property value from Umbraco it will return the actual selected entities, even converting them to the relevant type.

Custom cards allow you to perform more complex metric calculations and are defined via a class implementing the Card base class.

When Umbraco UI Builder resolves a card it will attempt to do so from the global DI container. This means you can inject any dependencies that you require for your card to calculate its value. If there is no type defined in the DI container, Umbraco UI Builder will fall-back to manually instantiating a new instance of value mapper.

Defining a custom card

To define a card you create a class that inherits from the base class Card and configure it within the constructor like so.

The required configuration options are:

• Name: The name of the card.

• Alias: A unique alias for the card.

• GetValue(object parentId = null): A method to get the cards value.

Additional optional configuration options are:

• Icon: An icon to display in the card.

• Color: The color of the card.

• Suffix: A suffix to display after the card value.

Adding a custom card to a collection

AddCard() : CollectionConfigBuilder<TEntityType>

Adds a card of the given type to the collection.

AddCard(Type cardType) : CollectionConfigBuilder<TEntityType>

Adds a card of the given type to the collection.

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, you'll want to take a look at the custom cards documentation.

Adding a count card to a collection

Cards allow you to display basic summaries of key information that may be useful to the editor.

AddCard(string name, Lambda whereClauseExpression, Lambda cardConfig = null) : CardConfigBuilder

Adds a card with the given name and where clause filter expression. Expression must be a boolean expression.

AddCard(string name, string icon, Lambda whereClauseExpression, Lambda cardConfig = null) : CardConfigBuilder

Adds a card with the given name + icon and where clause filter expression. Expression must be a boolean expression.

Change the color of a count card

SetColor(string color) : CardConfigBuilder

Sets the color of the card.

Add a suffix to a count value

SetSuffix(string suffix) : CardConfigBuilder

Sets the suffix of the card value.

Formatting the value of a count

SetFormat(Lambda formatExpression) : CardConfigBuilder

Sets the format expression for the card.

Actions are a powerful way of adding custom functionality to Umbraco UI Builder without needing to create custom UI elements. By providing an action to run, Umbraco UI Builder can automatically trigger actions from a number of UI locations.

Defining an action

To define an action create a class that inherits from the base class Action<> and configure it like below:

This guide provides a step-by-step approach to migrating a default Konstrukt solution to Umbraco UI Builder.

Key changes

Before outlining the exact steps, there are a few key changes to be aware of.

These changes will dictate the steps to take in the process of migrating to Umbraco UI Builder.

By default actions are not visible in the UI and you must expressly define when and where an action should display. This can be achieved in two ways, either on the action definition itself or at the point of registration on the collections config.

Controlling the default action visibility

To define the default visibility of an action at the action level you can do this by overriding the IsVisible method of the Action<>

Umbraco UI Builder can dynamically build a filter dialog choosing appropriate editor views for you based on a basic property configuration. Properties of a number or date types will become range pickers and enums. Properties with options defined will become select/checkbox lists and all other properties will become text input filters.

Defining filterable properties

Defining filterable properties is controlled via the configuration.

Beyond there might be times when you need to be able to create specific views of a collection's data. To help with this Umbraco UI Builder has different filtering mechanisms available.

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

In a number of places in the Umbraco UI Builder API, you are required to know the aliases of other elements. For example, when you are adding sections, context apps, or dashboards before/after other instances. This is basic enough when it's referencing aliases of things defined in the Umbraco UI Builder config. However, for existing Umbraco instances it can be hard to find them so below is documented a number of known aliases for different elements.

Dashboard aliases

Content

Media

Settings

Members

Content App aliases

Content

Media

Members

ContentTypes

Section aliases

Tree aliases

A section is a distinct area of the Umbraco backoffice, such as content, media, etc. The section is accessed via a link in the main menu at the top of the Umbraco interface. Umbraco UI Builder allows you to define multiple sections in order to organise the management of your models into logical sections.

Defining a section

You can define a section by calling one of the AddSection

Virtual subtrees are a powerful feature that allows you to inject an Umbraco UI Builder tree structure into another Umbraco tree at a desired location. Thus acting as child nodes to the node chosen as the injection point. With virtual subtrees it allows you to extend built in or even 3rd party package trees with additional features. An example could be developing a "loyalty point" program for your e-commerce site and injecting the related database tables into a Vendr store tree. This allows the management of the program in its most logical location.

Defining virtual SubTrees

In this guide, you can find the necessary steps needed for a basic implementation using Umbraco UI Builder to manage a single custom database table.

Set up the database

Out of the box, Umbraco UI Builder works using PetaPoco as the persistence layer as this is what ships with Umbraco. If you prefer, it is possible to use a custom . However, for getting started, it is expected that you are using this default strategy.

Umbraco UI Builder fires a number of notification events during regular operation to allow for extending of the default behaviour.

Registering event handlers

Umbraco UI Builder uses the same and so uses the same registration process. First you will need to define a notification event handler for the event you wish to handle like below:

Then register your event handler in the

A folder can appear in either a tree or as a sub folder to other folders. Folders can contain either other (sub)folders or .

Defining a folder

You can define a folder by calling one of the AddFolder methods on a given