Important: This code works with the latest tip of the Umbraco v5 code (as of 8th November 2011) and is not guaranteed to work with alpha 3 - or any other version for that matter! The codebase is in flux so things could change at any time. I'll try and post back if anything becomes out of date - please use the comments if I've missed anything! Get the code from codeplex here.

Bear in mind that this is a very simple (you might say useless!) custom tree, which simply displays the products in the tree. I haven't gotten as far as allowing you to display their details or edit them, but I thought I'd share the code as a starting point for your own custom trees. This is a follow-on article which consumes the data that my custom hive provider (see my previous blog post) pulls back from an external database, i.e. a simple list of products.

Only a single class is required for this tree, the ProductTreeController class. This is decorated to let Umbraco know that it is a custom tree:

[Tree("E9B3E942-9A5A-415D-AFD4-29B81AC22FC5", "Products")]
public class ProductTreeController : SupportsEditorTreeController

Important: Please ensure that you give your tree a unique GUID otherwise there could be problems. In Visual Studio, you can click Tools -> Create GUID to create your own.

Note that it also implements the SupportsEditorTreeController. My class is based roughly on the UserTreeController class in the Umbraco.Cms.Web.Trees project in the Umbraco core.

Apart from this class, there is some configuration that you need to do to get your custom tree to appear in its own section (or "application") in Umbraco. Take a look at the web.config in the WebGarden.Trees project. Here you'll see that I've added a new application called "products". This corresponds to a "section" in version 4, the ones that appear in the bottom left hand of the screen (e.g. Content, Media, Users, etc).

Important: At the moment, the name and alias must match for your tree to work. This is probably a bug but best to keep them the same for now.

(thanks to js4xon for his help with this).

I've also added tree called "products" and its controller type is set to my ProductTreeController. The application for the tree is set to be my new products application. So, I'm expecting a new application called products, and in there should be my custom tree, also called products. The icon for your application should sit in the /Areas/Umbraco/Content/Images/AppIcons folder. I'm using the system-info.png image which ships with Umbraco, but you can drop your own custom icon in there and use that if you wish.

Important: You must add the following to your AssemblyInfo.cs for your class library so that Umbraco knows your dll contains a plugin of some sort. This can apply to custom trees, property editors, or any other kind of plugin:

[assembly: AssemblyContainsPlugins()]

And finally, you can use post-build events in your project to put your files into Umbraco, where it will automatically pick up your web.config settings and your custom tree and with any luck you'll have a new section in your Umbraco site! The file structure you use should be something like this:

Note that I've created Trees folder which contains my web.config along with a \lib folder which contains the dll for my trees project. Make sure your post-build events are updated to suit your own file structure.

UPDATE: To see your new application you must grant your own user access to it. Browse to your Umbraco back-end and go to the Users section and click on your own user. You should see a list of sections with your custom section at the bottom:

Check the box opposite your new section and save your changes. Log out and when you log back in, you should see a shiny new section in the bottom left hand corner like so (I'm using the System Info image for my section here):

And finally, when you click on your new section icon, you should see your custom data displayed blisfully in your custom tree, like so:

Happy coding!

David