Creating a custom context menu item in Umbraco 5

In Umbraco

This blog post is about how to create a custom context menu item with Umbraco 5 (Jupiter). This post is based on version 5.2.0.1012 of Umbraco.

Using plugins with Umbraco 5

In order to use plugins with Umbraco 5 you’ll first need to declare this in the assembly information. You do this by adding the attribute [assembly: AssemblyContainsPlugins] to AssemblyInfo.cs.

umbraco-context-menu-assembly-info

In order to create a custom context menu item we’ll be creating four components that will interact:

  • A custom menu item
  • A javascript which will fire the user click event
  • A controller that will handle the user click event
  • A custom tree controller that will add the menu item to the context menu

You’re free to organize these as you wish in your project. I however organized mine with a “Plugins”-directory as shown below.

umbraco-plugins

Custom menu item

The custom menu item will be the item that is displayed in the context menu. This will include an icon and a title for the menu item. We’ll also be defining which click event function that should be called. See sample implementation below.

Note that we use the ClientDependency-attribute to define which javascript we depend on for our menu item. We also need to create a GUID for our item. This can be done in Visual Studio, see image below.

visual-studio-create-guid

Javascript

This is the javascript that will handle the click event and call our controller. See sample code below.

Custom edit controller

This is the controller that will handle the click event.  Here we pass the Hive ID to the controller which we can use to retrieve the content object and perform additional logic. In this case however we’ll only be creating a notification for the user that they’re awesome and render this using the built in Umbraco view. See sample code below.

Custom tree controller

In order to render our custom menu item in Umbraco we need to add it to the context menu. We do this by creating our own custom tree controller and adding the menu item. See sample code below.

Registering our custom tree controller

In order for our custom tree controller to be used instead of the default Umbraco tree controller we need to set this in umbraco.cms.trees.config. See image below.

umbraco-cms-trees-config

You replace the tree controller in the add-element with application=”content” attribute.

Result

The final result should look like sample image below.

umbraco-context-menu-custom-item

And when clicked.

you-are-awesome

Thanks for reading!

daniel
daniel
Developer
Recent Posts
  • babu

    can i have a source for the same ?

  • farax

    thats sooooooo long, i hate umbraco and microsoft technology.

  • Matt Taylor

    Is this the same approach for v6?
    I’d like the source too if it is available.

Contact Us

We're not around right now. But you can send us an email and we'll get back to you, asap.

Not readable? Change text. captcha txt

Start typing and press Enter to search