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
}
};
And fingers crossed we are back where we started with a 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)