I'm trying to add a button to a tab of a ribbon and access some others to add click handlers etc.

      ExecuteOrDelayUntilScriptLoaded(function () {
    let pm = SP.Ribbon.PageManager.get_instance();
    pm.add_ribbonInited(function () {
      let ribbon = pm.get_ribbon();
      let elementTab = ribbon.getChild('Ribbon.ListItem') as CUI.Tab;

      $(elementTab.get_id).one("click", () => {
        setTimeout(() => {
          let row = elementTab.getChild("Ribbon.ListItem.Manage").getChild("Ribbon.ListItem.Manage-LargeMedium").getChild("Ribbon.ListItem.Manage-LargeMedium-0").getChild("Ribbon.ListItem.Manage-LargeMedium-0-0");
          let controlProperties = new CUI.ControlProperties();
          let button = new CUI.Controls.Button(ribbon, 'Sample.Button', controlProperties).createComponentForDisplayMode('Large');
        }, 100)
  }, 'sp.ribbon.js');

That was the best I could get. The problem is that the tabs are not loaded until they are opened by the user, although I can add new groups to the tab when it's still closed. Please not that these tabs are afaik provided by sharepoint, they are not added by any custom xml file (if that's relevant).

It seems like I'm missing a function "add_tabInited" similar to the function for the ribbon. Or how am I else supposed to know when the group of the tabs are available?

In my code, I tried a workaround by adding a click handler, but it's quite hacky and it requires a reload then to actually see the button.

I would appreciate some help!

1 Answer 1


You can implement this by adding the custom action Reference url

  • I know about that possibilty, but I would like to know how to do it in js directly. I mean it has be possible, otherwise the library would be completly pointless?
    – Leon0402
    Feb 14, 2020 at 15:43

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.