Early Adopter's guide to Umbraco v14 [Trees] - Manifests
Published: 2024-02-21 12:29:26

Now, we have hopefully created all the bits of code we need to render the tree in the backoffice. 

> _Code for these posts is avalible in our [TimeDashboard Repository](https://github.com/KevinJump/TimeDashboard/) [FrontEnd (typescript)](https://github.com/KevinJump/TimeDashboard/tree/master/TimeDashboard.Client/assets/src/tree) & [Backend (c#)](https://github.com/KevinJump/TimeDashboard/tree/master/TimeDashboard.Client/Controllers/Time)_

we now have to define it in a series of manifests so Umbraco knows how and where to render it in the backoffice. 

## Some constants
There is a lot of cross referencing when setting up a tree, so its best to define things like aliases upfront so you don't get a typo.

```ts
export const TIME_TREE_REPOSITORY_ALIAS = 'Time.Tree.Repository';
export const TIME_TREE_STORE_ALIAS = 'Time.Tree.Store';
export const TIME_TREE_ALIAS = 'Time.Tree';
export const TIME_TREE_MENU_ALIAS = 'time.menu';
```

## Manifest TreeRepository

```ts
const treeRepository : ManifestRepository = {
    type: 'repository',
    alias: TIME_TREE_REPOSITORY_ALIAS,
    name: 'Time Tree repository',
    api: TimeTreeRepository
};
```

## Manifest : Tree Store

```ts
const treeStore: ManifestTreeStore = {
    type: 'treeStore',
    alias: TIME_TREE_STORE_ALIAS,
    name: 'Time tree Store',
    api: TimeTreeStore
};
```

## Manifest : Tree & root 

Now we define the tree and root item.

```ts
const tree: ManifestTree = {
    type: 'tree',
    alias: TIME_TREE_ALIAS,
    name: 'Time tree',
    meta: {
        repositoryAlias: TIME_TREE_REPOSITORY_ALIAS
    }
};
```

and the root tree item.

```ts
const treeItem: ManifestTreeItem = {
    type: 'treeItem',
    kind: 'unique',
    alias: 'Time.Tree.RootItem',
    name: 'Time Tree Item',
    meta: {
        entityTypes: [
            TIME_TREE_ROOT_ITEM_TYPE,
            TIME_TREE_ITEM_TYPE
        ]
    }
}
```

## The menu & item.
Now i am not 100% sure you need all of this, but defining the menu and the menu item tell Umbraco which workspace to put your tree in, and without this, your tree isn't going to appear.

We previously setup a menu in the [sectionBarApp post](https://dev.to/kevinjump/early-adopters-guide-to-umbraco-v14-sections-sidebars-and-menus-31i8) for completness. it looks like this. 

```ts
const menu: ManifestMenu = {
    type: 'menu',
    alias: TIME_TREE_MENU_ALIAS,
    name: 'Time Tree Menu',
    meta: {
        label: 'Times'
    }
}
```
> _note : the menu is referenced in the sidebar app, which what makes it appear in Umbraco_

For our tree we need to define a menu item that is the hook for our tree into the wider umbraco system.

```ts
const menuItem:  ManifestTypes = {
    type: 'menuItem',
    kind: 'tree',
    alias: 'Time.Tree.MenuItem',
    name: 'Time Tree Menu Item',
    weight: 400,
    meta: {
        label: 'Times',
        icon: 'icon-alarm-clock',
        entityType: TIME_TREE_ITEM_TYPE,
        menus: [TIME_TREE_MENU_ALIAS],
        treeAlias: TIME_TREE_ALIAS,
        hideTreeRoot: false
    }
};
```

And fingers crossed we are back where we started with a tree in Umbraco...

![Tree in umbraco](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/5w9d9pteok6eqzuqbmlx.png)

What we don't have yet is anything happening when you click on the nodes, but... that is [workspaces, and views](https://dev.to/kevinjump/early-adopter-umbraco-v14-workspaces-3ggl), which we have covered before..... 


> _Code for these posts is avalible in our [TimeDashboard Repository](https://github.com/KevinJump/TimeDashboard/) [FrontEnd (typescript)](https://github.com/KevinJump/TimeDashboard/tree/master/TimeDashboard.Client/assets/src/tree) & [Backend (c#)](https://github.com/KevinJump/TimeDashboard/tree/master/TimeDashboard.Client/Controllers/Time)_