Early Adopter's guide to Umbraco v14 [Trees] - Intro

I've been putting this part of the guide off for a while, because to be honest, its complicated and there is lots to it. But its time to delve into Custom trees in Umbraco 14.

Code for these posts is avalible in our TimeDashboard Repository FrontEnd (typescript) & Backend (c#)

What's a Tree,

A tree is a hierarchical collection of items, that is displayed in a folder like structure to the user.

Its a bit of UI that lets the user drill down into some folder structure that you have defined based on the data you are dealing with.

Bits of the tree.

In umbraco a tree is made up of several parts. And we will step through each one of them

Front end tree stuff.

There are several things that make up the front end bit of a tree!

1. Menu

We have touched on menu's before when we did sidebar app setup. The menu is the "container" that the tree will live in. it is defined by a manifest, and has no code behind that.

2. Menu Item

The menu item is the placeholder for where the tree lives, again defined in a manifest file it tells Umbraco where your tree is, what types of items it managegs etc.

3. Tree

The "tree" tells umbraco about your tree, specifically it tells Umbraco where to get your repository from that is the thing that goes and gets the tree items.

4. Tree Repository

The repository is where the code lives to go fetch the tree items, it will interact with your Store, and ultimitly the API layer to go get your tree items.

5. Tree Store

The store is the bit that talks to the API to get tree items, it has two main methods which are getRoot and getChildren these get the items for your tree.

6. Models

The Models that you pass between the front end and back end define what information is set on your tree, If we want to piggy back on some of Umbraco's exiting tree info (and we do!) then we need to have these models setup in a certain way.

Backend tree stuff.

So its all very well and good having all the front end stuff, but without some backend c# code to tell it what data is held in the tree's you are not going to see much. there following make up the tree in the c# code.

1. Tree Models.

These will be the modals returned to the front end, they might be slightly diffrent then the ones the front end ultimatly uses (there is mapping, but they define the tree item's name, unique id, if they have children, parent values etc. they help the front end locate the item when needed.

2. Tree Controller

The tree controller will be the point of entry for the tree commands.

Much like the controllers we setup when building communication between the front end and the back, these controllers have a few settings that are needed to make them work in swagger.

And they will return data in a certain way to make it eaiser to then intergrate with the front end.

there will be GetRoot and GetChildren methods on this controller that is how the tree data is passed over.

3. Services

We are not going to actually touch on this in this series but it would be assumed you would have some services/repo/etc in your back end to actually go fetch the data that needs to be represented in the tree.