Using the Core.RibbonCommands sample add-in from SharePoint add-in recipes for custom ribbons, I was able to add custom tab into pages in SharePoint Online except while viewing/editing SitePages or publishing-pages.

For instance, while trying to add a button into Wiki Page's Editing Ribbon, the custom ribbon buttons just don't appear if I use the exact same xml from another post in the msdn forum, albeit for SharePoint 2010.

Appreciate your help on how the ribbons can be customised for a Wiki Page


<?xml version="1.0" encoding="utf-8" ?>
<Elements xmlns="http://schemas.microsoft.com/sharepoint/">
  <CustomAction Id="WikiExtensions.Ribbon.EditingTools"
        <CommandUIDefinition Location="Ribbon.EditingTools.CPEditTab.Styles.Controls._children">
          <Button Id="WikiExtensions.Ribbon.InsertCodeBlock"
      Alt="Notify hello"
      Description="Uses the notification area to display a message."
      LabelText="Notify hello"
      TemplateAlias="o1" />

1 Answer 1


I tried to add to Edit group, it works.

enter image description here

<script type="text/javascript" src="https://code.jquery.com/jquery-1.12.4.js"></script>
    <script language="javascript" type="text/javascript">
        function AddCustomUserAction() {
            //Get the client context and list object
            var context = new SP.ClientContext.get_current();
            var web = context.get_web();
            //Get the custom user action collection and add the user action
            var customUserAction = web.get_userCustomActions().add();
            //Set the location of the user action
            //Add the properties for the custom action
            var userActionExtension = '<CommandUIExtension xmlns="http://schemas.microsoft.com/sharepoint/">' + '<CommandUIDefinitions>' + '<CommandUIDefinition Location="Ribbon.EditingTools.CPEditTab.EditAndCheckout.Controls._children">' + '<Button Id="WikiExtensions.Ribbon.InsertCodeBlock" ' + 'Command="WikiExtensions.Command.InsertCodeBlock" ' + 'Sequence="5" ' + 'Image16by16="/_layouts/images/NoteBoard_16x16.png" ' + 'Image32by32="/_layouts/images/NoteBoard_32x32.png" ' + 'Description="Uses the notification area to display a message." ' + 'LabelText="Notify hello" ' + 'TemplateAlias="o1"/>' + '</CommandUIDefinition>' + '</CommandUIDefinitions></CommandUIExtension>';
            //Add the command UI extension and update the custom user action
            //Load the client context and execute the batch
            context.load(web, 'UserCustomActions');
            context.executeQueryAsync(function () {
                console.log("Custom User Action added successfully to ribbon.");
            }, function (sender, args) {
    <input id="Button1" onclick="AddCustomUserAction()" type="button" value="button" />
  • To elaborate on the answer, I have created a page and embed Lee_MSFT's codes in the page to execute the codes.
    – Wee
    Jul 15, 2019 at 2:56

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.