Copied to clipboard

Flag this post as spam?

This post will be reported to the moderators as potential spam to be looked at

  • Warren Buckley 2089 posts 4578 karma points MVP ∞ admin hq c-trib
    Dec 07, 2013 @ 20:58
    Warren Buckley

    Optional view as opposed to edit.html for tree action

    Hello all,
    After following Per's tutorial from the UK Festival here over his GitHub 

    I am reworking my Diagnostics package for Umbraco 7 and its coming along nicely, I have a tree controller which adds a custom tree and child nodes into the developer section.

    It adds child nodes such as:


    • General
    • Macros
    • Trees
    • Assemblies
    • Permissions
    • etc...
    For each node when clicked I would like it to load a different view & Angular controller as opposed to edit.html, so when general or macros is clicked it loads general.html or macros.html etc...
    CreateTreeNode() has an option to pass in a different route, but I have been trying different optuons without any luck so far.
    My code looks like this at the moment & I would love any pointers or advice anyone could give me so I can use a different view/route for my nodes in my custom tree.
    using System;
    using System.Net.Http.Formatting;
    using Umbraco.Core;
    using Umbraco.Web.Models.Trees;
    using Umbraco.Web.Mvc;
    using Umbraco.Web.Trees;
    namespace UmbracoDiagnostics
        [Tree("developer", "diagnosticsTree", "Diagnostics")]
        public class DiagnosticsTreeController : TreeController
            protected override TreeNodeCollection GetTreeNodes(string id, FormDataCollection queryStrings)
                //check if we're rendering the root node's children
                if (id == Constants.System.Root.ToInvariantString())
                    //Nodes that we will return
                    var nodes   = new TreeNodeCollection();
                    //Temp items for testing
                    var items = new[] { "General", "Packages", "Users" , "Domains", "Assemblies", "Permissions", "Events", "MVC Routes", "Trees" };
                    foreach (var item in items)
                        //When clicked - /App_Plugins/Diagnostics/backoffice/diagnosticsTree/edit.html
                        //URL in address bar - /developer/diagnosticsTree/edit/General
                        var route       = string.Format("diagnosticsTree/{0}", item);
                        var nodeToAdd   = CreateTreeNode(item, null, queryStrings, item, "icon-server", false, route);
                        //Add it to the collection
                    //Return the nodes
                    return nodes;
                //this tree doesn't suport rendering more than 1 level
                throw new NotSupportedException();
            protected override MenuItemCollection GetMenuForNode(string id, FormDataCollection queryStrings)
               throw new System.NotImplementedException();
    Warren :)


  • Warren Buckley 2089 posts 4578 karma points MVP ∞ admin hq c-trib
    Dec 08, 2013 @ 14:15
    Warren Buckley

    For anyone interested this is how I solved it

    //When clicked - /App_Plugins/Diagnostics/backoffice/diagnosticsTree/edit.html
    //URL in address bar - /developer/diagnosticsTree/General/someID
    var route       = string.Format("/developer/diagnosticsTree/{0}/someID", item);
    var nodeToAdd   = CreateTreeNode(item, null, queryStrings, item, "icon-server", false, route);

    So you need to build the route URL in the following format:

    Application Section /

    Tree Alias /

    HTML View /

    ID (Node ID, key etc...)

  • Christian Bekker Andersen 12 posts 91 karma points
    Jan 22, 2014 @ 00:07
    Christian Bekker Andersen

    I tried above, but when routing, it looks for the application and views in the /umbraco folder, and not in my custom app folder in the /App_Plugins folder.

    Is it possible to route to other files, but inside my app?, i tried this with no luck:

    var route = string.Format("/App_Plugins/SendGrid/SendGridTree/{0}", item);
  • David Brendel 785 posts 2938 karma points c-trib
    Jan 23, 2014 @ 11:48
    David Brendel

    Have you added the PluginController-Attribute to you TreeController?

    I'm using this for the routes in my package and my files are located in the App_plugins folder:

    FormDataCollectionExtensions.GetValue<string>(queryStrings, "application") + StringExtensions.EnsureStartsWith(this.TreeAlias, '/') + "/overviewLocation/all"

    My tree controller looks like this:

    public class ECCalendarTreeController : TreeController
  • Shaun 248 posts 475 karma points
    Jun 09, 2014 @ 13:57

    Hi All

    I'm having trouble getting this to work.

    As a shorthand I've added in a non-existant route, on the assumption that at least I'll see a 404 error message and therefore know I'm on the right track.

    var ClientsNode = CreateTreeNode("1", "-1", queryStrings, "Clients", "icon-folder", true, "/App_Plugins/ClientZone/backoffice/clientzonetree/foo.html");

    the clientzonetree directory exists, but there is no foo.html.

    Instead of a 404 though, clicking this node in the tree just loads the content dash on the right hand side. I can;t for the life of me see why. I've tried clearing the cache and touching the web.config, but nothing seems to alter it's behaviour.

    Any ideas?

  • Tim 168 posts 371 karma points
    Aug 14, 2014 @ 11:44

    Hi Warren,

    We're playing with a plugin and in a similar way to Shaun, need to have a custom editor for each tree node type but every time we update the RouteData in a similar way to you're doing, it redirects the user to the content node for some reason.

    Any ideas how to get this working with a plugin?



  • Warren Buckley 2089 posts 4578 karma points MVP ∞ admin hq c-trib
    Aug 14, 2014 @ 14:17
    Warren Buckley

    Hi Shaun & Tim,
    It seems very odd you can't set the custom route, however this is confusing as you don't set the actual full path HTML.

    What it does sets the URL in the route for the hashbang

    //When clicked - /App_Plugins/Diagnostics/backoffice/diagnosticsTree/edit.html
    //URL in address bar - /developer/diagnosticsTree/Edit/keyPartial
    //var route = string.Format("/analytics/analyticsTree/view/{0}", item.Value);

    What I do for different editors for each node is that each node loads the main view of edit.html

    This has an ng-include & the controller for this main edit.html view, takes the last param keyPartial and uses this to load a further HTML view into the ng-include.

    <div ng-include="templatePartialURL"></div>

    I hope this makes some sense.


  • Tim 168 posts 371 karma points
    Aug 14, 2014 @ 14:57

    Sorry Warren, we're not including the html at the end of it I should have mentioned that.

    In regards the edit.html solution, that's the only thing we could come up with but it doesn't feel like it's the right solution. Will keep playing cheers.


  • Warren Buckley 2089 posts 4578 karma points MVP ∞ admin hq c-trib
    Aug 14, 2014 @ 15:11
    Warren Buckley

    @tim did you see the solution to this, you do not specify the HTML file path but instead a route made up of the following:

    Application Section /
    Tree Alias /
    HTML View /
    ID (Node ID, key etc...)

    So this route above will look in App_Plugins/PluginName/backoffice/PluginTreeName/myview.html

  • Tim 168 posts 371 karma points
    Aug 18, 2014 @ 07:54

    Thanks Warren, although the URL now appears to be updating with what looks like a correct url (/umbraco/#/CorpusAdmin/BackOffice/ClassifierEdit/DC-Default) it just errors saying it can't find the view "views/BackOffice/ClassifierEdit.html".

    Any ideas? We've got a html file called ClassifierEdit.html in our App_Plugins/Section/BackOffice folder...

  • Steve Morgan 1276 posts 4214 karma points c-trib
    Sep 01, 2014 @ 17:03
    Steve Morgan

    This took me a while to work out what was happening. I was seeing the same as Tim - it was only looking in the Views folder. The reason was that I was not including the full route - I was only going as far as HTML view and not including the ID (as I only have a single node in the tree - the route). You need this for the route to be applied (or I guess it goes to it's original behaviour of looking in the views folder). 

     // add nodes to tree
                var tree = new TreeNodeCollection
                    // routepath HAS to be /appsection/treealias/htmlview/ID 
    CreateTreeNode("1", id, queryStrings, "View Quotes", "icon-dollar-bag", false), // edit.html CreateTreeNode("2", id, queryStrings, "View Partner Requests", "icon-handshake", "/MyPlugin/MyPluginTree/jobapplications/0"),
    CreateTreeNode("3", id, queryStrings, "View Job Applications", "icon-mailbox", "/MyPlugin/MyPluginTree/jobapplications/0")
    }; return tree;

    Hope this helps someone else in the future.  

  • Robert Martine-McEvoy 24 posts 109 karma points
    Mar 16, 2015 @ 20:42
    Robert Martine-McEvoy

    Very helpful thread. Just wanted to give some feedback on Steve's response.

    I found that:

    // routepath HAS to be /appsection/treealias/htmlview/ID 

    was not working for me, but that was because my PluginController areaName Attribute was not named the same as my app section.

    Once I made those consistent with each other everything worked.

  • ZNS 60 posts 195 karma points
    Nov 12, 2015 @ 15:17

    Finally, this thread saved me alot of headache!

  • cmm 20 posts 122 karma points
    Dec 09, 2015 @ 11:10

    very helpful thanks!

  • Luke Alderton 191 posts 508 karma points
    Jul 30, 2017 @ 07:44
    Luke Alderton

    Custom sections and their TreeControllers along with defining routes for different files still gave me a bit of a headache after reading this thread, but after a while, i was able to make sense of it and write this post for future reference. Hopefully it helps someone, it describes how routes work and why you might need them and multiple tree controllers.

  • Ayo Adesina 419 posts 1001 karma points
    Aug 04, 2017 @ 09:04
    Ayo Adesina

    I got this working first time - with the Umbraco picking up the default path for my view,..

    but what I want to know is how do you change the location of the views I don't want them to be in /backoffice/...

    is there a way I can change this?

  • Luke Alderton 191 posts 508 karma points
    Aug 04, 2017 @ 10:03
    Luke Alderton

    Where do you hope to store them?

  • Jose Marcenaro 8 posts 99 karma points c-trib
    Jun 14, 2018 @ 10:07
    Jose Marcenaro

    Very helpful thread! Thanks to all.

    Just in case you still can't make it work, check the case (upper-lower) of each path segment because the routes are case sensitive.

    A good way to do that is to omit the routePath argument from the CreateTreeNode and check how is the default edit path built - then add the routePath argument, replacing edit with the custom view name.

  • Matt Taylor 859 posts 2052 karma points
    Mar 27, 2019 @ 18:00
    Matt Taylor

    OMG, I've just spent all day trying to get this to work to find out that case-sensitivity was the problem.

Please Sign in or register to post replies

Write your reply to: