Adding a custom control to Umbraco 7 Action Menu

Umbraco 7 has introduced a whole new way of interacting with their CMS. Gone are many of the old windows forms methods of the past and introduced is new MVC paradigm thrown together with AngularJS. It's a bit of a learning curve for the newly inducted but once you grab hold of the key concepts the rest comes alone.

One thing that always comes up is putting in custom controls. One such item is not just adding in a whole new tree of nodes and menus but just expanding on the existing action menu with your own custom control. Here is a brief walk through on adding a new action menu option to Umbraco 7.

First you will need to set up a application event handler that can update the action menu when it is loaded. This can be done by creating a class that inherits the ApplicationEventHandler and overrides the ApplicationStarted method. You can then add another event handler that fires when the main action menu is rendered. Below is a code snippet of a class that will add a new 'My Action' option to the actions menu.

public class PreviewHandler : ApplicationEventHandler
{
	protected override void ApplicationStarted(UmbracoApplicationBase umbracoApplication, ApplicationContext applicationContext)
	{
		TreeControllerBase.MenuRendering += TreeControllerBase_MenuRendering;
		base.ApplicationStarted(umbracoApplication, applicationContext);
	}
	
	void TreeControllerBase_MenuRendering(TreeControllerBase sender, MenuRenderingEventArgs e)
	{
		if (sender.TreeAlias == "content")
		{
			var m = new MenuItem("myAction", "My Action");
			m.Icon = "umb-content";
			e.Menu.Items.Add(m);
		}
	}
}

Umbraco 7 holds to the MVC paradigm by expecting the new action view to be located in the /Umbraco/Views/Content folder. The name of the view should match the MenuItem alias 'myAction' set above called myAction.cshtml. Below is a sample of the view created for this new control. After rebuilding the application you should now see the new My Actiion option appear in the action menu. You can click it but it may not render correctly as the code below is hooked up to a yet-to-be-created AngularJS controller.

<div ng-controller="Umbraco.Editors.Content.MyAction">
    <div class="umb-dialog-body form-horizontal">
        <div class="umb-pane">
            <p>My Custom Control</p>
            <p style="color:red;font-weight:bold">{{WelcomeMessage}}</p>
        </div>
    </div>
    <div class="umb-dialog-footer btn-toolbar umb-btn-toolbar">
        <a class="btn btn-link" ng-click="nav.hideDialog()">
            <localize key="general_cancel">Cancel</localize>
        </a>
    </div>
</div>

The introduction of AngularJS to Umbraco 7 makes it much easier to find and update some of the built in controls. You can find the controllers reference in the source Javascript file and make amendments to its code as necessary. The only downside to this is of course when Umbraco releases a new version. You'll either have to build your own controllers or lock down those that have been customised during development. For the above view it is referencing the Umbraco.Editors.Content.MyAction controller. The main source for this file is found in the /Umbraco/Js/umbraco.controller.js file. It is to this file that we add our custom controller below that is used by our myAction.cshtml view.

angular.module('umbraco').controller("Umbraco.Editors.Content.MyAction", contentMyActionController);
function contentMyActionController($scope, $routeParams, $http, contentResource) 
{
    $scope.WelcomeMessage = 'Hello World!';
}

After reloading the application and clicking the My Action option in the action menu it should load the view and also display the 'Hello World' text within the new page. From this you can add unique functionality required for you custom control.