How to Configure the Multinode Treepicker Start Node in Umbraco

Learn how to set the Multinode Treepicker Start Node in AngularJs to streamline content management for your editors.

Carefully configured Multinode Treepicker Start Node in Umbraco is a must-have.

By specifying a start node, you streamline the process of navigating large content trees, making it easier to manage and organize your content. 

Multinode Tree Picker Umbraco xPath

Umbraco Multinode Treepicker: selecting tags for content

Start Node is Essential for Editorial Team#

Suppose you manage a large content tree and need to simplify your editors' content selection process.

By setting a specific start node for the Multinode Treepicker, you can direct editors to relevant sections quickly.

For example, suppose your site has a blog with a dedicated section for tags.

In that case, setting the start node to the tags section ID will allow editors to focus only on tag-related content, improving efficiency and reducing the complexity of navigating unrelated content.

Use entityResource with xPath Query to get Section ID you Need#

Here is the code snippet in AngularJS to set up the Multinode Treepicker Start Node in Umbraco:

function PlaygroundController($scope, $http, umbRequestHelper, editorService, entityResource, $routeParams) {

	$scope.openTagsPicker = function($event) {
		$event.preventDefault();

		let xPathQuery = "$site/tagsParentSection";

		entityResource.getByQuery(xPathQuery, $routeParams.id, 'Document').then(function (entity) {

			let sectionId = entity != null ? entity.id: -1;
			
			let contentPicker = {
				title: 'Select Tags',
				section: "content",
				treeAlias: "content",
				filterCssClass: "not-allowed not-published",
				filterAdvanced: true,
				filter: function (node) {
					return ['tag'].indexOf(node.metaData.contentType) < 0;
				},
				multiPicker: true,
				ignoreUserStartNodes: false,
				startNodeId: sectionId,
				hideHeader: false,
				idType: "udi",
				submit: function (model) {
					
					//your submit logic

					editorService.close();

					$event.preventDefault();
				},
				close: function () {
					editorService.close();
				}
			};

			editorService.treePicker(contentPicker);
		});
	};
}

Breaking Down the Code#

The AngularJS controller called PlaygroundController demonstrates the idea.

Here is a breakdown of how it works:

Controller Definition: The PlaygroundController injects essential dependencies for editorService, entityResource, and $routeParams.

openTagsPicker Function: This function is triggered when the user opens the tags picker. It prevents the event's default action and defines an XPath query to find the desired start node.

Entity Resource Query: The entityResource.getByQuery method retrieves the section ID based on the XPath query and the current route parameters. If an entity is found, its ID is used. Otherwise, the default ID is set to -1.

Essential Content Picker Configuration: A content picker object is defined with various options:

  • title: The title of the picker.
  • section and treeAlias: Specify the content section.
  • filterCssClass and filterAdvanced: Define CSS classes and advanced filtering.
  • filter: A function to filter nodes not of type 'tag'.
  • multiPicker: Allows selecting multiple items.
  • ignoreUserStartNodes: Determines whether to ignore user-defined start nodes.
  • startNodeId: Sets the start node ID to the retrieved section ID.
  • hideHeader: Whether to hide the header.
  • idType: Type of ID used (int or udi).
  • submit: Function to handle submission logic.
  • close: Function to handle closing the picker.

Setting XPath directly for the Umbraco content picker in AngularJs#

Naturally, it would be nice to set xPath directly in the properties of the contentPicker object.
Unfortunately, this is not possible.
I took the time to examine the Umbraco source code and found that the Umbraco.Editors.TreePickerController ignores this property.

What's next?#

🌐 Explore More: Interested in learning about Umbraco, .NET, and other web development insights? Explore our blog for a wealth of information and expert advice.

✉️Get in Touch: If you have questions or need assistance with your Umbraco projects, don't hesitate to contact us

↑ Top ↑