custom page in tree node in section

Lloyd Dupont 7 posts 78 karma points

Mar 23, 2016 @ 08:20

Hi,

I am (trying to) make a custom page in the umbraco (7.2.8) back office to edit some database tables. I already made a custom application / plugin which create a new icon on the left side bar.

In the past I successfully implemented a TreeNode controller but this was very painful since each child node of the TreeController share the same edit page and same javascript, and it contains numerous 'if root node is this do that' section in the angular javascript controller and html templates. This is a maintenance nightmare...

i.e.: Each time I add a new node I should look for all existing IF statement in the current html/js, and add a new one, this is the opposite of making a new independent page which would call into reusable piece of code.

Now I am trying to implement a BaseTree and have each single node (only root node) have its own page. I have been struggling with BaseTree implementation for the past 2 hours and I still can't show an html page for it!!! Help please...

This is my current testing/exploring/not working single node app

~/App_Plugins/Code/MyController.cs

[Application("mySection", "SoMe RaNDoM NaMe", "icon-cloud", 15)]
public class DBSection : IApplication
{
}
[umbraco.businesslogic.Tree("mySection", "MyTree", "MyTree")]
public class MyTree : BaseTree
{
    public MyTree(string application) : base(application)
    {
    }

    public override void Render(ref XmlTree tree)
    {
    }
    public override void RenderJS(ref StringBuilder Javascript)
    {
        Javascript.Append(
           @"function openFCPage(id) { 
                // UmbClientMgr.contentFrame(id); // not working! :'(
            }");
    }
    protected override void CreateRootNode(ref XmlTreeNode rootNode)
    {
        rootNode.Icon = "bin_empty.png"; // bin.png
        rootNode.OpenIcon = "bin.png";
        rootNode.Text = "MyTree";
        rootNode.Source = null;
        rootNode.Action = "User"; // not working, js, name, anything
    }
}

~/App_Plugins/mySection/user.html

hello world :)

~/App_Plugins/mySection/user.js

// nothing yet

~/App_Plugins/mySection/package.manifest

{
 javascript: [
    '~/App_Plugins/mySection/user.js',
 ]
}

Copy Link

Jan Skovgaard 11280 posts 23678 karma points MVP 11x admin c-trib

Mar 23, 2016 @ 09:57

Hi Lloyd

Sorry if you already know this but have you had a look in the AngularJs workbook for Umbraco 7? https://github.com/umbraco/AngularWorkbook - I think there are some good examples on making your own trees. Also Tim Geyssens have written a blog post about how to make a custom tree etc. http://www.nibble.be/?p=440

Sorry if you already know this but to me the sentence "In the past I successfully implemented a TreeNode controller..." could mean that you have done this in the past like before v7 came out so perhaps that was on v4 or v6 of Umbraco :)

Looking forward to hearing more from you.

/Jan

Copy Link

Aristotelis Pitaridis 84 posts 402 karma points

Mar 23, 2016 @ 11:14

This is how I create tree nodes for Umbraco Backoffice. I have not tested it but it should work. Inform me if you have a problem with the following code:

namespace MyProject
{
    [PluginController("mySection")]
    [Tree("mySection", "MyTree", "MyTree")]
    public class MyTreeController : TreeController
    {
        protected override TreeNodeCollection GetTreeNodes(string id, FormDataCollection queryStrings)
        {
            var nodes = new TreeNodeCollection();

            if (id == Constants.System.Root.ToInvariantString())
            {
                // Create one root node
                var Root1 = this.CreateTreeNode("Root1ID", id, queryStrings, "Root 1", "icon-windows", true);
                nodes.Add(Root1);
                // Create a second root node and define the path of it's view
                var Root2 = this.CreateTreeNode("Root2ID", id, queryStrings, "Root 2", "icon-windows", true, "/mySection/MyTree/HtmlFile/Root2ID");
                nodes.Add(Root2);
            }
            else if (id.Equals("Root1ID"))
            {
                // Create the child nodes of the first root node
                var Child1 = this.CreateTreeNode("Root1_Child1", id, queryStrings, "Child 1", "icon-windows", false);
                nodes.Add(Child1);
                var Child2 = this.CreateTreeNode("Root1_Child2", id, queryStrings, "Child 2", "icon-windows", false);
                nodes.Add(Child2);
                var Child3 = this.CreateTreeNode("Root1_Child3", id, queryStrings, "Child 3", "icon-windows", false);
                nodes.Add(Child3);
            }
            else if (id.Equals("Root2ID"))
            {
                // Create the child nodes of the second root node
                var Child1 = this.CreateTreeNode("Root2_Child1", id, queryStrings, "Child 1", "icon-windows", false);
                nodes.Add(Child1);
                var Child2 = this.CreateTreeNode("Root2_Child2", id, queryStrings, "Child 2", "icon-windows", false);
                nodes.Add(Child2);
                var Child3 = this.CreateTreeNode("Root2_Child3", id, queryStrings, "Child 3", "icon-windows", false);
                nodes.Add(Child3);
            }
            return nodes;
        }

        protected override MenuItemCollection GetMenuForNode(string id, FormDataCollection queryStrings)
        {
            var menu = new MenuItemCollection();

            // here you can define the menu options

            return menu;
        }
    }
}

Copy Link

Lloyd Dupont 7 posts 78 karma points

Mar 23, 2016 @ 23:59

ok, I already have a tree going (with the same editPage.js/html for all nodes), what I mean is I just can't display a specific page for each individual node. I tried that:

nodes.Add(CreateTreeNode("Special", Root, queryStrings, "Hello Special", "bin.png", "/mySection/user.html"));

But when I click on the "Special node" the browser goes "http://~/umbraco#/" I just can't manage to display any custom page! :'(

Remark I already have pages going where all child nodes share the same page.html, page.js. I explicitly want individual specific page for each node. That's the problem!!

Copy Link

Aristotelis Pitaridis 84 posts 402 karma points

Mar 24, 2016 @ 05:45

This is exactly what I done with my sample code. The line number 17 creates a node and defines the URL of the view.

var Root2 = this.CreateTreeNode("Root2ID", id, queryStrings, "Root 2", "icon-windows", true, "/mySection/MyTree/HtmlFile/Root2ID");

The HtmlFile is going to be the file name. In this example it will be HtmlFile.html. The Root2ID is a possible value that you could pass to the view. Usually it is the ID of the selected node but you can use whatever value you want.

If it does not work then you have to make sure that the view is in the right location. For this example the right location of the view is the following:

~/App_Plugins/mySection/backoffice/MyTree/HtmlFile.html

Copy Link

is working on a reply...

Flag this post as spam?

Custom page in Tree Node in section