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

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 FrontEnd (typescript) & Backend (c#)

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.

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

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

Manifest : Tree Store

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.

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

and the root tree item.

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 for completness. it looks like this.

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.

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
    }
};