Merge pull request #1889 from a1mery/react-command-task-mgmt

New sample: React command task management

Author: hugoabernier

samples/react-command-task-mgmt/.gitignore

@@ -0,0 +1,37 @@
+# Logs
+logs
+*.log
+npm-debug.log*
+
+# Dependency directories
+node_modules
+
+# Build generated files
+dist
+lib
+lib-dts
+lib-commonjs
+lib-esm
+jest-output
+release
+solution
+temp
+*.sppkg
+.heft
+
+# Coverage directory used by tools like istanbul
+coverage
+
+# OSX
+.DS_Store
+
+# Visual Studio files
+.ntvs_analysis.dat
+.vs
+bin
+obj
+
+# Resx Generated Code
+*.resx.ts
+
+.instructions

samples/react-command-task-mgmt/.npmignore

@@ -0,0 +1,27 @@
+# Ignore everything by default
+**
+
+# Use negative patterns to bring back the specific things we want to publish
+!/bin/**
+!/dist/**
+!/EULA/**
+!/lib/**
+!/lib-*/**
+!ThirdPartyNotice.txt
+
+# Ignore certain files in the above folders
+/dist/*.stats.*
+/dist/**/*.map
+/lib/**/*.map
+/lib/**/*.test.*
+/lib/**/test/**
+/lib-*/**/*.map
+/lib-*/**/*.test.*
+/lib-*/**/test/**
+
+# NOTE: These don't need to be specified, because NPM includes them automatically.
+#
+# package.json
+# README (and its variants)
+# CHANGELOG (and its variants)
+# LICENSE / LICENCE

samples/react-command-task-mgmt/.nvmrc

@@ -0,0 +1 @@
+v22.14.0

samples/react-command-task-mgmt/.spfx-scaffold.jsonl

@@ -0,0 +1,52 @@
+{"timestamp":"2026-05-29T20:57:27.917Z","kind":"session-started","cliVersion":"0.1.0-pre.3"}
+{"timestamp":"2026-05-29T20:57:28.481Z","kind":"template-rendered","templateName":"extension-listviewcommandset","templateVersion":"1.0.0","spfxVersion":"1.22.2","context":{"solution_name":"react-command-task-mgmt","libraryName":"react-command-task-mgmt","spfxVersion":"1.22.2","spfxVersionForBadgeUrl":"1.22.2","componentId":"0dd1fb3d-e3e3-47ad-b218-a0a5e275f7b1","featureId":"d13bddb9-911f-4767-9e43-b16cd7bb92f9","solutionId":"71f9db24-0d1d-4659-a232-abc9ad718491","componentAlias":"Approve action","componentName":"Approve action","componentDescription":"Approve action description"},"cliVersion":"0.1.0-pre.3"}
+{"timestamp":"2026-05-29T20:57:28.485Z","kind":"file-write","relativePath":".eslintrc.js","outcome":"new"}
+{"timestamp":"2026-05-29T20:57:28.485Z","kind":"file-write","relativePath":".gitignore","outcome":"new"}
+{"timestamp":"2026-05-29T20:57:28.485Z","kind":"file-write","relativePath":".npmignore","outcome":"new"}
+{"timestamp":"2026-05-29T20:57:28.485Z","kind":"file-write","relativePath":".vscode/launch.json","outcome":"new"}
+{"timestamp":"2026-05-29T20:57:28.485Z","kind":"file-write","relativePath":".vscode/settings.json","outcome":"new"}
+{"timestamp":"2026-05-29T20:57:28.485Z","kind":"file-write","relativePath":"README.md","outcome":"new"}
+{"timestamp":"2026-05-29T20:57:28.485Z","kind":"file-write","relativePath":"config/config.json","outcome":"new"}
+{"timestamp":"2026-05-29T20:57:28.485Z","kind":"file-write","relativePath":"config/deploy-azure-storage.json","outcome":"new"}
+{"timestamp":"2026-05-29T20:57:28.486Z","kind":"file-write","relativePath":"config/package-solution.json","outcome":"new"}
+{"timestamp":"2026-05-29T20:57:28.486Z","kind":"file-write","relativePath":"config/rig.json","outcome":"new"}
+{"timestamp":"2026-05-29T20:57:28.486Z","kind":"file-write","relativePath":"config/sass.json","outcome":"new"}
+{"timestamp":"2026-05-29T20:57:28.486Z","kind":"file-write","relativePath":"config/serve.json","outcome":"new"}
+{"timestamp":"2026-05-29T20:57:28.486Z","kind":"file-write","relativePath":"config/typescript.json","outcome":"new"}
+{"timestamp":"2026-05-29T20:57:28.486Z","kind":"file-write","relativePath":"config/write-manifests.json","outcome":"new"}
+{"timestamp":"2026-05-29T20:57:28.486Z","kind":"file-write","relativePath":"package.json","outcome":"new"}
+{"timestamp":"2026-05-29T20:57:28.486Z","kind":"file-write","relativePath":"sharepoint/assets/ClientSideInstance.xml","outcome":"new"}
+{"timestamp":"2026-05-29T20:57:28.486Z","kind":"file-write","relativePath":"sharepoint/assets/elements.xml","outcome":"new"}
+{"timestamp":"2026-05-29T20:57:28.486Z","kind":"file-write","relativePath":"src/extensions/approveActionCommandSet/icons/cancel.svg","outcome":"new"}
+{"timestamp":"2026-05-29T20:57:28.486Z","kind":"file-write","relativePath":"src/extensions/approveActionCommandSet/icons/request.svg","outcome":"new"}
+{"timestamp":"2026-05-29T20:57:28.486Z","kind":"file-write","relativePath":"src/extensions/approveActionCommandSet/loc/en-us.js","outcome":"new"}
+{"timestamp":"2026-05-29T20:57:28.486Z","kind":"file-write","relativePath":"src/extensions/approveActionCommandSet/loc/approveActionCommandSetStrings.d.ts","outcome":"new"}
+{"timestamp":"2026-05-29T20:57:28.486Z","kind":"file-write","relativePath":"src/extensions/approveActionCommandSet/ApproveActionCommandSet.manifest.json","outcome":"new"}
+{"timestamp":"2026-05-29T20:57:28.486Z","kind":"file-write","relativePath":"src/extensions/approveActionCommandSet/ApproveActionCommandSet.ts","outcome":"new"}
+{"timestamp":"2026-05-29T20:57:28.486Z","kind":"file-write","relativePath":"tsconfig.json","outcome":"new"}
+{"timestamp":"2026-05-29T20:57:49.134Z","kind":"session-started","cliVersion":"0.1.0-pre.3"}
+{"timestamp":"2026-05-29T20:57:49.615Z","kind":"template-rendered","templateName":"extension-listviewcommandset","templateVersion":"1.0.0","spfxVersion":"1.22.2","context":{"solution_name":"react-command-task-mgmt","libraryName":"react-command-task-mgmt","spfxVersion":"1.22.2","spfxVersionForBadgeUrl":"1.22.2","componentId":"ce397a58-294d-4237-ac5d-b872562dac33","featureId":"748610e5-eac8-4c98-ac46-37226b1dffe0","solutionId":"fbc40120-151d-4082-8d29-5a39a008ff75","componentAlias":"Reject action","componentName":"Reject action","componentDescription":"Reject action description"},"cliVersion":"0.1.0-pre.3"}
+{"timestamp":"2026-05-29T20:57:49.628Z","kind":"file-write","relativePath":"src/extensions/rejectActionCommandSet/icons/cancel.svg","outcome":"new"}
+{"timestamp":"2026-05-29T20:57:49.629Z","kind":"file-write","relativePath":"src/extensions/rejectActionCommandSet/loc/en-us.js","outcome":"new"}
+{"timestamp":"2026-05-29T20:57:49.629Z","kind":"file-write","relativePath":"src/extensions/rejectActionCommandSet/loc/rejectActionCommandSetStrings.d.ts","outcome":"new"}
+{"timestamp":"2026-05-29T20:57:49.629Z","kind":"file-write","relativePath":"src/extensions/rejectActionCommandSet/RejectActionCommandSet.ts","outcome":"new"}
+{"timestamp":"2026-05-29T20:57:49.629Z","kind":"file-write","relativePath":"src/extensions/rejectActionCommandSet/icons/request.svg","outcome":"new"}
+{"timestamp":"2026-05-29T20:57:49.629Z","kind":"file-write","relativePath":"src/extensions/rejectActionCommandSet/RejectActionCommandSet.manifest.json","outcome":"new"}
+{"timestamp":"2026-05-29T20:57:49.631Z","kind":"file-write","relativePath":".eslintrc.js","outcome":"unchanged"}
+{"timestamp":"2026-05-29T20:57:49.631Z","kind":"file-write","relativePath":".npmignore","outcome":"unchanged"}
+{"timestamp":"2026-05-29T20:57:49.631Z","kind":"file-write","relativePath":".gitignore","outcome":"unchanged"}
+{"timestamp":"2026-05-29T20:57:49.631Z","kind":"file-write","relativePath":".vscode/settings.json","outcome":"unchanged"}
+{"timestamp":"2026-05-29T20:57:49.631Z","kind":"file-write","relativePath":"README.md","outcome":"preserved"}
+{"timestamp":"2026-05-29T20:57:49.635Z","kind":"file-write","relativePath":"config/config.json","outcome":"merged","mergeHelper":"config/config.json"}
+{"timestamp":"2026-05-29T20:57:49.635Z","kind":"file-write","relativePath":".vscode/launch.json","outcome":"unchanged"}
+{"timestamp":"2026-05-29T20:57:49.635Z","kind":"file-write","relativePath":"config/deploy-azure-storage.json","outcome":"preserved"}
+{"timestamp":"2026-05-29T20:57:49.636Z","kind":"file-write","relativePath":"config/package-solution.json","outcome":"merged","mergeHelper":"config/package-solution.json"}
+{"timestamp":"2026-05-29T20:57:49.637Z","kind":"file-write","relativePath":"config/sass.json","outcome":"unchanged"}
+{"timestamp":"2026-05-29T20:57:49.637Z","kind":"file-write","relativePath":"config/rig.json","outcome":"unchanged"}
+{"timestamp":"2026-05-29T20:57:49.638Z","kind":"file-write","relativePath":"config/serve.json","outcome":"merged","mergeHelper":"config/serve.json"}
+{"timestamp":"2026-05-29T20:57:49.638Z","kind":"file-write","relativePath":"config/typescript.json","outcome":"unchanged"}
+{"timestamp":"2026-05-29T20:57:49.638Z","kind":"file-write","relativePath":"config/write-manifests.json","outcome":"unchanged"}
+{"timestamp":"2026-05-29T20:57:49.638Z","kind":"file-write","relativePath":"package.json","outcome":"unchanged"}
+{"timestamp":"2026-05-29T20:57:49.638Z","kind":"file-write","relativePath":"sharepoint/assets/ClientSideInstance.xml","outcome":"preserved"}
+{"timestamp":"2026-05-29T20:57:49.638Z","kind":"file-write","relativePath":"sharepoint/assets/elements.xml","outcome":"preserved"}
+{"timestamp":"2026-05-29T20:57:49.638Z","kind":"file-write","relativePath":"tsconfig.json","outcome":"unchanged"}

samples/react-command-task-mgmt/README.md

@@ -0,0 +1,102 @@
+# Grouped ListView Command Set - Task Management
+
+## Summary
+
+This sample demonstrates the new **Grouping support for ListView Command Sets** introduced in **SPFx 1.23**. It adds a grouped **Status** command (with **Approve** and **Reject** sub-commands) to the SharePoint modern list view toolbar and context menu.
+
+When one or more items are selected, the user can approve or reject the selected items in bulk. The extension updates the `Status` column for every selected item using **PnPjs** and refreshes the list view to surface the new values.
+
+> Use case: Quickly triage a list of requests / tasks directly from the SharePoint list view without opening each item individually.
+
+![Grouped command set in action](./assets/task-management.png)
+
+## Compatibility
+
+![SPFx 1.23.0](https://img.shields.io/badge/SPFx-1.23.0-green.svg)
+![Node.js v22.14+](https://img.shields.io/badge/Node.js-v22.14%2B-green.svg)
+![Compatible with SharePoint Online](https://img.shields.io/badge/SharePoint%20Online-Compatible-green.svg)
+![Does not work with SharePoint 2019](https://img.shields.io/badge/SharePoint%20Server%202019-Incompatible-red.svg "SharePoint Server 2019 requires SPFx 1.4.1 or lower")
+![Does not work with SharePoint 2016 (Feature Pack 2)](https://img.shields.io/badge/SharePoint%20Server%202016%20(Feature%20Pack%202)-Incompatible-red.svg "SharePoint Server 2016 Feature Pack 2 requires SPFx 1.1")
+![Local Workbench Unsupported](https://img.shields.io/badge/Local%20Workbench-Unsupported-red.svg "Local workbench is no longer available as of SPFx 1.13 and above")
+![Hosted Workbench Compatible](https://img.shields.io/badge/Hosted%20Workbench-Compatible-green.svg)
+
+## Applies to
+
+- [SharePoint Framework](https://aka.ms/spfx)
+- [SharePoint Framework Extensions](https://learn.microsoft.com/sharepoint/dev/spfx/extensions/overview-extensions)
+- [Microsoft 365 tenant](https://learn.microsoft.com/sharepoint/dev/spfx/set-up-your-developer-tenant)
+
+> Get your own free development tenant by subscribing to the [Microsoft 365 developer program](http://aka.ms/o365devprogram).
+
+## Prerequisites
+
+- Node.js **v22.14.0** or later (and below v23).
+- A SharePoint list that contains a single-line text or choice column named **`Status`** (the internal name must be `Status`).
+- Permissions to edit items on the target list.
+
+## Contributors
+
+- [Aimery Thomas](https://github.com/a1mery)
+
+## Version history
+
+| Version | Date         | Comments        |
+| ------- | ------------ | --------------- |
+| 1.0     | May 31, 2026 | Initial release |
+
+## Minimal Path to Awesome
+
+- Clone this repository
+- Ensure that you are at the solution folder
+- In the command-line run:
+  - `npm install`
+  - `npm start` (runs `heft start --clean`)
+
+To package the solution for deployment:
+
+- `npm run build` — produces a production `.sppkg` under `sharepoint/solution/`.
+
+Other build commands can be listed using `heft --help`.
+
+### Debug URL for testing
+
+Append the following query string to a modern list page URL (replace the GUID with the value from `GroupingCommandSetCommandSet.manifest.json` if you regenerate it):
+
+```url
+?loadSPFX=true&debugManifestsFile=https://localhost:4321/temp/manifests.js&customActions={"8a3f5c12-1d4e-4b2a-9c8f-3b1e5d6a7f90":{"location":"ClientSideExtension.ListViewCommandSet.CommandBar"}}
+```
+
+## Features
+
+This extension illustrates the following concepts:
+
+- Using the **new SPFx 1.23 manifest** with `"type": "group"` items to declare grouped commands in a `ListViewCommandSet`.
+- Nesting commands under a group with the `"group": "<GROUP_ID>"` property (two levels: group → command).
+- Using **Heft** (Rushstack) as the build engine instead of Gulp.
+
+### How grouping works
+
+The manifest defines:
+
+| Item ID        | Type    | Group          | Purpose                        |
+| -------------- | ------- | -------------- | ------------------------------ |
+| `GROUP_STATUS` | group   | —              | Dropdown header named "Status" |
+| `CMD_APPROVE`  | command | `GROUP_STATUS` | Sets `Status` to `Approved`    |
+| `CMD_REJECT`   | command | `GROUP_STATUS` | Sets `Status` to `Rejected`    |
+
+## References
+
+- [Getting started with SharePoint Framework](https://learn.microsoft.com/sharepoint/dev/spfx/set-up-your-developer-tenant)
+- [Build your first ListView Command Set extension](https://learn.microsoft.com/sharepoint/dev/spfx/extensions/get-started/building-simple-cmdset-with-list-view)
+- [SPFx 1.23 release notes](https://learn.microsoft.com/sharepoint/dev/spfx/release-1.23)
+- [PnPjs documentation](https://pnp.github.io/pnpjs/)
+- [Heft Documentation](https://heft.rushstack.io/)
+- [Microsoft 365 Patterns and Practices](https://aka.ms/m365pnp) - Guidance, tooling, samples and open-source controls for your Microsoft 365 development
+
+## Disclaimer
+
+**THIS CODE IS PROVIDED _AS IS_ WITHOUT WARRANTY OF ANY KIND, EITHER EXPRESS OR IMPLIED, INCLUDING ANY IMPLIED WARRANTIES OF FITNESS FOR A PARTICULAR PURPOSE, MERCHANTABILITY, OR NON-INFRINGEMENT.**
+
+---
+
+<img src="https://m365-visitor-stats.azurewebsites.net/sp-dev-fx-extensions/samples/react-command-task-mgmt" />

samples/react-command-task-mgmt/assets/sample.json

@@ -0,0 +1,59 @@
+[
+  {
+    "name": "pnp-sp-dev-spfx-extensions-react-command-task-mgmt",
+    "source": "pnp",
+    "title": "Grouped ListView Command Set - Task Management",
+    "shortDescription": "This sample demonstrates the new Grouping support for ListView Command Sets introduced in SPFx 1.23. It adds a grouped Status command (with Approve and Reject sub-commands) to the SharePoint modern list view toolbar and context menu.",
+    "url": "https://github.com/pnp/sp-dev-fx-extensions/tree/main/samples/react-command-task-mgmt",
+    "longDescription": [
+      "This sample demonstrates the new Grouping support for ListView Command Sets introduced in SPFx 1.23. It adds a grouped Status command (with Approve and Reject sub-commands) to the SharePoint modern list view toolbar and context menu."
+    ],
+    "creationDateTime": "2026-05-31",
+    "updateDateTime": "2026-05-31",
+    "products": [
+      "SharePoint"
+    ],
+    "metadata": [
+      {
+        "key": "CLIENT-SIDE-DEV",
+        "value": "React"
+      },
+      {
+        "key": "SPFX-VERSION",
+        "value": "1.23.0"
+      }
+    ],
+    "tags": [],
+    "categories": [
+      "SPFX-APPLICATION-EXTENSION"
+    ],
+    "thumbnails": [
+      {
+        "name": "task-management.png",
+        "type": "image",
+        "order": 100,
+        "url": "https://github.com/pnp/sp-dev-fx-extensions/raw/main/samples/react-command-task-mgmt/assets/task-management.png",
+        "alt": "Web Part Preview"
+      }
+    ],
+    "authors": [
+      {
+        "gitHubAccount": "a1mery",
+        "pictureUrl": "https://github.com/a1mery.png",
+        "name": "Aimery Thomas"
+      }
+    ],
+    "references": [
+      {
+        "name": "Overview of SharePoint Framework Extensions",
+        "description": "You can use SharePoint Framework (SPFx) Extensions to extend the SharePoint user experience. With SPFx Extensions, you can customize more facets of the SharePoint experience, including notification areas, toolbars, and list data views. SPFx Extensions are available in all Microsoft 365 subscriptions for production usage.",
+        "url": "https://learn.microsoft.com/sharepoint/dev/spfx/extensions/overview-extensions?WT.mc_id=m365-15741-cxa"
+      },
+      {
+        "name": "Use page placeholders from Application Customizer",
+        "description": "Application Customizers provide access to well-known locations on SharePoint pages that you can modify based on your business and functional requirements. For example, you can create dynamic header and footer experiences that render across all the pages in SharePoint Online.",
+        "url": "https://learn.microsoft.com/sharepoint/dev/spfx/extensions/get-started/using-page-placeholder-with-extensions?WT.mc_id=m365-15741-cxa"
+      }
+    ]
+  }
+]

samples/react-command-task-mgmt/assets/task-management.png

@@ -0,0 +1,18 @@
+{
+  "$schema": "https://developer.microsoft.com/json-schemas/spfx-build/config.2.0.schema.json",
+  "version": "2.0",
+  "bundles": {
+    "grouping-command-set": {
+      "components": [
+        {
+          "entrypoint": "./lib/extensions/groupingCommandSet/GroupingCommandSetCommandSet.js",
+          "manifest": "./src/extensions/groupingCommandSet/GroupingCommandSetCommandSet.manifest.json"
+        }
+      ]
+    }
+  },
+  "externals": {},
+  "localizedResources": {
+    "GroupingCommandSetStrings": "lib/extensions/groupingCommandSet/loc/{locale}.js"
+  }
+}

samples/react-command-task-mgmt/config/config.json

@@ -0,0 +1,7 @@
+{
+  "$schema": "https://developer.microsoft.com/json-schemas/spfx-build/deploy-azure-storage.schema.json",
+  "workingDir": "./release/assets/",
+  "account": "<!-- STORAGE ACCOUNT NAME -->",
+  "container": "approve-action",
+  "accessKey": "<!-- ACCESS KEY -->"
+}

samples/react-command-task-mgmt/config/deploy-azure-storage.json

@@ -0,0 +1,48 @@
+{
+  "$schema": "https://developer.microsoft.com/json-schemas/spfx-build/package-solution.schema.json",
+  "solution": {
+    "name": "react-command-task-mgmt-client-side-solution",
+    "id": "71f9db24-0d1d-4659-a232-abc9ad718491",
+    "version": "1.0.0.0",
+    "includeClientSideAssets": true,
+    "skipFeatureDeployment": true,
+    "isDomainIsolated": false,
+    "developer": {
+      "name": "",
+      "websiteUrl": "",
+      "privacyUrl": "",
+      "termsOfUseUrl": "",
+      "mpnId": "Undefined-1.23.0"
+    },
+    "metadata": {
+      "shortDescription": {
+        "default": "Grouped Status/Share command set sample"
+      },
+      "longDescription": {
+        "default": "Demonstrates SPFx 1.23 grouping support for ListView Command Sets with Approve/Reject and Copy item link actions."
+      },
+      "screenshotPaths": [],
+      "videoUrl": "",
+      "categories": []
+    },
+    "features": [
+      {
+        "title": "Grouping Command Set - Deployment of grouped list view commands",
+        "description": "Deploys the grouped Status/Share List View Command Set",
+        "id": "b6c7d8e9-1a2b-3c4d-5e6f-7890abcdef12",
+        "version": "1.0.0.0",
+        "assets": {
+          "elementManifests": [
+            "elements.xml"
+          ],
+          "elementFiles": [
+            "ClientSideInstance.xml"
+          ]
+        }
+      }
+    ]
+  },
+  "paths": {
+    "zippedPackage": "solution/react-command-task-mgmt.sppkg"
+  }
+}