From 97777e4f063fed91b6cc53e8f26860e649d90316 Mon Sep 17 00:00:00 2001 From: tpodugu-ms <104753350+tpodugu-ms@users.noreply.github.com> Date: Thu, 13 Mar 2025 13:33:08 +0000 Subject: [PATCH 1/3] Updated keys for command bar customization. --- .../view-commandbar-formatting.md | 12 ++++++++++++ 1 file changed, 12 insertions(+) diff --git a/docs/declarative-customization/view-commandbar-formatting.md b/docs/declarative-customization/view-commandbar-formatting.md index 3742da8cd..5c655f1f5 100644 --- a/docs/declarative-customization/view-commandbar-formatting.md +++ b/docs/declarative-customization/view-commandbar-formatting.md @@ -86,6 +86,18 @@ Mandatory property to uniquely identify a command in the Command bar. Valid keys 'manageForms' ``` +## 🚀 Recent updates to `commandBarCustomization` Keys + +> Some keys in the commandBarCustomization schema have been updated. To ensure your custom formatter works correctly, update your existing JSON with these new keys. + +```javascript +'new' (Dropdown) → 'newComposite' +'upload' -> 'uploadCommand' +'sync' → 'syncCommand' +'addShortcut' → 'addShortcutToOneDriveCommand' +'pinToQuickAccess' → 'PinToQuickAccessCommand' +``` + ## hide 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. From 15689fa1cc18214c692eb9eaddac67f8af2b7cc2 Mon Sep 17 00:00:00 2001 From: Andrew Connell Date: Fri, 14 Mar 2025 05:25:50 -0400 Subject: [PATCH 2/3] markdown & formatting updates --- .../view-commandbar-formatting.md | 48 ++++++++++++------- 1 file changed, 32 insertions(+), 16 deletions(-) diff --git a/docs/declarative-customization/view-commandbar-formatting.md b/docs/declarative-customization/view-commandbar-formatting.md index 5c655f1f5..a4366d608 100644 --- a/docs/declarative-customization/view-commandbar-formatting.md +++ b/docs/declarative-customization/view-commandbar-formatting.md @@ -1,7 +1,7 @@ --- title: Command bar customization syntax reference description: Command bar customization syntax reference -ms.date: 08/12/2022 +ms.date: 03/14/2025 ms.localizationpriority: high --- @@ -10,12 +10,15 @@ ms.localizationpriority: high 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. ## commandBarProps + Properties for Command bar customization. Valid in all types of layouts. ## commands -Array of JSON objects to specify the commands for customization. + +An array of JSON objects is used to specify the commands for customization. ## key + Mandatory property to uniquely identify a command in the Command bar. Valid keys include: ```javascript @@ -88,33 +91,40 @@ Mandatory property to uniquely identify a command in the Command bar. Valid keys ## 🚀 Recent updates to `commandBarCustomization` Keys -> Some keys in the commandBarCustomization schema have been updated. To ensure your custom formatter works correctly, update your existing JSON with these new keys. - -```javascript -'new' (Dropdown) → 'newComposite' -'upload' -> 'uploadCommand' -'sync' → 'syncCommand' -'addShortcut' → 'addShortcutToOneDriveCommand' -'pinToQuickAccess' → 'PinToQuickAccessCommand' -``` +> [NOTE!] +> Some keys in the `commandBarCustomization` schema have been updated. To ensure your custom formatter works correctly, update your existing JSON with these new keys. +> +> | Original Key | Current Key | +> |--------------|-------------| +> | 'new' | 'newComposite' | +> | 'upload' | 'uploadCommand' | +> | 'sync' | 'syncCommand' | +> | 'addShortcut'| 'addShortcutToOneDriveCommand' | +> | 'pinToQuickAccess' | 'PinToQuickAccessCommand' | ## hide + 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. ## text -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. + +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. ## title -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. + +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. ## iconName -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. + +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. ## primary + 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. The following example shows a sample Command bar formatting JSON to do the following: -- Hide the 'New' command,. + +- Hide the 'New' command. - Update the text and icon of 'Edit in grid view' command and add primary button styling to it. - Remove the icon from 'Share' command and update the tooltip text of it. @@ -143,17 +153,20 @@ The following example shows a sample Command bar formatting JSON to do the follo ``` ## position + 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. ## sectionType + 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: + - Primary - Overflow The following example shows a sample Command bar formatting JSON to do the following: - Puts the 'New' command at the third position in the primary section of the Command bar. - Puts the 'Share' command at the second position in the overflow menu of the Command bar. -- Puts the 'Alert me' command at the fourth position in the primary section of theCommand bar. +- Puts the 'Alert me' command at the fourth position in the primary section of the Command bar. ```JSON { @@ -179,12 +192,15 @@ The following example shows a sample Command bar formatting JSON to do the follo ``` ## selectionModes + 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: + - NoSelection - SingleSelection - MultiSelection The following example shows a sample Command bar formatting JSON to do the following: + - Update the text of 'Share' command if the selected item has 'NumberField' column value 3 - Update the text of 'Delete' command only if multiple items are selected. From c93b2a36d30af4e2315905a14112883e9fa1fb61 Mon Sep 17 00:00:00 2001 From: Andrew Connell Date: Fri, 14 Mar 2025 05:26:48 -0400 Subject: [PATCH 3/3] fix inline code formatting --- .../view-commandbar-formatting.md | 10 +++++----- 1 file changed, 5 insertions(+), 5 deletions(-) diff --git a/docs/declarative-customization/view-commandbar-formatting.md b/docs/declarative-customization/view-commandbar-formatting.md index a4366d608..1cd0b5675 100644 --- a/docs/declarative-customization/view-commandbar-formatting.md +++ b/docs/declarative-customization/view-commandbar-formatting.md @@ -96,11 +96,11 @@ Mandatory property to uniquely identify a command in the Command bar. Valid keys > > | Original Key | Current Key | > |--------------|-------------| -> | 'new' | 'newComposite' | -> | 'upload' | 'uploadCommand' | -> | 'sync' | 'syncCommand' | -> | 'addShortcut'| 'addShortcutToOneDriveCommand' | -> | 'pinToQuickAccess' | 'PinToQuickAccessCommand' | +> | `new` | `newComposite` | +> | `upload` | `uploadCommand` | +> | `sync` | `syncCommand` | +> | `addShortcut`| `addShortcutToOneDriveCommand` | +> | `pinToQuickAccess` | `PinToQuickAccessCommand` | ## hide