Multi-Node Tree Picker

The multi-node tree picker data type allows your content editor to choose multiple nodes in the content or media trees to be saved with the current document type. This is useful for all sorts of situations such as relating a page to numerous other pages, creating a list of images/files from the media section, etc... The current version supports:

• Rendering either the Media or Content tree
• Choosing a starting node ID for the tree
• An XPath filter to match the nodes that should, OR should not be clickable/selectable in the tree
• Thumbnail preview for selected images when working with the media tree
  • Thunbmail preview can be enabled/disabled
• Set a maximum number of nodes to be selected, by default this is unlimited
• Information tooltip display for each selected item which can be toggled on/off
  • The tooltip display contains a link to edit the selected item
• The option to save as valid XML data for easy retrieval even in XSLT, OR saving as CSV (comma seperated values)
• Drag/Drop sorting of selected nodes

Pre-value editor

Data editor

• The nodes in a light reddish color are nodes that the user is unable to select
• The list on the right shows which nodes have already been selected/saved
  • These nodes can be sorted by dragging and dropping and can also be removed by clicking the 'x'

• When informational tooltips are enabled an 'info' icon is displayed next to each of the selected items which when click shows information about the node:
  • The node's ID
  • Path and content Path
  • Edit button which will deep link to that item's editor page

• When a node is selected that has already been selected or it is a node that is not allowed to be selected based on the XPath expression defined in the pre-value editor, it will blink red when selected:

• When working with the Media tree and thumbnail previews are enabled, the thumbnail of the image will be shown:

Example of XML data

Here is an example of the XML data that the Multi-node Tree Picker produces:

<MultiNodePicker>
	<nodeId>1052</nodeId>
	<nodeId>1051</nodeId>
	<nodeId>1050</nodeId>
</MultiNodePicker>

XSLT example

The Multi-node Tree Picker data-type will provide XML data based on the nodes you have selected. Here is an example of it's basic usage:

<xsl:template match="/">

	<!--
		uComponents: Multi-node Tree Picker - An XSLT example
		=====================================
		The Multi-node Tree Picker data-type will provide XML data based on the nodes you have selected.
		In this example, the property alias name for the Multi-node Tree Picker is "treePicker".
	-->

	<!-- First we check that the Multi-node Tree Picker has any nodeId values -->
	<xsl:if test="$currentPage/treePicker/MultiNodePicker/nodeId">

		<ul>

			<!-- Loop through each of the nodeId values -->
			<xsl:for-each select="$currentPage/treePicker/MultiNodePicker/nodeId">

				<!-- Since we only have the nodeId value, we need to get the actual content node using umbraco.library's GetXmlNodeById method -->
				<!-- If you prefer to use pure XPath, then used this: "$currentPage/ancestor-or-self::*[@isDoc and @level = 1]/descendant-or-self::*[@isDoc and @id = current()]" -->
				<xsl:variable name="node" select="umbraco.library:GetXmlNodeById(.)" />

				<li>

					<!-- Output the URL using umbraco.library's NiceUrl method -->
					<a href="{umbraco.library:NiceUrl(.)}">

						<xsl:value-of select="$node/@nodeName" />

					</a>

				</li>

			</xsl:for-each>

		</ul>

	</xsl:if>

</xsl:template>