This page is a work in progress. It will be updated as the software evolves.
Menu
Menu Item
Tree Menu Item
// TODO adds docs when we have extension kinds
Manifest
Default Element
Adding menu items to an existing menu
The backoffice comes with a couple of menus.
Content, Media, Settings, Templating, Dictionary, etc.
To add a menu item to an existing menu, you can use the meta.menus property.
{"type": "menu","alias": "My.Menu","name": "My Menu"}
{"type": "menuItem","alias": "My.MenuItem","name": "My Menu Item","meta": {"label":"My Menu Item","menus": ["My.Menu"] }}
// it will be something like this{"type": "menuItem","kind": "tree","alias": "My.TreeMenuItem","name": "My Tree Menu Item","meta": {"label":"My Tree Menu Item","menus": ["My.Menu"] }}
// get interfaceinterfaceUmbTreeMenuItemElement {}
{"type": "menuItem","alias": "My.MenuItem","name": "My Menu Item","meta": {"label":"My Menu Item","menus": ["Umb.Menu.Content"] }}
Trees
A guide to creating a custom tree in Umbraco
This page is a work in progress. It will be updated as the software evolves.
The tree is a hierarchical structure of nodes and is registered in the Backoffice extension registry. A tree can be rendered anywhere in the Backoffice with the help of the umb-tree element.
Creating trees
To Create a Tree in a section of the Umbraco backoffice, you need to take multiple steps:
Registering a tree
The backoffice comes with two different tree item kinds out of the box: entity and fileSystem.
Tree Manifest:
// TODO: add interface{"type": "tree","alias": "My.Tree.Alias","name": "My Tree","meta": {"repositoryAlias":"My.Repository.Alias" }},{"type": "treeItem","kind": "entity","alias": "My.TreeItem.Alias","name": "My Tree Item","conditions": {"entityType":"my-entity-type", },}
Rendering a tree
<umb-tree alias="My.Tree.Alias"></umb-tree>
Render a Custom Tree Item
The Tree Item Manifest
{"type": "treeItem","alias": "Umb.TreeItem.Alias","name": "My Tree Item","element": "./my-tree-item.element.js","conditions": {"entityType":"my-entity-type", },};
// TODO: auto-generate this from the interfaceexportinterfaceUmbTreeItemContext<T> { host:UmbControllerHostElement; unique?:string; type?:string; treeItem:Observable<T|undefined>; hasChildren:Observable<boolean>; isLoading:Observable<boolean>; isSelectable:Observable<boolean>; isSelected:Observable<boolean>; isActive:Observable<boolean>; hasActions:Observable<boolean>; path:Observable<string>;setTreeItem(treeItem:T|undefined):void;requestChildren():Promise<{ data:PagedResponse<T> |undefined; error:ProblemDetails|undefined;asObservable?: () =>Observable<T[]>; }>;toggleContextMenu():void;select():void;deselect():void;constructPath(pathname:string, entityType:string, unique:string):string;}
Extending the Tree Item Context base
We provide a base class for the tree item context. This class provides some default implementations for the context. You can extend this class to overwrite any of the default implementations.
exportclassUmbMyTreeItemContextextendsUmbTreeItemContextBase<MyTreeItemDataModel> {constructor(host:UmbControllerHostElement) {super(host, (x:MyTreeItemDataModel) =>x.unique); }// overwrite any methods or properties here if needed}