DEV Community

Kevin Jump
Kevin Jump

Posted on

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


Enter fullscreen mode Exit fullscreen mode

Manifest TreeRepository



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


Enter fullscreen mode Exit fullscreen mode

Manifest : Tree Store



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


Enter fullscreen mode Exit fullscreen mode

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


Enter fullscreen mode Exit fullscreen mode

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


Enter fullscreen mode Exit fullscreen mode

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


Enter fullscreen mode Exit fullscreen mode

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


Enter fullscreen mode Exit fullscreen mode

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

Tree in umbraco

What we don't have yet is anything happening when you click on the nodes, but... that is workspaces, and views, which we have covered before.....

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

Top comments (0)