@WonderLaura – Laura Rogers

In this blog post, you’ll learn how to customize the SharePoint command bar, which is the toolbar that appears at the top of lists and libraries. This is a new feature that allows you to use JSON code to change, edit and hide the out-of-the-box commands, such as new, share, edit, delete, etc. You can also use different settings and options for each command, such as text, icon, position, section, primary, selection mode, and custom logic. I will show you some examples of how to do this in a Power Hour session that I hosted with Joelle Jobson.

The first thing you need to know is where to find the documentation and the sample codes for the command bar customization.

Microsoft: Command bar customization syntax reference

Microsoft: Icon reference for buttons

You can copy and paste the sample codes, which are great for inspiration, and modify them according to your needs. Optionally select different icons that you can use for the commands.

SharePoint Command Bar Customization Steps

1. Go to any list or library in SharePoint.

2. Click the name of the view, and choose Format current view.

3. Click advanced mode.

This is where you can paste the JSON code and preview the changes. You can also save the changes and apply them to your view.

For example here is the code that will hide the new button and the forms button, and change the grid view button to primary.

{
  "$schema": "https://developer.microsoft.com/json-schemas/sp/v2/row-formatting.schema.json",
  "commandBarProps": {
    "commands": [
      {
        "key": "new",
        "hide": true
      },
      {
        "key": "manageForms",
        "hide": true
      },
      {
        "key": "editInGridView",
        "text": "Quick edit",
        "iconName": "EditTable",
        "primary": true
      }
    ]
  }
}

4. Notice the toolbar at the top now when I preview the code. Click SAVE on the right panel.

This is a view setting, so if you have multiple views to create on your list or library, I recommend setting this up on the default view first, then SAVE AS to save each new view, so that they already have the custom command bar. There are also different commands that apply to libraries, such as the ability to hide the download button.

In this video, I demonstrated all of the functionality of what you can do with your SharePoint command bar. Note that when I recorded this in May, there was not a command listed for the Forms button, but since then it has been added. manageForms.

• Hide and show them
• Change the text on them
• Change the hover text
• Reorder them
• Change or hide icons
• Set a button as primary
• Change the buttons that show when a specific item is selected, or multiple

Check out my online, on-demand SharePoint training classes here at my training company, IW Mentor!

SharePoint Training Courses