Copied to clipboard

Flag this post as spam?

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


  • Ayo Adesina 370 posts 926 karma points
    Aug 01, 2017 @ 14:26
    Ayo Adesina
    0

    Custom Sections & Custom Trees MVC approach.

    Hi guys,

    I have spent hours and hours trying to get a custom tree to show up in a custom section in umbraco. - With out success.

    So far I have managed to create a new section, but when I click that section nothing happens.

    What should happen is a custom tree should be displayed with one node. When you click that node It should display an MVC view.

    This is what I have done so far, it is based around this tutorial.

    http://www.jondjones.com/learn-umbraco-cms/umbraco-developers-guide/customising-umbraco-ui/how-to-display-an-mvc-view-in-the-umbraco-backend

    A. Create the section

    namespace RewardsMPA.Umbraco.App_Plugins.Rewards
    {
        [Application("rewards", "Rewards", "icon-gift", 15)]
        public class RewardsSection: IApplication
        {
        }
    }
    

    B. Create the Tree

    [Tree("rewards", "rewardsTree", "Rewards")]
    [PluginController("Rewards")]
    public class RewardsTree : BaseTree
    {
        public RewardsTree(string application)
            : base(application)
        { }
    
        protected override void CreateRootNode(ref XmlTreeNode rootNode)
        {
            rootNode.NodeType = "rewards";
            rootNode.NodeID = "-1";
            rootNode.Menu = new List<IAction> { ActionRefresh.Instance };
    
        }
    
        public override void Render(ref XmlTree tree)
        {
            var IndexNode = XmlTreeNode.Create(this);
            IndexNode.NodeID = "0";
            IndexNode.NodeType = "Home";
            IndexNode.Text = "Home";
            IndexNode.Action = "javascript:openPage('/umbraco/backoffice/Plugins/Rewards/Index');";
            IndexNode.Icon = "icon-home";
            IndexNode.HasChildren = false;
            IndexNode.Menu = new List<IAction>();
            OnBeforeNodeRender(ref tree, ref IndexNode, EventArgs.Empty);
    
            if (IndexNode != null)
            {
                tree.Add(IndexNode);
                OnAfterNodeRender(ref tree, ref IndexNode, EventArgs.Empty);
            }
        }
    
        public override void RenderJS(ref StringBuilder Javascript)
        {
            var js = $"function openPage(url){{UmbClientMgr.contentFrame(url);}}";
            Javascript.Append(js);
        }
    
        protected override void CreateAllowedActions(ref List<IAction> actions)
        {
            actions.Clear();
            actions.Add(ActionNew.Instance);
            actions.Add(ActionDelete.Instance);
            actions.Add(ContextMenuSeperator.Instance);
            actions.Add(ActionRefresh.Instance);
        }
    }
    

    C. RegisterRoutes (called on ApplicationStarted)

    public static void RegisterRoutes(RouteCollection routes)
    {
        routes.IgnoreRoute("{resource}.axd/{*pathInfo}");
        routes.MapRoute(
              name: "Default",
              url: "umbraco/backoffice/Plugins/{controller}/{action}/{id}",
              defaults: new { controller = "Home", action = "Index", id = UrlParameter.Optional }
          );
    }
    public class StartUpHandlers : ApplicationEventHandler
    {
        protected override void ApplicationStarted(UmbracoApplicationBase umbracoApplication, ApplicationContext applicationContext)
        {
            RouteConfig.RegisterRoutes(RouteTable.Routes);
        }
    }
    

    D. Back-end Controller - Returning view I want to see.

    public class RewardsController : UmbracoAuthorizedController
    {
        public ActionResult Index()
        {
            return View("~/App_Plugins/Rewards/Views/RewardsHome/Index.cshtml");
        }
    }
    

    So what am I missing?

    I put break points in the RewardsTree Class but none of them are hit.

    I also put break points on Application Started and those break points are being hit so I am pretty sure the route is being configured correctly.

    Is there anything that I am missing? I have seen other examples using a TreeController insted of TreeBase which has confused me a bit.

    ANY ideas? - very stuck

  • David Brendel 752 posts 2819 karma points c-trib
    Aug 01, 2017 @ 15:17
    David Brendel
    1

    Hi Ayo,

    are you using v7? If yes than that tutorial is pretty outdated. Have a look at TreeController which is now used for custom trees. Also there is no need for custom routes. And the backoffice in v7 is based un HTML views and angular. So don't think you can and should use mvc views in the Backend.

    Regards David

  • Ayo Adesina 370 posts 926 karma points
    Aug 01, 2017 @ 16:20
    Ayo Adesina
    0

    Yes I'm using V7 I did see a walk through with a Tree Controller as the focus, couldn't get it to quite work, but now I know this is the most up-to-date technique I will focus my efforts here.

    As for the MVC views - From everything I have read you can customise the UI using three options, MVC, Webforms or Agular & WebApi.

    I have gone for MVC becuase that is my strongest skill set, if anyone else could clarify these approaches and how/if they apply to the latest v7 of Umbraco - that would be very helpful.

    Thanks for your response David.

  • David Brendel 752 posts 2819 karma points c-trib
    Aug 01, 2017 @ 21:25
    David Brendel
    0

    Hi Ayo,

    maybe have a look here: https://our.umbraco.org/forum/developers/extending-umbraco/46514-Can-you-use-NET-MVC-in-Umbraco-7-Backoffice

    Thats the biggest thread I know in regards to that topic.

    But I strongly suggest going with angular as the BaseTree stuff will be removed with v8 I think. Of course that version is not that near but anyway.

    Sadly I have currently no complete tutorial for the angular way at hand.

    Regards David

  • Ayo Adesina 370 posts 926 karma points
    Aug 02, 2017 @ 09:24
    Ayo Adesina
    100

    I have managed to get a custom tree displaying in a custom section! At last! -

    The problem I had was two fold.

    From all the tutorials online that walk you through how to do this when defining the custom tree some tutorials inherit from BaseTree and others inherit from TreeController -

    I have got it to work inheriting from TreeController, from what I understand using the BaseTree is the 'old way' of doing it.

    I'm running Umbraco version 7.6.4 assembly: 1.0.6396.36621 - I'm not sure if the old way works using this version or not, but I couldn't get it to work.

    So after following the guide lines in chapter 16 (Custom Sections, Trees and Actions) of this book: https://github.com/kgiszewski/LearnUmbraco7

    I got my project to compile and run, the custom section showed up, but the custom tree didn't, when I clicked the custom section an error was thrown.

    System.NullReferenceException: Object reference not set to an instance of an object.

    Part of stack trace looks like this:

    Umbraco.Web.Trees.ApplicationTreeExtensions.TryLoadFromControllerTree(ApplicationTree appTree, String id, FormDataCollection formCollection, HttpControllerContext controllerContext) at Umbraco.Web.Trees.ApplicationTreeController.

    It wasn't obvious why this was happening, but after a bit of reasearch I worked out this was becuase....................

    I am using a IoC contanier and for this to work I needed to make sure the TreeController is registered in the containier! - This is something that is not mentioned in any documentation or tutorials relating to creating custom trees. The documentation assumes your using Umbraco with out an IoC container.

    In my case I'm using Autofac so all I had to do was add this to my container registration code:

    builder.RegisterApiControllers(typeof(RewardsTreeController).Assembly);
    

    and suddenly everything works!

    Really hope this helps someone else.

    Umbraco (7.6. 4) / Autofac.Mvc5 (4.0.2) / Autofac.WebApi2 (4.0.1) / << That's the combination of nuget packages that are working for me.

  • manila 240 posts 542 karma points
    Jul 10, 2019 @ 20:20
    manila
    0

    Hi Ayo, I don't know how you made it working because in the Kevin Giszewski's example he inherits from FileSystemTreeController not like in Tim's example from TreeController unless this is what you needed.

    I still have trouble to display even the section tree even though I followed both examples very carefully.

    The section is displaying just with not tree in it and the controller doesn't hit at all on debugging. I described my issue here: https://our.umbraco.com/forum/extending-umbraco-and-using-the-api//98104-trouble-disaplying-custom-section-in-umbraco-76

Please Sign in or register to post replies

Write your reply to:

Draft