Package: Simple Trees

Umbraco allows developers to implement their own custom trees. In version 13 and below, this was achieved using a combination of C# and AngularJS.

Since the new backoffice was introduced, creating a custom tree has become more front-end focused, requiring front-end tooling to benefit from the new extension API.

If you want to see a working example of a custom tree implemented in Umbraco I recommend Kevin Jump's Umbraco Tree Example. In summary, you need to implement a lots of manifest files to represent your custom tree, entity types, data sources, siderbar apps and more.

Let's make it easier

Imagine you were able to define a single C# class to represent your custom tree and add two views to your Views folder for render logic?

Simple Trees

Simplifies C# based Umbraco Trees

Learn more

Screenshots

A friendly error message when no tree view is found

An example of a custom tree displaying NuGet packages and authors

A working example

using Umbraco.Cms.Core.Models;
using Umbraco.Community.SimpleTrees.Models;

namespace Umbraco.Community.SimpleTrees.TestSite.Trees;

public class MyTree : SimpleTree
{
    public override Task<PagedModel<ISimpleTreeItem>> GetTreeRootAsync(int skip, int take, bool foldersOnly)
    {
        var data = new List<ISimpleTreeItem>
        {
            CreateRootItem("James", Guid.NewGuid().ToString(), "icon-user"),
            CreateRootItem("Tim", Guid.NewGuid().ToString(), "icon-user"),
        };

        return Task.FromResult(new PagedModel<ISimpleTreeItem>(data.Count, data));
    }

    public override Task<PagedModel<ISimpleTreeItem>> GetTreeChildrenAsync(string entityType, string parentUnique, int skip, int take, bool foldersOnly) => Task.FromResult(EmptyResult());

    public override string Name => "My Tree";
}

@inherits Umbraco.Community.SimpleTrees.Web.SimpleTreeViewPage

<uui-box headline="This is a custom tree item">
  <div>
    <table>
      <thead>
      <tr>
        <th>Entity Type</th>
        <th>Unique</th>
      </tr>
      </thead>
      <tbody>
      <tr>
        <td>@Model.EntityType</td>
        <td>@Model.Unique</td>
      </tr>
    </table>
  </div>
</uui-box>

@inherits Umbraco.Community.SimpleTrees.Web.SimpleTreeViewPage

<uui-box headline="This is a custom tree item">
  <div>
    This is a custom tree.
  </div>
</uui-box>