SharePoint Online - JSON Formatting of Command Bar is not working any longer

Question

Hi,

I have the following JSON format for views in SharePoint Online sites to hide 'Upload Template' and 'Upload Folder' menu items. This used to work, but has stopped working now. Would appreciate if anyone could suggest other ways to achieve this, please. Or let me know why it isn't working any more. Thank you.

{

"$schema": "https://developer.microsoft.com/json-schemas/sp/v2/row-formatting.schema.json",

"commandBarProps": {

"commands": [

{

"key": "uploadTemplate",

"hide": true

},

{

"key": "uploadFolder",

"hide": true

}

]

}

}

Answer 1

Hi @Nanjappa, Ashwini,

Per my test, I could reproduce your issue by using the json formatting twice. I could hide the button when display the code first time.

But after delete the code and apply it again, the code doesn't work any more. And the New button background color changed while there is no code refer to the New button.

Since this issue need to be checked from background, and our forum doesn't have access to the backend currently. The best way to troubleshoot the issue is to report the issue to M365 admin center. The support team there has the correct escalation channel for this case. This is also the most efficient way in handling this kind of issue.

And as a workaround for this issue, you could reference third-party CSS styles in SharePoint Framework Extension/ web parts

Here is a ready-made solution in github

https://github.com/pnp/sp-dev-fx-extensions/tree/main/samples/js-command-hide-commands

---

If the answer is helpful, please click "Accept Answer" and kindly upvote it. If you have extra questions about this answer, please click "Comment".

Note: Please follow the steps in our documentation to enable e-mail notifications if you want to receive the related email notification for this thread.

Answer 2

The IT-department at my workplace asked me this very question, So I started doing a little digging. Doing a little bit of 'inspect element'-ing showed that the key field matches the data-id attribute. The HTML code for the integrate button is:

<button type="button" role="menuitem" class="item_24bde817" data-id="integrate" data-automationid="integrateCommand" ...>

Removing this from the bar is done by entering integrate as key in the JSON you provided. This results in the following:

{
  "key": "integrate",
  "hide": true
},

Looking at the code considering the upload folder button, it showed no sign of the data-id property, just a data-automationid.

<button data-automationid="uploadFolderCommand" class="ms-ContextualMenu-link root-353" aria-posinset="2" aria-setsize="2" aria-disabled="false" role="menuitem" tabindex="-1">

Feeling adventurous, I decided to give this one a go. And low and behold, it disappeared. This resulted in the following JSON

{
  "key": "uploadFolderCommand",
  "hide": true
}

Concluding... Given the code you provided, it should be solved as shown below. Tried this out in our environment and it still works after a night's rest.

{
  "$schema": "https://developer.microsoft.com/json-schemas/sp/v2/row-formatting.schema.json",
  "commandBarProps": {
    "commands": [
      {
        "key": "uploadTemplateCommand",
        "hide": true
      },
      {
        "key": "uploadFolderCommand",
        "hide": true
      }
    ]
  }
}