You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
Copy file name to clipboardexpand all lines: docs/declarative-customization/view-commandbar-formatting.md
+35-7
Original file line number
Diff line number
Diff line change
@@ -1,7 +1,7 @@
1
1
---
2
2
title: Command bar customization syntax reference
3
3
description: Command bar customization syntax reference
4
-
ms.date: 08/12/2022
4
+
ms.date: 03/14/2025
5
5
ms.localizationpriority: high
6
6
---
7
7
@@ -10,12 +10,15 @@ ms.localizationpriority: high
10
10
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.
11
11
12
12
## commandBarProps
13
+
13
14
Properties for Command bar customization. Valid in all types of layouts.
14
15
15
16
## 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.
17
19
18
20
## key
21
+
19
22
Mandatory property to uniquely identify a command in the Command bar. Valid keys include:
20
23
21
24
```javascript
@@ -86,23 +89,42 @@ Mandatory property to uniquely identify a command in the Command bar. Valid keys
86
89
'manageForms'
87
90
```
88
91
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
+
89
105
## hide
106
+
90
107
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.
91
108
92
109
## 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.
94
112
95
113
## 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.
97
116
98
117
## 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.
100
120
101
121
## primary
122
+
102
123
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.
103
124
104
125
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.
106
128
- Update the text and icon of 'Edit in grid view' command and add primary button styling to it.
107
129
- Remove the icon from 'Share' command and update the tooltip text of it.
108
130
@@ -131,17 +153,20 @@ The following example shows a sample Command bar formatting JSON to do the follo
131
153
```
132
154
133
155
## position
156
+
134
157
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.
135
158
136
159
## sectionType
160
+
137
161
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
+
138
163
- Primary
139
164
- Overflow
140
165
141
166
The following example shows a sample Command bar formatting JSON to do the following:
142
167
- Puts the 'New' command at the third position in the primary section of the Command bar.
143
168
- 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.
145
170
146
171
```JSON
147
172
{
@@ -167,12 +192,15 @@ The following example shows a sample Command bar formatting JSON to do the follo
167
192
```
168
193
169
194
## selectionModes
195
+
170
196
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
+
171
198
- NoSelection
172
199
- SingleSelection
173
200
- MultiSelection
174
201
175
202
The following example shows a sample Command bar formatting JSON to do the following:
203
+
176
204
- Update the text of 'Share' command if the selected item has 'NumberField' column value 3
177
205
- Update the text of 'Delete' command only if multiple items are selected.
0 commit comments