How to edit the default action for an icon in a Sharepoint Ribbon

I wanted to change the behavior of the « Edit Item » button from the Sharepoint 2010 ribbon of the Display Form (DispForm.aspx). It wasn’t really easy, so I finally found a solution that I’m going to share here.

You’ll need to use JavaScript for that. In the below example, the click on the « Edit Item » will open the EditForm in a new window:

function ribbonIsLoaded() {
  // find the button we want to change
  var a = document.getElementById('Ribbon.ListForm.Display.Manage.EditItem-Large');
  // remove the default action for this button
  Sys.UI.DomEvent.clearHandlers(a)
  // define your own action
  a.setAttribute("onclick","");
  a.setAttribute("target", "_blank");
  a.setAttribute("href", window.location.href.replace(/DispForm.aspx/,"EditForm.aspx").replace(/&IsDlg=1/,""))
}
// Note: 'SOD' is an abbreviation for "Script on Demand"

SP.SOD.executeOrDelayUntilScriptLoaded(function () {
  var pm = SP.Ribbon.PageManager.get_instance();
  pm.add_ribbonInited(function () {
    ribbonIsLoaded();
  });
  var ribbon = null;
  try
  {
    ribbon = pm.get_ribbon();
  } 
  catch (e) {
  }
  if (!ribbon) {
    if (typeof (_ribbonStartInit) == 'function')
    _ribbonStartInit(_ribbon.initialTabId, false, null);
  } 
  else {
    ribbonIsLoaded();
  }
}, 'sp.ribbon.js');