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.​


Published at

Tags: Umbraco,C#

Luke Alderton

Comments

Marco Teodoro
Hi Luke, do you know if its's possible to add a route for a different section without refreshing the tree view. taking your exemple imagine you have another section lets say mechanic and you want to open that editor inside this section not redirect to "mechanic /ree/edit/1234". do you know if this is possible? maybe i need to create a view in this section to call the other one with navidation service no? have you done this before? Thanks
21/03/2018
Post a comment
Sit tight...
We're adding your comment.
Thank you.
Your comment has been added.
There's been a problem.
Please try again later.
Share with
Tags
Latest Comments
By Richardcax on MVC forms in Umbraco
23 Sep 2018, 18:31 PM
By Normanambug on MVC forms in Umbraco
19 Sep 2018, 04:42 AM
By BabloPridi on MVC forms in Umbraco
17 Sep 2018, 09:23 AM
By hario on MVC forms in Umbraco
12 Sep 2018, 02:41 AM
By Jasonced on MVC forms in Umbraco
11 Sep 2018, 12:17 PM
By VadimProSEO on MVC forms in Umbraco
10 Sep 2018, 14:52 PM
By vennnile on MVC forms in Umbraco
8 Sep 2018, 05:49 AM
By xaipheira on MVC forms in Umbraco
5 Sep 2018, 10:30 AM
Categories
App Development
Event
Game Development
Mapping
Modelling
Programming
Review
Robotics
Tutorial
Web Development