How to Customise SharePoint List Toolbar Buttons With List Formatting

I was working with a client on customising a SharePoint list view. In the list command bar, we have standard buttons like New, Edit, Share, and Copy link. The client wanted to make some changes to these buttons, such as renaming the Edit button to Update Item, hiding the Share button so users can’t click it, and showing buttons only when certain conditions are met.

In this article, I’ll explain how to customise the SharePoint list command bar using list formatting with simple examples.

Modify SharePoint List Command Bar Buttons With List Formatting

Before we look at examples of how to customise the SharePoint list command bar buttons, let’s first understand the command bar buttons and which properties we can modify.

In a SharePoint list, the command bar is the row of buttons you see at the top of a list or document library, such as “Add new item”, “Edit in grid view”, “Undo”, “Share”, “Copy link”, etc.

Each command bar button is identified by a unique key. When we write JSON formatting, we use these keys to customise the buttons, such as hiding them, changing their names, or moving them to another position. Below, you can see some of the keys:

'new'
'newFolder'
'newWordDocument'
'newExcelWorkbook'
'newPowerPointPresentation'
'newOneNoteNotebook'
'newFormsForExcel'
'newVisioDrawing'
'upload'
'uploadFile'
'uploadFolder'
'open'
'share'
'copyLink'
'download'
'rename'
'copyTo'
'moveTo'
'delete'
'edit'
'comment'
'editNewMenu'
'powerBI'
'powerBIVisualizeList'
'automate'
'automateCreateRule'
'automateManageRules'
'powerAutomate'
'powerAutomateCreateFlow'
'powerAutomateSeeFlows'
'powerAutomateConfigureFlows'
'aiBuilderCreate'
'aiBuilderGoto'
'aiBuilder'
'alertMe'
'newLink'
'integrate'
'manageAlert'
'powerApps'
'powerAppsCreateApp'
'powerAppsSeeAllApps'
'powerAppsCustomizeForms'
'viewDocumentUnderstandingModels'
'versionHistory'
'openInImmersiveReader'
'classifyAndExtract'
'checkOut'
'checkIn'
'undoCheckOut'
'properties'
'pinItem'
'exportExcel'
'exportCSV'
'export'
'editInGridView'
'exitGridView'
'sync'
'uploadTemplate'
'addTemplate'
'openInOfficeOnline'
'openInOfficeClient'
'addShortcut'
'pinToQuickAccess'
'unpinFromQuickAccess'
'manageForms'
'favoriteCommand'
'createCopilot'

Follow for more details. Here are some common properties that we can use in the JSON formatting:

Now, let’s see some examples of modifying the SharePoint list command bar buttons.

Example 1: Rename the SharePoint List Command Bar Buttons

In this example, we will see how to rename the “Edit” button to “Update item” in the SharePoint list command bar using JSON.

{
  "commandBarProps": {
    "commands": [
      {
        "key": "edit",
        "text": "Update Item",
        "title": "Open this item to update details"
      }
    ]
  }
}

Here:

• commandBarProps = The properties for command bar customisation.
• commands = This is an array of JSON objects that is used to specify the commands for customisation. This object contains the following properties:
  • key = It identifies the command bar button.
  • text = Used to change the name of the button.
  • title = Tool tip for that button.

1. Open the SharePoint list ->Click on the All Items list view ->Click on Format current view.

2. Click Advanced mode. Then, you’ll see the pane below. Replace the code above with the default code, then click the Save button.

3. In the image below, you can see the “Edit” button in the command bar before and after adding the JSON code. After customising, you can see the button name has changed, and a tooltip appears when I hover over it.

Let’s see another example.

Example 2: Hide the SharePoint List Command Bar Button

In this example, we will see how to hide the “Share” button in the SharePoint list command bar. Add the code below in the format view of the SharePoint list, as I showed in the example above.

{
  "commandBarProps": {
    "commands": [
      {
        "key": "share",
        "hide": true
       }
    ]
  }
}

Here:

• “key”: “share” = We access the Share button by providing its unique key name in the “key” property.
• “hide”: true = For the hide property, I gave a boolean value true, so it is hiding the Share button.

This way, we can hide any command bar button by simply providing its key name in the code above.

Example 3: Conditionally Hide the SharePoint List Command Bar Button

In this example, I hide the “Delete” button in the SharePoint list command bar if the “Task Status” field is not set to “Pending.” Add the code below in the list format view.

{
  "commandBarProps": {
    "commands": [
      {
        "key": "delete",
        "hide": "=if([$TaskStatus] != 'Pending', true, false)"
      }
    ]
  }
}

Here:

• “key”: “delete” = Access the delete button.
• “hide”: “=if([$TaskStatus] != ‘Pending’, true, false)” = if the task status field value is ‘Pending’, then only the ‘Delete’ button will be visible, otherwise it won’t.

In the image below, I selected an item where the task status field value is “Pending”, so the “Delete” button is visible.

