Skip to content

Commit b099d6e

Browse files
hugoabernierhugoabernier
authored
Merge pull request #1905 from HarminderSethi/main
ShareViaTeamsChat extension new sample
2 parents d5b5b80 + 031d061 commit b099d6e

54 files changed

Lines changed: 22960 additions & 2 deletions

Some content is hidden

Large Commits have some content hidden by default. Use the searchbox below for content that may be hidden.

‎.metadata/errors.json‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
{
2-
"timestamp": "2026-07-02T18:52:55Z",
3-
"commit": "6243104895df53298a868d0f46059a52dcf8ac25",
2+
"timestamp": "2026-07-06T11:18:57-04:00",
3+
"commit": "7a30016ef4c55b8cf597df7a1194acdfa8c4f126",
44
"errors": [
55
{
66
"file": "samples/react-access-lens/assets/sample.json",

‎.metadata/samples.json‎

Lines changed: 64 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -2152,6 +2152,70 @@
21522152
}
21532153
]
21542154
},
2155+
{
2156+
"name": "pnp-sp-dev-spfx-extensions-react-share-via-teams-chat-extension",
2157+
"source": "pnp",
2158+
"title": "Share via Teams Chat",
2159+
"shortDescription": "Share via Teams Chat is a SharePoint Framework list view command set that enables users to send one or more selected SharePoint list items or documents to Microsoft Teams chats and channels as a rich, formatted message with an Adaptive Card.",
2160+
"url": "https://github.com/pnp/sp-dev-fx-extensions/tree/main/samples/react-share-via-teams-chat-extension",
2161+
"longDescription": [
2162+
"Share via Teams Chat is a SharePoint Framework list view command set that enables users to send one or more selected SharePoint list items or documents to Microsoft Teams chats and channels as a rich, formatted message with an Adaptive Card."
2163+
],
2164+
"creationDateTime": "2026-07-02",
2165+
"updateDateTime": "2026-07-02",
2166+
"products": [
2167+
"SharePoint"
2168+
],
2169+
"metadata": [
2170+
{
2171+
"key": "CLIENT-SIDE-DEV",
2172+
"value": "React"
2173+
},
2174+
{
2175+
"key": "SPFX-VERSION",
2176+
"value": "1.23.0"
2177+
}
2178+
],
2179+
"tags": [],
2180+
"categories": [
2181+
"SPFX-APPLICATION-EXTENSION"
2182+
],
2183+
"thumbnails": [
2184+
{
2185+
"name": "SendToTeamsMenuOption.png",
2186+
"type": "image",
2187+
"order": 100,
2188+
"url": "https://github.com/pnp/sp-dev-fx-extensions/raw/main/samples/react-share-via-teams-chat-extension/assets/SendToTeamsMenuOption.png",
2189+
"alt": "Web Part Preview"
2190+
},
2191+
{
2192+
"name": "ShareViaTeamsChatDialog.png",
2193+
"type": "image",
2194+
"order": 101,
2195+
"url": "https://github.com/pnp/sp-dev-fx-extensions/raw/main/samples/react-share-via-teams-chat-extension/assets/ShareViaTeamsChatDialog.png",
2196+
"alt": "Web Part Preview"
2197+
}
2198+
],
2199+
"authors": [
2200+
{
2201+
"gitHubAccount": "HarminderSethi",
2202+
"pictureUrl": "https://github.com/HarminderSethi.png",
2203+
"name": "Harminder Singh"
2204+
}
2205+
],
2206+
"references": [
2207+
{
2208+
"name": "Overview of SharePoint Framework Extensions",
2209+
"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.",
2210+
"url": "https://learn.microsoft.com/sharepoint/dev/spfx/extensions/overview-extensions?WT.mc_id=m365-15741-cxa"
2211+
},
2212+
{
2213+
"name": "Use page placeholders from Application Customizer",
2214+
"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.",
2215+
"url": "https://learn.microsoft.com/sharepoint/dev/spfx/extensions/get-started/using-page-placeholder-with-extensions?WT.mc_id=m365-15741-cxa"
2216+
}
2217+
]
2218+
},
21552219
{
21562220
"name": "pnp-sp-dev-spfx-extensions-jquery-field-itemorder",
21572221
"source": "pnp",

‎samples/react-share-via-teams-chat-extension/.gitignore‎

Lines changed: 38 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,38 @@
1+
# Logs
2+
logs
3+
*.log
4+
npm-debug.log*
5+
6+
# Dependency directories
7+
node_modules
8+
9+
# Build generated files
10+
dist
11+
lib
12+
lib-dts
13+
lib-commonjs
14+
lib-esm
15+
jest-output
16+
release
17+
solution
18+
temp
19+
*.sppkg
20+
.heft
21+
22+
# Coverage directory used by tools like istanbul
23+
coverage
24+
25+
# OSX
26+
.DS_Store
27+
28+
# Visual Studio files
29+
.ntvs_analysis.dat
30+
.vs
31+
bin
32+
obj
33+
34+
# Resx Generated Code
35+
*.resx.ts
36+
37+
# Styles Generated Code
38+
*.scss.ts

‎samples/react-share-via-teams-chat-extension/.nvmrc‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1 @@
1+
v22.14.0

‎samples/react-share-via-teams-chat-extension/README.md‎

Lines changed: 172 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,172 @@
1+
# Share via Teams Chat
2+
3+
## Summary
4+
5+
Share via Teams Chat is a SharePoint Framework list view command set that enables users to send one or more selected SharePoint list items or documents to Microsoft Teams chats and channels as a rich, formatted message with an Adaptive Card.
6+
7+
The solution is designed to make it easy to share contextual SharePoint content with colleagues directly from the list experience without leaving the site.
8+
9+
![Send to Teams menu option](assets/SendToTeamsMenuOption.png)
10+
11+
![Share via Teams chat dialog](assets/ShareViaTeamsChatDialog.png)
12+
13+
## Compatibility
14+
15+
This sample is compatible with the following environment configuration:
16+
17+
![SPFx 1.23.0](https://img.shields.io/badge/SPFx-1.23.0-green.svg)
18+
![Node.js v22](https://img.shields.io/badge/Node.js-v22-green.svg)
19+
![Compatible with SharePoint Online](https://img.shields.io/badge/SharePoint%20Online-Compatible-green.svg)
20+
21+
## Applies to
22+
23+
- [SharePoint Framework](https://learn.microsoft.com/sharepoint/dev/spfx/sharepoint-framework-overview)
24+
- [SharePoint Framework Extensions](https://learn.microsoft.com/sharepoint/dev/spfx/extensions/overview-extensions)
25+
- [List view command sets](https://learn.microsoft.com/sharepoint/dev/spfx/extensions/get-started/building-simple-cmdset-with-dialog-api)
26+
- [Microsoft 365 tenant](https://learn.microsoft.com/sharepoint/dev/spfx/set-up-your-developer-tenant)
27+
- SharePoint Online lists and document libraries
28+
29+
## Contributors
30+
31+
- [Harminder Singh](https://github.com/HarminderSethi)
32+
33+
## Version history
34+
35+
| Version | Date | Comments |
36+
| ------- | ---- | -------- |
37+
| 1.0.0 | July 2, 2026 | Initial sample version |
38+
39+
## Prerequisites
40+
41+
- SharePoint Online tenant
42+
- SharePoint site with a list or document library
43+
- Node.js v22 compatible with SPFx 1.23.0
44+
- Tenant app catalog or site collection app catalog for deployment
45+
- Permissions to install SharePoint Framework solutions
46+
- Microsoft Graph permissions approved by a tenant administrator
47+
48+
## Minimal Path to Awesome
49+
50+
- Clone this repository or download this sample as a ZIP file.
51+
- In the command line, move to the sample folder:
52+
53+
```bash
54+
cd samples/react-share-via-teams-chat-extension
55+
```
56+
57+
- Install dependencies:
58+
59+
```bash
60+
npm install
61+
```
62+
63+
- Start the local debug server:
64+
65+
```bash
66+
npm start
67+
```
68+
69+
- Open the SharePoint workbench and test the command set from a list or library view.
70+
71+
## Features
72+
73+
### Multi-item sharing
74+
75+
Lets users select one or more SharePoint items and send them together to a Teams destination.
76+
77+
### Teams destination selection
78+
79+
Provides a dialog experience for choosing a Teams chat or channel before sending the message.
80+
81+
### Rich message composition
82+
83+
Supports an optional message body and a formatted Adaptive Card that links back to the SharePoint item or document.
84+
85+
### Fluent UI experience
86+
87+
Uses Fluent UI components for a polished, modern dialog experience in SharePoint.
88+
89+
## Supported contexts
90+
91+
The extension is intended for SharePoint Online lists and document libraries where the list view command set can surface the custom action.
92+
93+
## Build and package
94+
95+
To build the project:
96+
97+
```bash
98+
npm run build
99+
```
100+
101+
This produces the SharePoint package in the solution folder for deployment.
102+
103+
## Installation
104+
105+
1. Build the solution package.
106+
2. Upload the generated .sppkg file to the tenant app catalog or a site collection app catalog.
107+
3. Deploy the solution.
108+
4. Navigate to the target SharePoint site.
109+
5. Add the app to the site and confirm the command set is available in list and library views.
110+
111+
## Usage
112+
113+
1. Open a SharePoint list or document library.
114+
2. Select one or more items.
115+
3. Choose Send to Teams from the command bar.
116+
4. Select a Teams chat or channel.
117+
5. Add an optional message.
118+
6. Send the message.
119+
120+
## Permissions used
121+
122+
The solution requests delegated Microsoft Graph permissions for:
123+
124+
- Chat.Read
125+
- Chat.ReadWrite
126+
- Chat.ReadBasic
127+
- ChatMessage.Send
128+
- Team.ReadBasic.All
129+
- Channel.ReadBasic.All
130+
- ChannelMessage.Send
131+
132+
## Privacy and data handling
133+
134+
This sample uses Microsoft Graph from the SharePoint client-side context and does not require a custom backend service.
135+
136+
- The selected SharePoint item information is sent only when a user initiates sharing.
137+
- Sharing a link or message in Teams does not automatically grant the recipient access to the underlying SharePoint item or document.
138+
- The experience relies on delegated permissions that must be approved by a tenant administrator.
139+
- The message content is composed by the user and sent to the chosen Teams destination.
140+
141+
## Known limitations
142+
143+
- The experience depends on the user having access to the target Teams chat or channel.
144+
- Microsoft Graph permissions must be approved before the sample can send messages successfully.
145+
- The sample is intended for SharePoint Online and relies on the modern command bar experience.
146+
147+
## References
148+
149+
- [SharePoint Framework overview](https://learn.microsoft.com/sharepoint/dev/spfx/sharepoint-framework-overview)
150+
- [Build your first list view command set](https://learn.microsoft.com/sharepoint/dev/spfx/extensions/get-started/building-simple-cmdset-with-dialog-api)
151+
- [Microsoft Graph permissions reference](https://learn.microsoft.com/graph/permissions-reference)
152+
- [PnPjs documentation](https://pnp.github.io/pnpjs/)
153+
154+
## Disclaimer
155+
156+
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.
157+
158+
## Help
159+
160+
We do not support samples directly, but the community is always willing to help. If you run into issues, please use the GitHub issues for this sample repository to report them or ask questions.
161+
162+
You can try looking at [issues related to this sample](https://github.com/pnp/sp-dev-fx-extensions/issues?q=react-share-via-teams-chat-extension) to see if anybody else is having the same issues.
163+
164+
You can also try looking at [discussions related to this sample](https://github.com/pnp/sp-dev-fx-extensions/discussions?discussions_q=react-share-via-teams-chat-extension) and see what the community is saying.
165+
166+
If you encounter any issues while using this sample, [create a new issue](https://github.com/pnp/sp-dev-fx-extensions/issues/new?assignees=&labels=Needs%3A+Triage+%3Amag%3A%2Ctype%3Abug-suspected&template=bug-report.yml&sample=react-share-via-teams-chat-extension&authors=@Harminder_Sethi&title=react-share-via-teams-chat-extension%20-%20).
167+
168+
For questions regarding this sample, [create a new question](https://github.com/pnp/sp-dev-fx-extensions/issues/new?assignees=&labels=Needs%3A+Triage+%3Amag%3A%2Ctype%3Aquestion&template=question.yml&sample=react-share-via-teams-chat-extension&authors=@Harminder_Sethi&title=react-share-via-teams-chat-extension%20-%20).
169+
170+
Finally, if you have an idea for improvement, [make a suggestion](https://github.com/pnp/sp-dev-fx-extensions/issues/new?assignees=&labels=Needs%3A+Triage+%3Amag%3A%2Ctype%3Aenhancement&template=suggestion.yml&sample=react-share-via-teams-chat-extension&authors=@Harminder_Sethi&title=react-share-via-teams-chat-extension%20-%20).
171+
172+
<img src="https://m365-visitor-stats.azurewebsites.net/sp-dev-fx-extensions/samples/react-share-via-teams-chat-extension" />

‎samples/react-share-via-teams-chat-extension/assets/SendToTeamsMenuOption.png‎

16.4 KB
Loading

‎samples/react-share-via-teams-chat-extension/assets/ShareViaTeamsChatDialog.png‎

37.6 KB
Loading

‎samples/react-share-via-teams-chat-extension/assets/sample.json‎

Lines changed: 66 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,66 @@
1+
[
2+
{
3+
"name": "pnp-sp-dev-spfx-extensions-react-share-via-teams-chat-extension",
4+
"source": "pnp",
5+
"title": "Share via Teams Chat",
6+
"shortDescription": "Share via Teams Chat is a SharePoint Framework list view command set that enables users to send one or more selected SharePoint list items or documents to Microsoft Teams chats and channels as a rich, formatted message with an Adaptive Card.",
7+
"url": "https://github.com/pnp/sp-dev-fx-extensions/tree/main/samples/react-share-via-teams-chat-extension",
8+
"longDescription": [
9+
"Share via Teams Chat is a SharePoint Framework list view command set that enables users to send one or more selected SharePoint list items or documents to Microsoft Teams chats and channels as a rich, formatted message with an Adaptive Card."
10+
],
11+
"creationDateTime": "2026-07-02",
12+
"updateDateTime": "2026-07-02",
13+
"products": [
14+
"SharePoint"
15+
],
16+
"metadata": [
17+
{
18+
"key": "CLIENT-SIDE-DEV",
19+
"value": "React"
20+
},
21+
{
22+
"key": "SPFX-VERSION",
23+
"value": "1.23.0"
24+
}
25+
],
26+
"tags": [],
27+
"categories": [
28+
"SPFX-APPLICATION-EXTENSION"
29+
],
30+
"thumbnails": [
31+
{
32+
"name": "SendToTeamsMenuOption.png",
33+
"type": "image",
34+
"order": 100,
35+
"url": "https://github.com/pnp/sp-dev-fx-extensions/raw/main/samples/react-share-via-teams-chat-extension/assets/SendToTeamsMenuOption.png",
36+
"alt": "Web Part Preview"
37+
},
38+
{
39+
"name": "ShareViaTeamsChatDialog.png",
40+
"type": "image",
41+
"order": 101,
42+
"url": "https://github.com/pnp/sp-dev-fx-extensions/raw/main/samples/react-share-via-teams-chat-extension/assets/ShareViaTeamsChatDialog.png",
43+
"alt": "Web Part Preview"
44+
}
45+
],
46+
"authors": [
47+
{
48+
"gitHubAccount": "HarminderSethi",
49+
"pictureUrl": "https://github.com/HarminderSethi.png",
50+
"name": "Harminder Singh"
51+
}
52+
],
53+
"references": [
54+
{
55+
"name": "Overview of SharePoint Framework Extensions",
56+
"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.",
57+
"url": "https://learn.microsoft.com/sharepoint/dev/spfx/extensions/overview-extensions?WT.mc_id=m365-15741-cxa"
58+
},
59+
{
60+
"name": "Use page placeholders from Application Customizer",
61+
"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.",
62+
"url": "https://learn.microsoft.com/sharepoint/dev/spfx/extensions/get-started/using-page-placeholder-with-extensions?WT.mc_id=m365-15741-cxa"
63+
}
64+
]
65+
}
66+
]

‎samples/react-share-via-teams-chat-extension/config/config.json‎

Lines changed: 18 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,18 @@
1+
{
2+
"$schema": "https://developer.microsoft.com/json-schemas/spfx-build/config.2.0.schema.json",
3+
"version": "2.0",
4+
"bundles": {
5+
"share-via-teams-chat-command-set": {
6+
"components": [
7+
{
8+
"entrypoint": "./lib/extensions/shareViaTeamsChat/ShareViaTeamsChatCommandSet.js",
9+
"manifest": "./src/extensions/shareViaTeamsChat/ShareViaTeamsChatCommandSet.manifest.json"
10+
}
11+
]
12+
}
13+
},
14+
"externals": {},
15+
"localizedResources": {
16+
"ShareViaTeamsChatCommandSetStrings": "lib/extensions/shareViaTeamsChat/loc/{locale}.js"
17+
}
18+
}

‎samples/react-share-via-teams-chat-extension/config/deploy-azure-storage.json‎

Lines changed: 7 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,7 @@
1+
{
2+
"$schema": "https://developer.microsoft.com/json-schemas/spfx-build/deploy-azure-storage.schema.json",
3+
"workingDir": "./release/assets/",
4+
"account": "<!-- STORAGE ACCOUNT NAME -->",
5+
"container": "react-share-via-teams-chat-extension",
6+
"accessKey": "<!-- ACCESS KEY -->"
7+
}

0 commit comments

Comments
 (0)