Virtual Sub Trees
Configuring virtual sub trees in Umbraco UI Builder.
Last updated
Was this helpful?
Configuring virtual sub trees in Umbraco UI Builder.
Last updated
Was this helpful?
This page is a work in progress and may undergo further revisions, updates, or amendments. The information contained herein is subject to change without notice.
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.
AddVirtualSubTree()
MethodAdds a virtual subtree to the current tree with visibility controlled by the specified expression.
AddVirtualSubTreeBefore()
MethodAdds a virtual subtree to the current tree before the tree node matches the match expression, with its visibility controlled by the specified expression.
AddVirtualSubTreeAfter()
MethodAdds a virtual subtree to the current tree after the tree node matches the match expression, with its visibility controlled by the specified expression.
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.
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":
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.
Use the AddVirtualSubTree
methods of a instance to define 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.
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.