Before we dive into all of the code for rendering trees in the backoffice, we need to define a few types and interfaces,

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

They are used and passed around quite a lot, so setting them up now, will save us time later and let us use a lot of the core Umbraco code for tree managment.

Item Types (entities).

The types of thing each bit of the tree handles will determain what is shown to the user when they click on the tree item, we have two types of item in our tree. Root items and Items.

export const TIME_TREE_ROOT_ITEM_TYPE = 'time-root';
export const TIME_TREE_ITEM_TYPE = 'time-item';

export type TimeTreeItemType = typeof TIME_TREE_ITEM_TYPE;
export type TimeTreeRootItemType = typeof TIME_TREE_ROOT_ITEM_TYPE;

Item Models.

The item models are what are passed between repositories, stores and the Umbraco base classes, there are root and item modles that differ here only in the entity type they manage.

import type { UmbUniqueTreeItemModel, UmbUniqueTreeRootModel } from "@umbraco-cms/backoffice/tree"
import { TimeTreeItemType, TimeTreeRootItemType } from "./enitty"

export interface TimeTreeItemModel extends UmbUniqueTreeItemModel {
    entityType : TimeTreeItemType
}

export interface TimeTreeRootModel extends UmbUniqueTreeRootModel {
    entityType: TimeTreeRootItemType
}

These Models will be used extensively, We have inherited from UmbUniqueTreeItemModel, which has other properties defined on it such as parent, hasChildren and name.

Later on we might also define a details model which is the model used when an item is looked up to be displayed in the main workspace view on the page, but we are leaving that out for now while we deal with the mechanics of the tree alone.