Extend Navigation Trees

After reading this article, you should be able to hook your own nodes into the Ucommerce tree across all supported CMS's.

Hook a Simple Tree Node Into the Tree

This section will teach you how to create the necessary components for adding a new tree node called "About" into the settings section of the tree.

Create an Implementation of ITreeContentProvider

We will start by creating a new class called "AboutNodeProvider" and implement the interface 'ITreeContentProvider' which has two methods to consider:

• IList<'ITreeNodeContent'> GetChildren(string nodeType, string id)
  • Responsible for returning the children of a given parent node.
• bool Supports(string nodeType)
  • Responsible for telling what parent nodes this provider has children for.

You'll have to consider in what level of the tree you want to hook into. The framework will for each of the nodes in the tree ask all registered ITreeContentProviders if they support a given nodeType.

As we want to hook in under the 'Settings' node the implementation of the method Supports will look like the following code:

    
        public bool Supports(string nodeType)
        {
          return nodeType == Constants.DataProvider.NodeType.Settings;
        }
    

The above code shows that we support all nodes of type 'Constants.DataProvider.NodeType.Settings'.

When we return true to a given nodeType we also have the responsibility to serve children along with all other providers that support that nodeType. This will happen as Ucommerce will call GetChildren(string nodeType, string id) where the nodeType will allways be the 'Settings' node type.

When delivering child nodes for content you need to take into account the following properties of ITreeNodeContent:

ITreeNodeContent

TreeNodeContent has the following properties:

Node Types for Difference Parts of the Tree

This is the node types that you need to know if you want to hook into a place in the default tree.

The Tree nodeTypes document shows what nodeType each of the nodes in the default tree has.

    
        public IList<ITreeNodeContent> GetChildren(string nodeType, string id)
        {
          return new List<ITreeNodeContent>()
          {
            new TreeNodeContent("about", -1)
            {
              Name = "About",
              HasChildren = false,
              Action = "/Apps/SampleApp/About.aspx",
    		  Icon = "/Apps/SampleApp/Icons/about.png"
            }
          };
        }
    

The code above creates a TreeNodeContent that contains the following:

• TreeNodeContent("about", -1)
  • "about" is the nodeType of this TreeNodeContent (our tree node). If we want the About node to have child nodes, then we would need a provider that supports type "about".
  • -1 is the TreeNodeContent ItemId, which is the id of the item the node represents.
• The Name and HasChildren properties should be self-explanatory.
• Action
  • The action a left mouse click triggers.
  • In our example it’s pointing at an .aspx page in /App/About/ which will be render when the action is triggered.

Quick word on Apps

When creating your extensions to the tree, and you're linking to external resources like pages, images or similar, placing them under the 'Apps' folder under Ucommerce helps for easy registering and resolution of the actual path automatically.

In the image below I have placed my extensions under 'SampleApp'.

Starting your URL with '/Apps' tells Ucommerce to look under the Apps folder.

Registering the AboutNodeProvider

All there's left to do is registering your new component by hooking it into our TreeServiceShell component as a provider like the configuration below.

If you're interested in learning more about components please read How to Register a Component

    
        <configuration>
          <components>
            <component
            id ="SettingNodes.AboutSectionProvider"
            service="UCommerce.Tree.ITreeContentProvider, UCommerce"
            type="YOUR-NAMESPACE.AboutNodeProvider, YOUR-ASSEMBLY" />
    
            <partial-component id="TreeServiceShell">
              <parameters>
                <tasks>
                  <list>
                    <item insert="last">${SettingNodes.AboutSectionProvider}</item>
                  </list>
                </tasks>
              </parameters>
            </partial-component>
          </components>
        </configuration>