0

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?

1 Answer 1

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:

enter image description here

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

3
  • Yeah, I've known our approach wasn't recommended and unreliable but kicking the can down the road was the easiest thing to do for the original authors. I'm not 100% sure where I need to put that json but I also need to show or hide based on a combination of roles and group permissions; can these props be updated dynamically? If so, do you have a reference for that? Mar 2, 2022 at 17:36
  • 1
    You need to put above code in Format current view option for a list view. Check more info at: View formatting. No, you cannot use roles and group permissions in JSON formatting. Apr 5, 2022 at 14:12
  • Thanks for the update; looks like it's not a viable option due to the inability to use it based on roles and groups. But I also don't get that option in the drop down for the list in question; I can see more options for a split second before they're hidden. Not sure what that's about but it doesn't matter anyway I guess. Oh, well; thanks for the help. Apr 5, 2022 at 18:25

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.