Content Picker
Alias: Umbraco.MultiNodeTreePicker
Returns: IEnumerable<IPublishedContent>
Settings
The Content Picker allows you to configure the type of tree to render and what part of the tree should be rendered. For content it allows you to select a dynamic root node based on the current document using the content picker.
Node type
Set the type of node, the root node of the tree, or query for the root node.
For querying content, you can specify a dynamic root:
![](https://docs.umbraco.com/~gitbook/image?url=https%3A%2F%2F3701346516-files.gitbook.io%2F%7E%2Ffiles%2Fv0%2Fb%2Fgitbook-x-prod.appspot.com%2Fo%2Fspaces%252FG1Byxw7XfiZAj8zDMCTD%252Fuploads%252Fgit-blob-82e3a4f40e95fef79111b401548279ebdd0a97c7%252Fmntp_node_type.png%3Falt%3Dmedia&width=768&dpr=4&quality=100&sign=92c3a35a&sv=1)
When you specify the dynamic root, you can navigate the tree relative to a node.
![](https://docs.umbraco.com/~gitbook/image?url=https%3A%2F%2F3701346516-files.gitbook.io%2F%7E%2Ffiles%2Fv0%2Fb%2Fgitbook-x-prod.appspot.com%2Fo%2Fspaces%252FG1Byxw7XfiZAj8zDMCTD%252Fuploads%252Fgit-blob-c9cdfa8254e8bf1a0f17a3301fbaf9af84b46b5f%252Fmntp_node_type_dynamic_root.png%3Falt%3Dmedia&width=768&dpr=4&quality=100&sign=4d5996af&sv=1)
First, you have to specify an origin, from where the query will start.
![](https://docs.umbraco.com/~gitbook/image?url=https%3A%2F%2F3701346516-files.gitbook.io%2F%7E%2Ffiles%2Fv0%2Fb%2Fgitbook-x-prod.appspot.com%2Fo%2Fspaces%252FG1Byxw7XfiZAj8zDMCTD%252Fuploads%252Fgit-blob-401c38157a5c1d41220e88662bc7830ff34da5eb%252Fmntp_node_type_dynamic_root_origin.png%3Falt%3Dmedia&width=768&dpr=4&quality=100&sign=bb512b25&sv=1)
You have the following options:
Root - The root is the first level item of the subtree of the current node.
Parent - The parent is the nearest ancestor of the current node.
Current - The current node. Be aware a picker that uses the current node, cannot pick anything when the current node is created, because it does not have any children.
Site - The nearest ancestor of the current node that has a domain assigned.
Specific node - A specific node that you have to choose in the tree
Often an origin is a good dynamic root. It is also possible to execute multiple steps from the origin to navigate the tree to find another root.
![](https://docs.umbraco.com/~gitbook/image?url=https%3A%2F%2F3701346516-files.gitbook.io%2F%7E%2Ffiles%2Fv0%2Fb%2Fgitbook-x-prod.appspot.com%2Fo%2Fspaces%252FG1Byxw7XfiZAj8zDMCTD%252Fuploads%252Fgit-blob-e1e0ad3db83caa8c448ea9c378b6751204af38a7%252Fmntp_node_type_dynamic_root_steps.png%3Falt%3Dmedia&width=768&dpr=4&quality=100&sign=d87cbace&sv=1)
You have the following options:
Nearest Ancestor or Self - Finds the nearest ancestor or the item itself, that fits with one of the configured document types.
Furthest Ancestor or Self - Finds the furthest ancestor or the item itself, that fits with one of the configured document types.
Nearest Descendant or Self - Finds the nearest descendant or the item itself, that fits with one of the configured document types.
Furthest Descendant or Self - Finds the furthest descendant or the item itself, that fits with one of the configured document types.
Custom - Execute a custom query step by specifying the name. This requires custom code to add the new query step.
Each query step takes the output from the last step (or the origin) as input.
![](https://docs.umbraco.com/~gitbook/image?url=https%3A%2F%2F3701346516-files.gitbook.io%2F%7E%2Ffiles%2Fv0%2Fb%2Fgitbook-x-prod.appspot.com%2Fo%2Fspaces%252FG1Byxw7XfiZAj8zDMCTD%252Fuploads%252Fgit-blob-d482460dd58397d65bede1cf74c6a7f674bd94f7%252Fmntp_node_type_dynamic_root_overview.png%3Falt%3Dmedia&width=768&dpr=4&quality=100&sign=bc23f02d&sv=1)
Adding a custom query step
Custom query steps can be used to solve some specific use cases.
To add a custom query step, you need to append it to the existing query steps. This can be done from a composer:
The implementation of a query step takes in a collection of origins and information about the query step. The collection is taken from where the name specified in the UI can be found.
The code needed to create a custom query step is shown in the following example.
You can inject dependencies into the constructor. Some interesting dependencies could be custom repositories or the IVariationContextAccessor
, if you want to use the current culture.
The ExecuteAsync
method gets a collection of content keys from the last executed query step or the origin. It has to return a new collection of content keys.
Filter out items with type
Allow or disallow tree nodes with a certain content type alias.
Enter typeAlias,altTypeAlias
to allow selection of nodes with those aliases only. Enter !typeAlias,altTypeAlias
to allow selection of nodes without those aliases.
Minimum/maximum number of items
Set a limit on the number of items allowed to be selected.
Data Type Definition Example
![](https://docs.umbraco.com/~gitbook/image?url=https%3A%2F%2F3701346516-files.gitbook.io%2F%7E%2Ffiles%2Fv0%2Fb%2Fgitbook-x-prod.appspot.com%2Fo%2Fspaces%252FG1Byxw7XfiZAj8zDMCTD%252Fuploads%252Fgit-blob-47be9e4ce2d90d35acafc2bccc28606e69db4135%252Fmntp.png%3Falt%3Dmedia&width=768&dpr=4&quality=100&sign=68597b3f&sv=1)
Content Example
Consider the following tree structure where Document Type alias is presented in square brackets.
Codegarden
2023 [year]
Talks [talks]
...
Umbraco anno MMXXIII [talk]
Stages [stages]
Social Space [stage]
No 10 [stage]
No 16 [stage]
The Theatre [stage]
2022 [year]
Talks [talks]
...
Stages [stages]
Main Stage [stage]
The Barn [stage]
The Theatre [stage]
Consider configuring a picker on the talk Document Type to select a stage of the talk. Here, you want to display only the stages for the actual year. To do this, you need to set the parent as origin.
For instance, if you are on the Umbraco anno MMXXIII
node, the collection of content keys passed into the first query step will only contain the Talks
content node.
First, query for the nearest ancestors of the type
year
. This will return2023
.Next, query for the nearest descendants of type
stages
.
When opening the picker on the Umbraco anno MMXXIII
node, it will now show the children of the node on path Codegarden => 2023 => Stages
.
MVC View Example
Without Modelsbuilder
With Modelsbuilder
Add values programmatically
See the example below to see how a value can be added or changed programmatically. To update a value of a property editor you need the Content Service.
The example below demonstrates how to add values programmatically using a Razor view. However, this is used for illustrative purposes only and is not the recommended method for production environments.
Although the use of a GUID is preferable, you can also use the numeric ID to get the page:
If Modelsbuilder is enabled you can get the alias of the desired property without using a magic string:
Last updated