I'm trying to replace a Ribbon Button programmatically in SharePoint 2013 (only for Publishing pages). Heres my Code so far (adapted from a similar StackExchange question), it is not overriding the button. I have tried about 20 different variations with the Location attribute etc. with no success. The Code below attempts to override the New button, previously I have tried to do this for the Save button. Can anyone help me spot the error here?

var context = new SP.ClientContext.get_current();
this.site = context.get_web();

var customAction = this.site.get_userCustomActions().add();
var uiExtension = new Sys.StringBuilder();
uiExtension.append('<CommandUIExtension xmlns=\'http://schemas.microsoft.com/sharepoint/\'>')
uiExtension.append('<CommandUIDefinition     Location="Ribbon.WikiPageTab.EditAndCheckout.Controls._children">');
uiExtension.append(' Id=\'Ribbon.WikiPageTab.EditAndCheckout.Controls.New\'');
uiExtension.append(' Sequence=\'25\'');
uiExtension.append(' Alt=\'$Resources:core,save_15;\'');
uiExtension.append(' Command="CustomSavePage"');
uiExtension.append(' Image16by16="/_layouts/15/$Resources:core,Language;/images/formatmap16x16.png?rev=23" Image16by16Top="-197" Image16by16Left="-37"');
uiExtension.append(' Image32by32="/_layouts/15/$Resources:core,Language;/images/formatmap32x32.png?rev=23" Image32by32Top="-103" Image32by32Left="-409"');
uiExtension.append(' LabelText="TEST"');
uiExtension.append(' ToolTipTitle="$Resources:core,save_15;"');
uiExtension.append(' TemplateAlias="o1"');
uiExtension.append(' ToolTipDescription="$Resources:core,cui_STT_save;"');
uiExtension.append(' Command="CustomSavePage" ');
uiExtension.append(' CommandAction="javascript:SP.UI.Notify.addNotification(\'Hello from the notification area\');"');



context.executeQueryAsync(Function.createDelegate(this, function(){alert("Success")}),
    Function.createDelegate(this, function(){alert("Fail")}));

1 Answer 1


Dealing with the ribbon is not easy... I created RibbonPlus that helps creating new buttons into the ribbon (it's limited but it's a start)

When you want to override an existing action, you can try to figure out the related action. For example the "Delete item" button triggers a HREF element in the page a[id$="_toolBarTbl_RptControls_diidIODeleteItem"]. Then to override the delete item action you could do:

document.querySelector('a[id$="_toolBarTbl_RptControls_diidIODeleteItem"]').setAttribute("href","javascript:myOwnAction(); return false")

Regarding the "New" button if you search into your source page code you'll find its related code:

<ie:menuitem id="ctl00_SiteActionsMenuMain_ctl00_wsaCreatePage" 
type="option" iconSrc="/_layouts/15/images/crtpage.gif?rev=23"
onMenuClick="javascript:if (LaunchCreateHandler(&#39;PublishingPage&#39;)) { SP.SOD.executeFunc(&#39;sp.ui.dialog.js&#39;, &#39;SP.UI.ModalDialog.showModalDialog&#39;, function() { var dlgOptions = { url:&#39;\u002fsites\u002fdev_sandbox\u002f_layouts\u002f15\u002fCreatePublishingPageDialog.aspx&#39;, autoSize: true, autoSizeStartWidth: 550 };  SP.UI.ModalDialog.showModalDialog(dlgOptions); }); };"
text="Add a page" description="Create a page in this site." menuGroupId="200"></ie:menuitem>

Based on it you could "hack" the LaunchCreateHandler function with something like:

// backup the original function
var LaunchCreateHandler_backup=LaunchCreateHandler;
// override the existing one
function LaunchCreateHandler(a) {
  // if it's a "PublishingPage" then we return false
  // and we use our own code
  if (a === "PublishingPage") {
    alert("Your code here !");
    return false;
  // otherwise we use the original function
  return LaunchCreateHandler_backup(a)
  • Hi AymKdn, thanks for the tip! It's some really useful stuff that you have developed and it works for creating new Tabs with own Buttons etc. but for adding Buttons to existing Tabs (e.g. Page -> Edit) it is not currently working. Basically it cannot find the tab (the Group is found). I will try to use the hack you suggested and post the results back here - P.S. I'm trying to override the save and/or new command in the Ribbon itself (Page tab, Edit Group) not the one in the page Actions.
    – user62604
    Dec 12, 2016 at 14:17
  • @user62604 I have just updated RibbonPlus and fixed the problem. Actually the Tab needs to be loaded first before adding the button. So now the code will automatically verify the tab is loaded!
    – AymKdn
    Dec 12, 2016 at 19:50

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.