Skip to content

Commit d3ad3be

Browse files
Updated keys for command bar customization. (#10152)
* Updated keys for command bar customization. * markdown & formatting updates * fix inline code formatting --------- Co-authored-by: Andrew Connell <[email protected]>
1 parent 66b32e9 commit d3ad3be

File tree

1 file changed

+35
-7
lines changed

1 file changed

+35
-7
lines changed

docs/declarative-customization/view-commandbar-formatting.md

+35-7
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,7 @@
11
---
22
title: Command bar customization syntax reference
33
description: Command bar customization syntax reference
4-
ms.date: 08/12/2022
4+
ms.date: 03/14/2025
55
ms.localizationpriority: high
66
---
77

@@ -10,12 +10,15 @@ ms.localizationpriority: high
1010
Command bar customization helps personalize a list to suit specific requirements. The JSON based feature allows basic changes to the command bar, including modification of icon and/or text, hiding existing options or repositioning commands.
1111

1212
## commandBarProps
13+
1314
Properties for Command bar customization. Valid in all types of layouts.
1415

1516
## commands
16-
Array of JSON objects to specify the commands for customization.
17+
18+
An array of JSON objects is used to specify the commands for customization.
1719

1820
## key
21+
1922
Mandatory property to uniquely identify a command in the Command bar. Valid keys include:
2023

2124
```javascript
@@ -86,23 +89,42 @@ Mandatory property to uniquely identify a command in the Command bar. Valid keys
8689
'manageForms'
8790
```
8891

92+
## 🚀 Recent updates to `commandBarCustomization` Keys
93+
94+
> [NOTE!]
95+
> Some keys in the `commandBarCustomization` schema have been updated. To ensure your custom formatter works correctly, update your existing JSON with these new keys.
96+
>
97+
> | Original Key | Current Key |
98+
> |--------------|-------------|
99+
> | `new` | `newComposite` |
100+
> | `upload` | `uploadCommand` |
101+
> | `sync` | `syncCommand` |
102+
> | `addShortcut`| `addShortcutToOneDriveCommand` |
103+
> | `pinToQuickAccess` | `PinToQuickAccessCommand` |
104+
89105
## hide
106+
90107
An optional property that specifies the condition to hide a particular command. The value of this property can either be a boolean, string or an Expression object. `false` is the default behavior (meaning the command is visible). `true` means that the command will be hidden.
91108

92109
## text
93-
An optional property that specifies the text to be displayed as the name of the command. The value of this property can either be a string or an Expression object. If the value is not provided then the default name of the command will be shown.
110+
111+
An optional property that specifies the text to be displayed as the name of the command. The value of this property can either be a string or an Expression object. If the value is not provided, then the default name of the command will be shown.
94112

95113
## title
96-
An optional property that specifies the tooltip text to be displayed in the command. The value of this property can either be a string or an Expression object. If the value is not provided then the default tooltip of the command will be shown.
114+
115+
An optional property that specifies the tooltip text to be displayed in the command. The value of this property can either be a string or an Expression object. If the value is not provided, then the default tooltip of the command will be shown.
97116

98117
## iconName
99-
An optional property that specifies the [Fluent UI](https://developer.microsoft.com/fluentui#/) icon to be displayed in the command. The value of this property can either be a string or an Expression object. If the value is not provided then the default icon of the command will be shown.
118+
119+
An optional property that specifies the [Fluent UI](https://developer.microsoft.com/fluentui#/) icon to be displayed in the command. The value of this property can either be a string or an Expression object. If the value is not provided, then the default icon of the command will be shown.
100120

101121
## primary
122+
102123
An optional property that specifies the condition to apply primary button styling to a command. The value of this property can either be a boolean, string or an Expression object. `false` is the default behavior (meaning the default style will be applied). `true` means the primary button styling will be applied to the command only if the command is placed at the 0th position in the command bar.
103124

104125
The following example shows a sample Command bar formatting JSON to do the following:
105-
- Hide the 'New' command,.
126+
127+
- Hide the 'New' command.
106128
- Update the text and icon of 'Edit in grid view' command and add primary button styling to it.
107129
- Remove the icon from 'Share' command and update the tooltip text of it.
108130

@@ -131,17 +153,20 @@ The following example shows a sample Command bar formatting JSON to do the follo
131153
```
132154

133155
## position
156+
134157
An optional property that specifies the position where the command will be placed in the command bar. The value of this property can either be a number, string or an Expression object. If the value is not provided then the command will be placed in it's default position. This property follows zero-based indexing.
135158

136159
## sectionType
160+
137161
An optional property that specifies the section where the customized command will be placed in the command bar. The following strings are valid values for this property:
162+
138163
- Primary
139164
- Overflow
140165

141166
The following example shows a sample Command bar formatting JSON to do the following:
142167
- Puts the 'New' command at the third position in the primary section of the Command bar.
143168
- Puts the 'Share' command at the second position in the overflow menu of the Command bar.
144-
- Puts the 'Alert me' command at the fourth position in the primary section of theCommand bar.
169+
- Puts the 'Alert me' command at the fourth position in the primary section of the Command bar.
145170

146171
```JSON
147172
{
@@ -167,12 +192,15 @@ The following example shows a sample Command bar formatting JSON to do the follo
167192
```
168193

169194
## selectionModes
195+
170196
An optional property that specifies the selection modes in which the command customization will be applied. If the value is not provided then the customization will be applied in all the selection modes in which the command is available. The value of this property can be array of strings where the following strings are allowed:
197+
171198
- NoSelection
172199
- SingleSelection
173200
- MultiSelection
174201

175202
The following example shows a sample Command bar formatting JSON to do the following:
203+
176204
- Update the text of 'Share' command if the selected item has 'NumberField' column value 3
177205
- Update the text of 'Delete' command only if multiple items are selected.
178206

0 commit comments

Comments
 (0)