Umbraco backend customization - custom buttons

Add you custom buttons to umbraco toolbar and extend CMS

This article is about extending Umbraco back-end with custom button to which you can attach your custom click handlers and force Umbraco back-end to work according to your needs.

To Achieve that you need to create class which inherits Umbraco.Core.ApplicationEventHandler

You need to include your class in a separate project so you can then deploy it to your Umbraco website by coping compiled dll to bin folder.

To add additional button you need to hook to event handler in class constructor on umbraco page load.

public class CustomUmbracoButtons : ApplicationEventHandler
    {
        public CustomUmbracoButtons()
        {
            umbracoPage.Load  = new MasterPageLoadHandler(umbracoPage_Load);
        }
	}
	
	void umbracoPage_Load(object sender, EventArgs e)
    {
		//Custom buttons add - code
	}
    

Now when you handle page load, you need to add button. Since edit page renders toolbar for every tab, button needs to be added to each button.

For each button in each tab, after adding, the same handler is assigned for click event.

using System;using System.Collections.Generic;using System.Linq;using System.Text;using Umbraco.Core;using umbraco.presentation.masterpages;using umbraco.uicontrols;using Umbraco.Core.Models;using System.Web;namespace Umbraco.Cms.Custom{public class CustomUmbracoButtons : ApplicationEventHandler{public CustomUmbracoButtons(){umbracoPage.Load += new MasterPageLoadHandler(umbracoPage_Load);}public static int GetCurrentID(){int id = 0;string query = HttpContext.Current.Request.QueryString["id"];int.TryParse(query, out id);return id;}void umbracoPage_Load(object sender, EventArgs e){var page = sender as umbracoPage;var tabView = (page.FindControl("body")).FindControl("TabView1") as TabView;
            if (tabView != null && tabView.GetPanels() != null)
            {
                IContent current = ApplicationContext.Current.Services.ContentService.GetById(GetCurrentID());
                if (current!=null && current.ContentType!=null && current.ContentType.Alias == "Article")
                {
                    foreach (TabPage panel in tabView.GetPanels())
                    {
                        var approveButton = panel.Menu.NewImageButton(3);
                        approveButton.ToolTip = "Approve comments";
                        approveButton.AlternateText = "Approve comments";
                        approveButton.ImageUrl = "/Umbraco/Images/Editor/TaskList.GIF";
                        approveButton.Click += new System.Web.UI.ImageClickEventHandler(approveButton_Click);
                    }
                }
            }
        }

        void approveButton_Click(object sender, System.Web.UI.ImageClickEventArgs e)
        {
            //Button action
        }
    }
}
    

Code above will add button at position 3 only for "Article" document type in our case. You can change this to alias of you document type for which you want to show custom button to umbraco toolbar.

As you can see, there is a small issue with toolbar layout.

This can be easily fixed by editing file /umbraco_client/tinymce3/themes/umbraco/skins/umbraco/ui.css

Open this CSS file and add the following code snippet at the end of file.

/*Fix*/
.mceToolbarExternal
{
    left:140px !important;
}
    

You might not see this css issue fixed right away when you reload the page.

In that case clear browser cache and then reload the page. CSS fix should be applied right away.

Disclaimer

Purpose of the code contained in snippets or available for download in this article is solely for learning and demo purposes. Author will not be held responsible for any failure or damages caused due to any other usage.

About the author

DEJAN STOJANOVIC

Dejan is a passionate Software Architect/Developer. He is highly experienced in .NET programming platform including ASP.NET MVC and WebApi. He likes working on new technologies and exciting challenging projects

CONNECT WITH DEJAN