Custom section tree nodes and routes - Umbraco

If you haven't already created a custom section within Umbraco, I suggest that you follow this amazing tutorial by Markus it's a two part tutorial on setting upt he basics of a custom section.

Lets start by discussing the structure of a custom section and assuming you've already got the section set up in Umbraco and you now want to add nodes to it, we'll look at how the nodes within the left panel get called and what parameters you can give them.

Defining a TreeController

A TreeController should be defined as per below, but make sure to check out the tutorial I've linked above to learn how to make it functional.

[PluginController("mypackagename")]
[Umbraco.Web.Trees.Tree("mypackagename", "myfirsttreealias", "my tree name", iconClosed: "icon-folder", sortOrder: 0)]
public class MyTreeController : TreeController
{
    protected override TreeNodeCollection GetTreeNodes(string id, FormDataCollection queryStrings)
    {
        var colNodes = new TreeNodeCollection();

        var objNode = this.CreateTreeNode("1", id, queryStrings, "Node name", "icon-folder", true);
        colNodes.Add(objNode);

        return colNodes;
    }

    protected override MenuItemCollection GetMenuForNode(string id, FormDataCollection queryStrings)
    {
        var menu = new MenuItemCollection();
        menu.DefaultMenuAlias = ActionNew.Instance.Alias;
        menu.Items.Add("Create");
        menu.Items.Add<RefreshNode, ActionRefresh>("Refresh");
        menu.Items.Add("Delete");
        return menu;
    }
}

By now, you should have a TreeController class for your application, and you should understand what it does, given its name and implemented methods, but you should also understand the following:

Information about the Umbraco TreeController

1. You can have multiple tree controllers for one custom Umbraco section.
2. Umbraco will not create a root level node for your tree controller unless you have multiple tree controllers defined.
3. Umbraco will render the document specified in the Dashboard.config file for all root nodes.
4. You can order many TreeController root nodes using the sortOrder parameter.
5. You can define a custom icon for the root node using the iconClosed and iconOpen parameters.

Node parameters

The CreateTreeNode method takes the following parameters:

CreateTreeNode(int id, string parentId, FormDataCollection queryStrings, string title, string icon, bool hasChildren, string routePath)

The minimum required parameters given to the method is everything up to and including title.

Defining more than one TreeController class

Implementing more than one tree controller is easy, make sure that the reference the same package name, but change the tree alias as defined in the above example as myfirsttreealias.

Why define more than one TreeController?

Multiple tree controllers are useful if you're displaying data in two or more categories/types, for example, I might have a motorbike tree and a car tree, some data will be similar, but ultimately, I want the data to display differently and post to different locations. Whilst this is possible with a single TreeController, adding a second simplifies things as we can now define different angular controllers and layout files for our nodes under different folders.

Umbraco will expect your default files such as create.html, edit.html and delete.html to be located under a folder in App_Plugins such as the following:

App_Plugins/mypackagename/backoffice/myfirsttreealias/create.html

Defining custom routes

Notice that in the above example, I defined a new node for our tree structure as follows:

var objNode = this.CreateTreeNode("1", id, queryStrings, "Node name", "icon-folder", true);

But under the Node parameters heading, I described how the CreateTreeNode method takes more parameters than that, specifically, we're missing the routePath.

"mypackagename/mytreecontrolleralias/myfilename/mynodeid"

A completed route may look something like this:

"vehiclemanager/cartree/editcarhistory/1234"

Using the above example, clicking a node with the above route attached, would look for a file called editcarhistory.html using the following path:

/App_Plugins/vehiclemanager/backoffice/cartree/editcarhistory.html

Summary

As you can see, custom sections and routes aren't that difficult, given a few bits of knowledge about the smaller details.

If you have any questions or spot that I've done something wrong, feel free to comment and I'l do my best to help out.​