Here, I selected an item where the task status field value is “Completed”, so the “Delete” button is hidden.

In this way, you can hide any command bar buttons based on conditions. Let’s see another example.

Example 4: Replace the SharePoint List Command Bar Button Icon with a New Icon

To replace the existing list command bar button icon with a new icon, add the code below in the SharePoint list format view.

{
  "commandBarProps": {
    "commands": [
      {
        "key": "editInGridView",
        "iconName": "EditTable"
      }
    ]
  }
}

• “key”: “editInGridView” = Accessing the Edit in grid view button.
• “iconName”: “EditTable” = Added new icon.

In the example below, you can see that the “Edit in grid view” button icon has changed after adding the above code.

Based on your requirements, you can easily change the button icons. This also applies to SharePoint document libraries and Microsoft lists.

Example 5: Change the Position of the Command Bar Buttons in SharePoint List View

In this example, I have changed the positions of the “Share” and “Copy link” buttons in the SharePoint list command view. To achieve this, add the code below in the list format view.

{
  "commandBarProps": {
    "commands": [
      {
        "key": "copyLink",
        "position": 1
      },
      {
        "key": "share",
        "position": 2
      }
    ]
  }
}

• “key”: “copyLink”, “key”: “share” =We accessed the copy link and share buttons.
• position = Need to pass the position number. In the above, I took 1,2, so those buttons came in 1st and 2nd place; here, the positions start from 0.

This way, you can change the positions of the command bar buttons to whichever position you want to keep.

Example 6: Rename Command Bar Buttons Based on Selection Type [Using selectionModes]

In this example, we’ll see how to rename command bar buttons based on the selection of items in a SharePoint list.

The code below changes the “Download” button name to “Download item” when a single item is selected in the list. At the same time, the “Delete” button name will change to “Delete items” when multiple items are selected in the list.

{
  "commandBarProps": {
    "commands": [
      {
        "key": "download",
        "selectionModes": ["SingleSelection"],
        "text": "Download item"
      },
      {
        "key": "delete",
        "selectionModes": ["MultiSelection"],
        "text": "Delete items"
      }
    ]
  }
}

• “selectionModes”: [“SingleSelection”] = Display the “Download item” title when a single item is selected in the list.
• “selectionModes”: [“MultiSelection”]= Display the “Delete items” title when multiple items are selected in the list.

1. The image below shows the list format view before adding the JSON code, where the names of the “Delete” and “Download” buttons remain unchanged, even though I selected items.

2. After adding the JSON code, when I select multiple items, the “Delete” button name changes to “Delete items.” “Download” button remains unchanged.

3. When I select a single item, the “Download” button name changes to “Download item.”

This way, based on the selection of items, we can easily change the names of the command bar buttons.

Example 7: Move SharePoint List Command Bar Buttons Between Main and Overflow Sections

In the SharePoint list command bar, you might see some buttons like Add new item, Share, Copy link, etc, that are directly visible in the command bar. In contrast, when we click that, more options (…), then some other buttons, will be visible in the overflow section.

Now, in this example, we’ll see how to move the buttons from the overflow section to the main section and vice versa.

"commandBarProps": {
    "commands": [
      {
        "key": "alertMe",
        "sectionType": "Primary"
      },
      {
        "key": "share",
        "sectionType": "Overflow"
      }
    ]
  }

• “sectionType”: “Primary” = This indicates the main section in the sharePoint list view. Here, we added the “Alert me” button to the main section.
• “sectionType”: “Overflow” = This indicates the overflow section. Here, we added the “Share” button to the overflow section.

In the image below, you can see that, at first, the “Share” button was present in the main section and the “Alert me” button was present in the overflow section. Once I added the JSON code, both got replaced in the sections.

This way, we can easily move the buttons in the command bar between the primary and overflow sections.

I hope you found this article helpful!, In this article, I have explained how to customise the SharePoint list command bar buttons; this is also applicable to SharePoint document libraries and Microsoft lists.

Follow this article if you are planning to customise the command bar buttons based on your requirements. Do let me know if you have any doubts.

Also, you may like:

• Extract Email from SharePoint Person or Group Field using JSON
• Display Current User Name in SPFx Client Side Web Part
• Replace String in JSON using Power Automate
• SharePoint List View Formatting by JSON Using Lookup Value
• Customize SharePoint List Form Layout using JSON Code
• Create a Custom ID Column in SharePoint List using JSON

Bijay Kumar

After working for more than 18 years in Microsoft technologies like SharePoint, Microsoft 365, and Power Platform (Power Apps, Power Automate, and Power BI), I thought will share my SharePoint expertise knowledge with the world. Our audiences are from the United States, Canada, the United Kingdom, Australia, New Zealand, etc. For my expertise knowledge and SharePoint tutorials, Microsoft has been awarded a Microsoft SharePoint MVP (12 times). I have also worked in companies like HP, TCS, KPIT, etc.