Extend Navigation Trees

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

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 'Ucommerce.Tree.ITreeContentProvider'.

Ucommerce.Tree.ITreeContentProvider

Description

A content provider is a child node provider who can also tell if a given node type is supported.

Methods

Supports

• Description
  Returns true, if the provider supports a specific tree node type.
• Arguments
  • string nodeType: The type of the node.
• Return type Boolean
  

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 == Ucommerce.Constants.DataProvider.NodeType.Settings;
    }
    
    

The above code shows that we support all nodes of type 'Ucommerce.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 always 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.

Ucommerce.Tree.ITreeNodeContent

Description

Data object containing the data content for a tree node.

         The data in the object is subsequently used by a converter, to be converted into
         the actual tree node implementation, for example a data object for AngularJS.

NodeType

• Return type string
  
• Description
  The type of the node.

ItemId

• Return type string
  
• Description
  The id of the item the node represents.

ItemGuid

• Return type Guid?
  
• Description
  The Ucommerce guid identifying the item, if one such exists.

ItemContextId

• Return type string
  
• Description
  The id of the context of the item the node represents. This is typically the parents id, if needed.

SortOrder

• Return type int
  
• Description
  The sort order of this node compared to other nodes on the same level.

Name

• Return type string
  
• Description
  The name of the node. This is typically what is displayed in the GUI.

Icon

• Return type string
  
• Description
  The name of the Icon file to be used in the GUI.

HasChildren

• Return type Boolean
  
• Description
  True, if this node has children, that can be fetched thru the content service.

ChildrenCount

• Return type int
  
• Description
  A count of the node's children if any.

AutoLoad

• Return type Boolean
  
• Description
  True, if the node should autoload its children.

DimNode

• Return type Boolean
  
• Description
  True, if the items are dimmed

Options

• Return type IList<Ucommerce.Tree.ITreeNodeOption>
  
• Description
  The right-click options for the node.

Action

• Return type string
  
• Description
  The left-click action for the node.

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 Ucommerce.Tree.Impl.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 rendered 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>