Skip to content

Commit ecdfffd

Browse files
shagra-msshagra-ms
authored
Command bar customization documentation (SharePoint#7748)
* Add commandBarProps documentation * Fix header and add description
1 parent 6feed2e commit ecdfffd

File tree

6 files changed

+234
-0
lines changed

6 files changed

+234
-0
lines changed

‎docs/declarative-customization/view-board-formatting.md

Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -21,6 +21,11 @@ Optional element. Specifies whether the ability to select cards in the view is d
2121

2222
JSON object that defines the layout of cards. The schema of this JSON object is identical to the schema of a column format (and that of rowFormatter). For details on this schema and its capabilities, see the [Formatting syntax reference](./formatting-syntax-reference.md).
2323

24+
### commandBarProps
25+
26+
Groups the command bar customization options. For details on `commandBarProps`, see [Command bar customization syntax reference](./view-commandbar-formatting.md)
27+
2428
## See also
29+
- [Command bar customization syntax reference](./view-commandbar-formatting.md)
2530
- [Advanced formatting concepts](./formatting-advanced.md)
2631
- [Formatting syntax reference](./formatting-syntax-reference.md)

‎docs/declarative-customization/view-calendar-formatting.md

Lines changed: 17 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,17 @@
1+
---
2+
title: Format calendar view to customize SharePoint
3+
description: Customize calendar views in SharePoint lists and libraries
4+
ms.date: 02/23/2022
5+
ms.localizationpriority: high
6+
---
7+
8+
# Calendar view customizations
9+
10+
## Detailed syntax reference
11+
12+
### commandBarProps
13+
14+
Groups the command bar customization options. For details on `commandBarProps`, see [Command bar customization syntax reference](./view-commandbar-formatting.md)
15+
16+
## See also
17+
- [Command bar customization syntax reference](./view-commandbar-formatting.md)

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

Lines changed: 198 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,198 @@
1+
---
2+
title: Command bar customization syntax reference
3+
description: Command bar customization syntax reference
4+
ms.date: 02/23/2022
5+
ms.localizationpriority: high
6+
---
7+
8+
# Command bar customization syntax reference
9+
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+
12+
## commandBarProps
13+
Properties for Command bar customization. Valid in all types of layouts.
14+
15+
## commands
16+
Array of JSON objects to specify the commands for customization.
17+
18+
## key
19+
Mandatory property to uniquely identify a command in the Command bar. Valid keys include:
20+
21+
```javascript
22+
'new'
23+
'newFolder'
24+
'newWordDocument'
25+
'newExcelWorkbook'
26+
'newPowerPointPresentation'
27+
'newOneNoteNotebook'
28+
'newFormsForExcel'
29+
'newVisioDrawing'
30+
'upload'
31+
'uploadFile'
32+
'uploadFolder'
33+
'open'
34+
'share'
35+
'copyLink'
36+
'download'
37+
'rename'
38+
'copyTo'
39+
'moveTo'
40+
'delete'
41+
'edit'
42+
'comment'
43+
'editNewMenu'
44+
'powerBI'
45+
'powerBIVisualizeList'
46+
'automate'
47+
'automateCreateRule'
48+
'automateManageRules'
49+
'powerAutomate'
50+
'powerAutomateCreateFlow'
51+
'powerAutomateSeeFlows'
52+
'powerAutomateConfigureFlows'
53+
'aiBuilderCreate'
54+
'aiBuilderGoto'
55+
'aiBuilder'
56+
'alertMe'
57+
'newLink'
58+
'integrate'
59+
'manageAlert'
60+
'powerApps'
61+
'powerAppsCreateApp'
62+
'powerAppsSeeAllApps'
63+
'powerAppsCustomizeForms'
64+
'viewDocumentUnderstandingModels'
65+
'versionHistory'
66+
'openInImmersiveReader'
67+
'classifyAndExtract'
68+
'checkOut'
69+
'checkIn'
70+
'undoCheckOut'
71+
'properties'
72+
'pinItem'
73+
'exportExcel'
74+
'exportCSV'
75+
'export'
76+
'editInGridView'
77+
'sync'
78+
'uploadTemplate'
79+
'addTemplate'
80+
'openInOfficeOnline'
81+
'openInOfficeClient'
82+
'addShortcut'
83+
'pinToQuickAccess'
84+
'unpinFromQuickAccess'
85+
```
86+
87+
## hide
88+
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.
89+
90+
## text
91+
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.
92+
93+
## title
94+
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.
95+
96+
## iconName
97+
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.
98+
99+
## primary
100+
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.
101+
102+
The following example shows a sample Command bar formatting JSON to do the following:
103+
- Hide the 'New' command,.
104+
- Update the text and icon of 'Edit in grid view' command and add primary button styling to it.
105+
- Remove the icon from 'Share' command and update the tooltip text of it.
106+
107+
```JSON
108+
{
109+
"commandBarProps" : {
110+
"commands": [
111+
{
112+
"key": "new",
113+
"hide": true
114+
},
115+
{
116+
"key": "editInGridView",
117+
"text": "Quick edit",
118+
"iconName": "EditTable",
119+
"primary": true
120+
},
121+
{
122+
"key": "share",
123+
"iconName": "",
124+
"title": "Share this List"
125+
}
126+
]
127+
}
128+
}
129+
```
130+
131+
## position
132+
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.
133+
134+
## sectionType
135+
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:
136+
- Primary
137+
- Overflow
138+
139+
The following example shows a sample Command bar formatting JSON to do the following:
140+
- Puts the 'New' command at the third position in the primary section of the Command bar.
141+
- Puts the 'Share' command at the second position in the overflow menu of the Command bar.
142+
- Puts the 'Alert me' command at the fourth position in the primary section of theCommand bar.
143+
144+
```JSON
145+
{
146+
"commandBarProps" : {
147+
"commands": [
148+
{
149+
"key": "new",
150+
"position": 2
151+
},
152+
{
153+
"key": "share",
154+
"position": 1,
155+
"sectionType": "Overflow"
156+
},
157+
{
158+
"key": "alertMe",
159+
"position": 3,
160+
"sectionType": "Primary"
161+
}
162+
]
163+
}
164+
}
165+
```
166+
167+
## selectionModes
168+
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:
169+
- NoSelection
170+
- SingleSelection
171+
- MultiSelection
172+
173+
The following example shows a sample Command bar formatting JSON to do the following:
174+
- Update the text of 'Share' command if the selected item has 'NumberField' column value 3
175+
- Update the text of 'Delete' command only if multiple items are selected.
176+
177+
```JSON
178+
{
179+
"commandBarProps": {
180+
"commands": [
181+
{
182+
"key": "share",
183+
"selectionModes": [
184+
"SingleSelection"
185+
],
186+
"text": "=if([$NumberField] == 3, 'Share item 3', 'Share')"
187+
},
188+
{
189+
"key": "delete",
190+
"selectionModes": [
191+
"MultiSelection"
192+
],
193+
"text": "Delete multiple items"
194+
}
195+
]
196+
}
197+
}
198+
```

‎docs/declarative-customization/view-gallery-formatting.md

Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -355,7 +355,12 @@ JSON object that defines the layout of cards. The schema of this JSON object is
355355

356356
Groups the group related customization options. For details on `groupProps`, see [Group Customization syntax reference](./view-group-formatting.md)
357357

358+
### commandBarProps
359+
360+
Groups the command bar customization options. For details on `commandBarProps`, see [Command bar customization syntax reference](./view-commandbar-formatting.md)
361+
358362
## See also
359363
- [Group customization syntax reference](./view-group-formatting.md)
364+
- [Command bar customization syntax reference](./view-commandbar-formatting.md)
360365
- [Advanced formatting concepts](./formatting-advanced.md)
361366
- [Formatting syntax reference](./formatting-syntax-reference.md)

‎docs/declarative-customization/view-list-formatting.md

Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -463,7 +463,12 @@ Optional element. Specifies whether the column headers in the view are hidden or
463463

464464
Groups the group related customization options. For details on `groupProps`, see [Group Customization syntax reference](./view-group-formatting.md)
465465

466+
### commandBarProps
467+
468+
Groups the command bar customization options. For details on `commandBarProps`, see [Command bar customization syntax reference](./view-commandbar-formatting.md)
469+
466470
## See also
467471
- [Group customization syntax reference](./view-group-formatting.md)
472+
- [Command bar customization syntax reference](./view-commandbar-formatting.md)
468473
- [Advanced formatting concepts](./formatting-advanced.md)
469474
- [Formatting syntax reference](./formatting-syntax-reference.md)

‎docs/toc.yml

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -93,8 +93,12 @@
9393
href: declarative-customization/view-gallery-formatting.md
9494
- name: Board view customization
9595
href: declarative-customization/view-board-formatting.md
96+
- name: Calendar view customization
97+
href: declarative-customization/view-calendar-formatting.md
9698
- name: Group customization syntax reference
9799
href: declarative-customization/view-group-formatting.md
100+
- name: Command bar customization syntax reference
101+
href: declarative-customization/view-commandbar-formatting.md
98102
- name: Forms configuration
99103
items:
100104
- name: Show or hide columns in a form

0 commit comments

Comments
 (0)