If you have created a custom tree in Umbraco 4.x then you would have probably created a custom context menu item (‘Action’) and realized that they are uniquely defined by a single character. You’ve probably then gone searching for some obscure Unicode character to ensure that yours is going to be unique amongst package developers. Though this is kind fun the first time, it’s not exactly ideal :) The good news is that in Umbraco v5 (Jupiter) custom context menu items are defined by GUIDs and so are nearly every other plugin type for that matter.

Disclaimer

This post is about developing for Umbraco v5 (Jupiter) which at the time of this post is still under development. The technical details described below may change entirely by the time Umbraco Jupiter is released. If you have feedback on the technical implementation details, please comment below.

Creating a context menu item

The easiest way to explain how to create a menu item is by example:

[MenuItem("D0635D22-B66C-4DC9-8442-3325CE5D5EE9", 
    "My menu item", 
    "MyJsLibrary.DoSomething")]
public class MyMenuItem : MenuItem { }

That’s it! All you have to do is create a class that extends MenuItem, then attribute it with the MenuItemAttribute and fill in the attribute details. The above implementation is the least amount of parameters you have to enter. Here’s the full list of attribute parameters:

• Id (GUID)
• The unique ID that identifies this menu item
• Title (string)
• The string title to show in the UI (Yes, this will be a localized string in the near future)
• OnClientClick (string)
• A string that must evaluate to a JavaScript method
• When this method is called, the JavaScript method will be passed the node object that was right clicked, this means that your method will automatically know what the node id is
• Icon (string)
• The icon to display for the menu item
• This can either be a path to an icon, or just a class name. If the string doesn’t contain a ‘/’ character then it is considered to be a class name
• SeparatorBefore (bool)
• If true, will show a menu item separator (line) before wherever this menu item is rendered
• SeparatorAfter (bool)
• If true will show a menu item separator (line)

Injecting JavaScript

So how do you make sure that your JavaScript file is registered in the UI? Easy, we just use a ClientDependency attribute. Now you can register any number of JavaScript files that your context menu item requires. For example, here’s the ‘Create’ menu item definition:

[ClientDependency(ClientDependencyType.Javascript, 
    "Tree/MenuItems.js", "Modules")]
[MenuItem("D0635D22-B66C-4DC9-8442-3325CE5D5EE9", 
    "Create", false, true, 
    "Umbraco.Controls.MenuItems.Create", 
    "menu-create")]
public class CreateItem : MenuItem { }

Sub menus?!

Yes, its true… at the time of this writing. Currently sub menu context menu systems are a reality, however I’m not guaranteeing that this will be the case when v5 is released. But I’ll still show you how to create them just in case:

[MenuItem("D0635D22-B66C-4DC9-8442-3325CE5D5EE9",
    "My menu item",
    "MyJsLibrary.DoSomething")]
public class MyMenuItem : MenuItem
{
    public override IEnumerable<MenuItem> SubMenuItems
    {
        get
        {
            return new List<MenuItem>
                       {
                           new CreateFolder(),
                           new CreateItem()
                       };
        }
    }
}

The above will create a menu item that has the CreateFolder and CreateItem as sub menu items so if you rollover the MyMenuItem context menu item, a sub context menu will show to the right of the normal menu with those 2 items.