Umbraco backend customization - custom buttons
Add you custom buttons to umbraco toolbar and extend CMS
This article is related and tested on Umbraco v6.1.6 (Assembly version: 1.0.5021.24867). I am not sure that the same approach can be applied to Umbraco 7
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.
Comments for this article