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 DavidassuG on MVC forms in Umbraco
12 Jul 2018, 10:54 AM
By Luke on Setting up tables in SQLite with a primary key on a Xamarin Forms app
11 Jul 2018, 09:18 AM
By Travis on Setting up tables in SQLite with a primary key on a Xamarin Forms app
7 Jul 2018, 15:44 PM
By Luke on Auto/Custom height on Xamarin Forms WebView for Android and iOS
15 Jun 2018, 09:43 AM
By vikki on Auto/Custom height on Xamarin Forms WebView for Android and iOS
14 Jun 2018, 13:35 PM
By jimbo on JQuery Unobtrusive Validation for dynamically created elements
13 Jun 2018, 17:13 PM
By ScottKem on MVC forms in Umbraco
8 Jun 2018, 10:29 AM
By Alaa on java.lang.UnsatisfiedLinkError: no rxtxSerial in java.library.path
3 Jun 2018, 20:16 PM
Categories
App Development
Event
Game Development
Mapping
Modelling
Programming
Review
Robotics
Tutorial
Web Development