Adding a custom button into the Umbraco content menu

I needed to add a custom button into the menu bar shown on each tab in the content editor in Umbraco.

Firstly you need to hook onto the page load event within the backoffice via a class implementing IApplicationStartupHandler.

public class CustomButton : IApplicationStartupHandler
{
   public CustomButton()
   {
        umbracoPage.Load += UmbracoPageLoad;
   }

   private void UmbracoPageLoad(object sender, EventArgs e)
   {
   }
}

Right so now we have a place where we can manipulate the tab menu. There are a few null reference checks we could do with throwing in but we’re essentially going to run the following. Our button needs to be added to each menu in each tab.

private static void AddButton(umbracoPage page)
{
   var tabView = (page.FindControl("body")).FindControl("TabView1") as TabView;

   if (tabView == null) return;

   foreach (TabPage panel in tabView.GetPanels())
   {
      var menuButton = panel.Menu.NewImageButton(1);
      menuButton.AlternateText = "My custom button rocks";
      menuButton.ImageUrl = "~/images/cms/myimage.gif";
      menuButton.Click += CustomButtonClicked;
   }
}

As this is an image button we can handle the click in the usual webforms way. Here’s the full implementation:

namespace DetangledDigital.Demo.StartupHandlers
{
   using System;
   using System.Web;
   using System.Web.UI;
   using umbraco.BasePages;
   using umbraco.interfaces;
   using umbraco.presentation.masterpages;
   using umbraco.uicontrols;

   public class CustomButton : IApplicationStartupHandler
   {
    public CustomButton()
    {
        umbracoPage.Load += UmbracoPageLoad;
    }

    private void UmbracoPageLoad(object sender, EventArgs e)
    {
        var page = sender as umbracoPage;

        if (page == null)
            return;

        if (!page.Page.Request.Path.ToLower().Contains("editcontent.aspx"))
            return;

        AddButton(page);
    }

    private static void AddButton(umbracoPage page)
    {
        // Js fix for toolbar, may be required dependant on menu setup.
        // page.Page.ClientScript.RegisterClientScriptBlock(GetType(), "cssfixtoolbar", "<style type='text/css'>.mceToolbarExternal{left:108px;}</style>");

        var tabView = (page.FindControl("body")).FindControl("TabView1") as TabView;
        if (tabView == null) return;

        foreach (TabPage panel in tabView.GetPanels())
        {
            var menuButton = panel.Menu.NewImageButton(1);
            menuButton.AlternateText = "My custom button rocks";
            menuButton.ImageUrl = "~/images/cms/sendToEditor.gif";
            menuButton.Click += CustomButtonClicked;
        }
    }

    private static void CustomButtonClicked(object sender, ImageClickEventArgs e)
    {
        var nodeId = int.Parse(HttpContext.Current.Request.QueryString["id"]);

        // Do some bits

        // Show the user a notification
        BasePage.Current.ClientTools.ShowSpeechBubble(BasePage.speechBubbleIcon.success, "Success", "The content has been sent for approval.");
        }
    }
}