Is SharePoint injecting a second command menu bar?

Question

I've inherited the SPFx components of a SharePoint solution that has a custom command set that replaces the OOB command menu bar items.The OOB menu items are removed by looping over "ms-OverflowSet-item"s with setInterval to set their display.

el.style.display = "none";

Up until recently, this worked fine but now the OOB command bar gets added again after the max interval has been reached and the Promise returned.

It seems clear that it is an additional command bar because if I extend the interval, set breakpoints on the display updates, I can see the elements are already hidden, yet they're back on the screen along with my custom commands.

I've tried a bunch of hacky stuff including removing all the locations where we set the display of the command bar back to "" but nothing works; I can only assume something changed in SharePoint to cause this new behavior.

Any ideas on the cause or a fix?

Answer 1

DOM manipulations using HTML element ID/classes are not recommended by Microsoft as some of your customizations may break if Microsoft changes HTML element id/classes in new release updates.

---

This week Microsoft introduced a new feature in SharePoint JSON formatting using which you can hide/customize the command bar options using view formatting.

So, you don't have to use any custom CSS to hide the command bar options from SPFx.

Example: Below example hides "New" command & customizes display of "Edit in grid view" command:

{
  "commandBarProps" : {
    "commands": [
      {
        "key": "new",
        "hide": true
      },
      {
        "key": "editInGridView",
        "text": "Quick edit",
        "iconName": "EditTable",
        "primary": true
      }
    ]
  }
}

Output:

Check this documentation for more information about the syntax & command keys you can target in JSON formatting: Command bar customization syntax reference