honeymoose
/
sp-dev-fx-webparts
mirror of https://github.com/pnp/sp-dev-fx-webparts.git
1
0
Fork 0
Code Issues Packages Projects Releases Wiki Activity

Updated tags to say SPFx

This commit is contained in:
Hugo Bernier 2021-11-02 00:46:21 -04:00
parent eaa4dd6c47
commit ff8274ade1
69 changed files with 400 additions and 237 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

41
samples/js-advanced-commenting/README.md
View File

@ -39,8 +39,16 @@
## Preview
![Advanced-Comments-Box](./assets/Advanced-Comments-Box.gif)
## Used SharePoint Framework Version
![1.9.1](https://img.shields.io/badge/version-1.9.1-green.svg)
## Compatibility
![SPFx 1.9.1](https://img.shields.io/badge/SPFx-1.9.1-green.svg)
![Node.js v10 | v8](https://img.shields.io/badge/Node.js-v10%20%7C%20v8-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 Incompatible](https://img.shields.io/badge/Local%20Workbench-Incompatible-red.svg "Requires access to SharePoint content")
![Hosted Workbench Compatible](https://img.shields.io/badge/Hosted%20Workbench-Compatible-green.svg)
## Applies to
@ -49,13 +57,13 @@
## Prerequisites
> **@microsoft/generator-sharepoint - 1.9.1**
None
## Solution
Solution|Author(s)
--------|---------
SPFxPageComments | Sudharsan K.([@sudharsank](https://twitter.com/sudharsank), [Know More](http://windowssharepointserver.blogspot.com/))
SPFxPageComments | [Sudharsan K.](https://github.com/sudharsank) ([@sudharsank](https://twitter.com/sudharsank), [Know More](http://windowssharepointserver.blogspot.com/))
## Version history
@ -63,8 +71,6 @@ Version|Date|Comments
-------|----|--------
1.0.0.0|Feb 05 2020|Initial release
## 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.**
## Minimal Path to Awesome
@ -72,7 +78,7 @@ Version|Date|Comments
- in the command line run:
- `npm install`
- `gulp bundle --ship && gulp package-solution --ship`
- Add the .sppkg file to the app catalog and add the **Page Comments** web part to the page.
- Add the `.sppkg` file to the app catalog and add the **Page Comments** web part to the page.
## Features
- Used [SharePoint Framework Property Controls](https://sharepoint.github.io/sp-dev-fx-property-controls/) to create the property pane controls(Text, ListPicker, Toggle) with callout.
@ -87,4 +93,25 @@ This solution doesn't work on local mode.
If you want to try on a real environment, open:
[O365 Workbench](https://your-domain.sharepoint.com/_layouts/15/workbench.aspx)
## 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.**
## Help
We do not support samples, but we this community is always willing to help, and we want to improve these samples. We use GitHub to track issues, which makes it easy for community members to volunteer their time and help resolve issues.
If you're having issues building the solution, please run [spfx doctor](https://pnp.github.io/cli-microsoft365/cmd/spfx/spfx-doctor/) from within the solution folder to diagnose incompatibility issues with your environment.
You can try looking at [issues related to this sample](https://github.com/pnp/sp-dev-fx-webparts/issues?q=label%3Ajs-advanced-commenting) to see if anybody else is having the same issues.
You can also try looking at [discussions related to this sample](https://github.com/pnp/sp-dev-fx-webparts/discussions?discussions_q=label%3Ajs-advanced-commenting) and see what the community is saying.
If you encounter any issues while using this sample, [create a new issue](https://github.com/pnp/sp-dev-fx-webparts/issues/new?assignees=&labels=Needs%3A+Triage+%3Amag%3A%2Ctype%3Abug-suspected&template=bug-report.yml&sample=js-advanced-commenting&authors=@sudharsank&title=js-advanced-commenting%20-%20).
For questions regarding this sample, [create a new question](https://github.com/pnp/sp-dev-fx-webparts/issues/new?assignees=&labels=Needs%3A+Triage+%3Amag%3A%2Ctype%3Abug-suspected&template=question.yml&sample=js-advanced-commenting&authors=@sudharsank&title=js-advanced-commenting%20-%20).
Finally, if you have an idea for improvement, [make a suggestion](https://github.com/pnp/sp-dev-fx-webparts/issues/new?assignees=&labels=Needs%3A+Triage+%3Amag%3A%2Ctype%3Abug-suspected&template=suggestion.yml&sample=js-advanced-commenting&authors=@sudharsank&title=js-advanced-commenting%20-%20).
<img src="https://telemetry.sharepointpnp.com/sp-dev-fx-webparts/samples/js-advanced-commenting" />

41
samples/js-employee-spotlight/README.md
View File

@ -38,8 +38,16 @@ Simple Web Part that demonstrates the use of SharePoint Framework for show casin
> Data is displayed only when hosted in SharePoint. No mock data included at this point for local testing.
## Used SharePoint Framework Version
![drop](https://img.shields.io/badge/drop-1.8.0-green.svg)
## Compatibility
![SPFx 1.8.0](https://img.shields.io/badge/SPFx-1.8.0-green.svg)
![Node.js v6 | v5](https://img.shields.io/badge/Node.js-v6%20%7C%20v5-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 Incompatible](https://img.shields.io/badge/Local%20Workbench-Incompatible-red.svg "Requires access to SharePoint content")
![Hosted Workbench Compatible](https://img.shields.io/badge/Hosted%20Workbench-Compatible-green.svg)
## Applies to
* [SharePoint Framework Developer](https://docs.microsoft.com/sharepoint/dev/spfx/sharepoint-framework-overview)
@ -59,14 +67,6 @@ Version|Date|Comments
-------|----|--------
1.0|June 12, 2017|Initial release
## 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.**
---
## Minimal Path to Awesome
- Clone this repository
@ -93,4 +93,25 @@ This Web Part illustrates the following concepts on top of the SharePoint Framew
* Logging.
* Rendering error messages.
## 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.**
## Help
We do not support samples, but we this community is always willing to help, and we want to improve these samples. We use GitHub to track issues, which makes it easy for community members to volunteer their time and help resolve issues.
If you're having issues building the solution, please run [spfx doctor](https://pnp.github.io/cli-microsoft365/cmd/spfx/spfx-doctor/) from within the solution folder to diagnose incompatibility issues with your environment.
You can try looking at [issues related to this sample](https://github.com/pnp/sp-dev-fx-webparts/issues?q=label%3Ajs-employee-spotlight) to see if anybody else is having the same issues.
You can also try looking at [discussions related to this sample](https://github.com/pnp/sp-dev-fx-webparts/discussions?discussions_q=label%3Ajs-employee-spotlight) and see what the community is saying.
If you encounter any issues while using this sample, [create a new issue](https://github.com/pnp/sp-dev-fx-webparts/issues/new?assignees=&labels=Needs%3A+Triage+%3Amag%3A%2Ctype%3Abug-suspected&template=bug-report.yml&sample=js-employee-spotlight&authors=&title=js-employee-spotlight%20-%20).
For questions regarding this sample, [create a new question](https://github.com/pnp/sp-dev-fx-webparts/issues/new?assignees=&labels=Needs%3A+Triage+%3Amag%3A%2Ctype%3Abug-suspected&template=question.yml&sample=js-employee-spotlight&authors=&title=js-employee-spotlight%20-%20).
Finally, if you have an idea for improvement, [make a suggestion](https://github.com/pnp/sp-dev-fx-webparts/issues/new?assignees=&labels=Needs%3A+Triage+%3Amag%3A%2Ctype%3Abug-suspected&template=suggestion.yml&sample=js-employee-spotlight&authors=&title=js-employee-spotlight%20-%20).
<img src="https://telemetry.sharepointpnp.com/sp-dev-fx-webparts/samples/js-employee-spotlight" />

40
samples/js-gitHubBadge/README.md
View File

@ -4,8 +4,16 @@
Displays information from GitHub for a specified user.
![drop](./assets/1.png)
## Used SharePoint Framework Version
![SPFx 1.8.0](https://img.shields.io/badge/version-1.8.0-green.svg)
## Compatibility
![SPFx 1.8.0](https://img.shields.io/badge/SPFx-1.8.0-green.svg)
![Node.js v6 | v5](https://img.shields.io/badge/Node.js-v6%20%7C%20v5-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 Compatible](https://img.shields.io/badge/Local%20Workbench-Compatible-green.svg)
![Hosted Workbench Compatible](https://img.shields.io/badge/Hosted%20Workbench-Compatible-green.svg)
## Applies to
@ -21,7 +29,7 @@ None
Solution|Author(s)
--------|---------
js-GitHubBadge | Eric Skaggs [@skaggej](https://www.twitter.com/skaggej)
js-GitHubBadge | [Eric Skaggs](https://github.com/skaggej) [@skaggej](https://www.twitter.com/skaggej)
## Version history
@ -29,11 +37,6 @@ Version|Date|Comments
-------|----|--------
1.0 | April 18, 2019 | Initial release
## 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.**
---
## Minimal Path to Awesome
- Clone this repository
@ -50,4 +53,25 @@ Future samples will refactor this into something more professional that follows
Ultimately, this sample along with its yet-to-be-created future samples could be a useful teaching tool to developers new to SPFx as well as developers who aren't well-versed in SPFx coding patterns or the various frameworks available.
## 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.**
## Help
We do not support samples, but we this community is always willing to help, and we want to improve these samples. We use GitHub to track issues, which makes it easy for community members to volunteer their time and help resolve issues.
If you're having issues building the solution, please run [spfx doctor](https://pnp.github.io/cli-microsoft365/cmd/spfx/spfx-doctor/) from within the solution folder to diagnose incompatibility issues with your environment.
You can try looking at [issues related to this sample](https://github.com/pnp/sp-dev-fx-webparts/issues?q=label%3Ajs-gitHubBadge) to see if anybody else is having the same issues.
You can also try looking at [discussions related to this sample](https://github.com/pnp/sp-dev-fx-webparts/discussions?discussions_q=label%3Ajs-gitHubBadge) and see what the community is saying.
If you encounter any issues while using this sample, [create a new issue](https://github.com/pnp/sp-dev-fx-webparts/issues/new?assignees=&labels=Needs%3A+Triage+%3Amag%3A%2Ctype%3Abug-suspected&template=bug-report.yml&sample=js-gitHubBadge&authors=@skaggej&title=js-gitHubBadge%20-%20).
For questions regarding this sample, [create a new question](https://github.com/pnp/sp-dev-fx-webparts/issues/new?assignees=&labels=Needs%3A+Triage+%3Amag%3A%2Ctype%3Abug-suspected&template=question.yml&sample=js-gitHubBadge&authors=@skaggej&title=js-gitHubBadge%20-%20).
Finally, if you have an idea for improvement, [make a suggestion](https://github.com/pnp/sp-dev-fx-webparts/issues/new?assignees=&labels=Needs%3A+Triage+%3Amag%3A%2Ctype%3Abug-suspected&template=suggestion.yml&sample=js-gitHubBadge&authors=@skaggej&title=js-gitHubBadge%20-%20).
<img src="https://telemetry.sharepointpnp.com/sp-dev-fx-webparts/samples/js-gitHubBadge" />

2
samples/js-msgraph-thumbnail/README.md
View File

@ -26,7 +26,7 @@ The goal of the sample is to illustrate a single call calling pattern for the th
## Compatibility
![SPFx 1.10.0](https://img.shields.io/badge/version-1.10.0-green.svg)
![SPFx 1.10.0](https://img.shields.io/badge/SPFx-1.10.0-green.svg)
![Node.js v10](https://img.shields.io/badge/Node.js-v10-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")

2
samples/js-myflows/README.md
View File

@ -24,7 +24,7 @@
## Used SharePoint Framework Version
![drop](https://img.shields.io/badge/version-1.8.2-green.svg)
![drop](https://img.shields.io/badge/SPFx-1.8.2-green.svg)
## Applies to

2
samples/js-propertycontrols-svg/README.md
View File

@ -8,7 +8,7 @@ An SPFx web part that displays a Scalable Vector Graphics (SVG) image using prop
## Used SharePoint Framework Version
![drop](https://img.shields.io/badge/version-1.3.4-green.svg)
![drop](https://img.shields.io/badge/SPFx-1.3.4-green.svg)
## Which PnP SPFx controls are being used in this sample?

2
samples/js-public-unjoined-teams/README.md
View File

@ -6,7 +6,7 @@ This web part lists all the public teams the current user is not yet a member of
![picture of the web part in action](./assets/js-public-unjoined-teams.gif)
## Used SharePoint Framework Version
![drop](https://img.shields.io/badge/version-1.7.1-green.svg)
![drop](https://img.shields.io/badge/SPFx-1.7.1-green.svg)
## Applies to

41
samples/js-skype-status/README.md
View File

@ -24,8 +24,17 @@ Allows you to properly display and subscribe to change of users' availability.
See the demo:
![demo](./images/demo.gif)
## Used SharePoint Framework Version
![drop](https://img.shields.io/badge/drop-1.8.0-green.svg)
## Compatibility
![SPFx 1.8.0](https://img.shields.io/badge/SPFx-1.8.0-green.svg)
![Node.js v6 | v5](https://img.shields.io/badge/Node.js-v6%20%7C%20v5-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 Compatible](https://img.shields.io/badge/Local%20Workbench-Compatible-green.svg)
![Hosted Workbench Compatible](https://img.shields.io/badge/Hosted%20Workbench-Compatible-green.svg)
## Applies to
@ -49,12 +58,6 @@ Version|Date|Comments
1.1|June 22nd, 2018|Upgraded to SPFx 1.5
1.0|December 1, 2017|Initial release
## 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.**
---
## Minimal Path to Awesome
### Authentication
@ -90,4 +93,26 @@ Don't forget to run `gulp serve --nobrowser` to start the debugging server.
Because Skype needs to silently redirect the user to a page for the authentication flow, you need to create an additional page called `skypepresence` in your site.
You don't need to add anything on that page.
## 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.**
## Help
We do not support samples, but we this community is always willing to help, and we want to improve these samples. We use GitHub to track issues, which makes it easy for community members to volunteer their time and help resolve issues.
If you're having issues building the solution, please run [spfx doctor](https://pnp.github.io/cli-microsoft365/cmd/spfx/spfx-doctor/) from within the solution folder to diagnose incompatibility issues with your environment.
You can try looking at [issues related to this sample](https://github.com/pnp/sp-dev-fx-webparts/issues?q=label%3Ajs-skype-status) to see if anybody else is having the same issues.
You can also try looking at [discussions related to this sample](https://github.com/pnp/sp-dev-fx-webparts/discussions?discussions_q=label%3Ajs-skype-status) and see what the community is saying.
If you encounter any issues while using this sample, [create a new issue](https://github.com/pnp/sp-dev-fx-webparts/issues/new?assignees=&labels=Needs%3A+Triage+%3Amag%3A%2Ctype%3Abug-suspected&template=bug-report.yml&sample=js-skype-status&authors=@baywet&title=js-skype-status%20-%20).
For questions regarding this sample, [create a new question](https://github.com/pnp/sp-dev-fx-webparts/issues/new?assignees=&labels=Needs%3A+Triage+%3Amag%3A%2Ctype%3Abug-suspected&template=question.yml&sample=js-skype-status&authors=@baywet&title=js-skype-status%20-%20).
Finally, if you have an idea for improvement, [make a suggestion](https://github.com/pnp/sp-dev-fx-webparts/issues/new?assignees=&labels=Needs%3A+Triage+%3Amag%3A%2Ctype%3Abug-suspected&template=suggestion.yml&sample=js-skype-status&authors=@baywet&title=js-skype-status%20-%20).
![tracking image](https://telemetry.sharepointpnp.com/sp-dev-fx-webparts/samples/js-skype-status)

39
samples/js-theme-manager/README.md
View File

@ -25,8 +25,16 @@ NOTE: This is a great option to provide theme management of a Site Collection wi
![preview](./assets/apply-a-theme.png)
## Used SharePoint Framework Version
![1.10.0](https://img.shields.io/badge/drop-1.10.0-orange.svg)
## Compatibility
![SPFx 1.10](https://img.shields.io/badge/SPFx-1.10.0-green.svg)
![Node.js v10 | v8](https://img.shields.io/badge/Node.js-v10%20%7C%20v8-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 Incompatible](https://img.shields.io/badge/Local%20Workbench-Incompatible-red.svg "The solution requires access to SharePoint themes")
![Hosted Workbench Compatible](https://img.shields.io/badge/Hosted%20Workbench-Compatible-green.svg)
## Applies to
@ -49,11 +57,6 @@ Version|Date|Comments
1.0|February 27, 2019|Initial release
2.0|June 1, 2020|Upgraded to SPFx 1.10.0
## 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.**
---
## Minimal Path to Awesome
- Clone this repository
@ -72,4 +75,26 @@ This Web Part illustrates the following concepts on top of the SharePoint Framew
- [Office UI Fabric Theme Palette Generator](https://developer.microsoft.com/en-us/fabric#/styles/themegenerator)
## 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.**
## Help
We do not support samples, but we this community is always willing to help, and we want to improve these samples. We use GitHub to track issues, which makes it easy for community members to volunteer their time and help resolve issues.
If you're having issues building the solution, please run [spfx doctor](https://pnp.github.io/cli-microsoft365/cmd/spfx/spfx-doctor/) from within the solution folder to diagnose incompatibility issues with your environment.
You can try looking at [issues related to this sample](https://github.com/pnp/sp-dev-fx-webparts/issues?q=label%3Ajs-theme-manager) to see if anybody else is having the same issues.
You can also try looking at [discussions related to this sample](https://github.com/pnp/sp-dev-fx-webparts/discussions?discussions_q=label%3Ajs-theme-manager) and see what the community is saying.
If you encounter any issues while using this sample, [create a new issue](https://github.com/pnp/sp-dev-fx-webparts/issues/new?assignees=&labels=Needs%3A+Triage+%3Amag%3A%2Ctype%3Abug-suspected&template=bug-report.yml&sample=js-theme-manager&authors=@bcameron1231%20@hugoabernier&title=js-theme-manager%20-%20).
For questions regarding this sample, [create a new question](https://github.com/pnp/sp-dev-fx-webparts/issues/new?assignees=&labels=Needs%3A+Triage+%3Amag%3A%2Ctype%3Abug-suspected&template=question.yml&sample=js-theme-manager&authors=@bcameron1231%20@hugoabernier&title=js-theme-manager%20-%20).
Finally, if you have an idea for improvement, [make a suggestion](https://github.com/pnp/sp-dev-fx-webparts/issues/new?assignees=&labels=Needs%3A+Triage+%3Amag%3A%2Ctype%3Abug-suspected&template=suggestion.yml&sample=js-theme-manager&authors=@bcameron1231%20@hugoabernier&title=js-theme-manager%20-%20).
<img src="https://telemetry.sharepointpnp.com/sp-dev-fx-webparts/samples/js-theme-manager" />

3
samples/js-workbench-customizer/README.md
View File

@ -24,9 +24,6 @@ Alternatively, you can add the output files for the web part to a custom SPFx pr
> **Note:** This approach will not "pollute" your solution with additional resources or dependencies as the SPFx toolchain will ignore those additional files by default when you package your solution. You can also clean everything by running `gulp clean` as both the lib and dist folders are deleted and recreated again. Git will also ignore dist and lib folders by default, so the files will never be added to source control.
## Used SharePoint Framework Version
## Compatibility
![SPFx 1.11](https://img.shields.io/badge/SPFx-1.11.0-green.svg)

2
samples/react-accordion-dynamic-section/README.md
View File

@ -33,7 +33,7 @@
## Compatibility
![SPFx 1.10.0](https://img.shields.io/badge/version-1.10.0-green.svg)
![SPFx 1.10.0](https://img.shields.io/badge/SPFx-1.10.0-green.svg)
![Node.js v10](https://img.shields.io/badge/Node.js-v10-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")

2
samples/react-accordion-section/README.md
View File

@ -27,7 +27,7 @@
## Compatibility
![SPFx 1.10.0](https://img.shields.io/badge/version-1.10.0-green.svg)
![SPFx 1.10.0](https://img.shields.io/badge/SPFx-1.10.0-green.svg)
![Node.js v10](https://img.shields.io/badge/Node.js-v10-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")

37
samples/react-adaptive-cards-image-gallery/README.md
View File

@ -43,9 +43,15 @@ Below NPM packages are used to develop this sample.
1. sp-pnp-js (https://www.npmjs.com/package/sp-pnp-js)
2. adaptivecards (https://www.npmjs.com/package/adaptivecards)
## Used SharePoint Framework Version
## Compatibility
![1.10.0](https://img.shields.io/badge/drop-1.10-green.svg)
![SPFx 1.10](https://img.shields.io/badge/SPFx-1.10.0-green.svg)
![Node.js v10 | v8](https://img.shields.io/badge/Node.js-v10%20%7C%20v8-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 Compatible](https://img.shields.io/badge/Local%20Workbench-Compatible-green.svg)
![Hosted Workbench Compatible](https://img.shields.io/badge/Hosted%20Workbench-Compatible-green.svg)
## Applies to
@ -66,12 +72,6 @@ Version|Date|Comments
1.1.0|June 15, 2020|Upgrade to SPFx 1.10.0
1.0.0|November 28, 2018|Initial release
## 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.**
---
## Prerequisites
- SharePoint Online tenant
@ -106,4 +106,25 @@ This sample web part shows how adaptive cards can be used effectively with Share
[figure4]: ./assets/list-sample-data.png
## 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.**
## Help
We do not support samples, but we this community is always willing to help, and we want to improve these samples. We use GitHub to track issues, which makes it easy for community members to volunteer their time and help resolve issues.
If you're having issues building the solution, please run [spfx doctor](https://pnp.github.io/cli-microsoft365/cmd/spfx/spfx-doctor/) from within the solution folder to diagnose incompatibility issues with your environment.
You can try looking at [issues related to this sample](https://github.com/pnp/sp-dev-fx-webparts/issues?q=label%3Areact-adaptive-cards-image-gallery) to see if anybody else is having the same issues.
You can also try looking at [discussions related to this sample](https://github.com/pnp/sp-dev-fx-webparts/discussions?discussions_q=label%3Areact-adaptive-cards-image-gallery) and see what the community is saying.
If you encounter any issues while using this sample, [create a new issue](https://github.com/pnp/sp-dev-fx-webparts/issues/new?assignees=&labels=Needs%3A+Triage+%3Amag%3A%2Ctype%3Abug-suspected&template=bug-report.yml&sample=react-adaptive-cards-image-gallery&authors=@nanddeepn%20@ravi16a87&title=react-adaptive-cards-image-gallery%20-%20).
For questions regarding this sample, [create a new question](https://github.com/pnp/sp-dev-fx-webparts/issues/new?assignees=&labels=Needs%3A+Triage+%3Amag%3A%2Ctype%3Abug-suspected&template=question.yml&sample=react-adaptive-cards-image-gallery&authors=@nanddeepn%20@ravi16a87&title=react-adaptive-cards-image-gallery%20-%20).
Finally, if you have an idea for improvement, [make a suggestion](https://github.com/pnp/sp-dev-fx-webparts/issues/new?assignees=&labels=Needs%3A+Triage+%3Amag%3A%2Ctype%3Abug-suspected&template=suggestion.yml&sample=react-adaptive-cards-image-gallery&authors=@nanddeepn%20@ravi16a87&title=react-adaptive-cards-image-gallery%20-%20).
<img src="https://telemetry.sharepointpnp.com/sp-dev-fx-webparts/samples/react-adaptive-cards-image-gallery" />

2
samples/react-add-js-css-ref/README.md
View File

@ -40,7 +40,7 @@ Path can be `/sites/mysc/style library/js/custom.js` or `/sites/mysc/style libra
## Used SharePoint Framework Version
![1.9.1](https://img.shields.io/badge/version-1.9.1-green.svg)
![1.9.1](https://img.shields.io/badge/SPFx-1.9.1-green.svg)
## Applies to

2
samples/react-admin-sc-catalog-pnpjs/README.md
View File

@ -9,7 +9,7 @@ It needs Globlal Administrator or SharePoint Online Administrator permissions in
## Used SharePoint Framework Version
![drop](https://img.shields.io/badge/version-1.9.1-green.svg)
![drop](https://img.shields.io/badge/SPFx-1.9.1-green.svg)
## Applies to

2
samples/react-aggregated-calendar/README.md
View File

@ -18,7 +18,7 @@ Web part is developed using below technologies
## Used SharePoint Framework Version
![drop](https://img.shields.io/badge/version-GA-green.svg)
![drop](https://img.shields.io/badge/SPFx-GA-green.svg)
## Applies to

2
samples/react-avatar/README.md
View File

@ -16,7 +16,7 @@ This is a sample web part that helps user create their avatar and save as profil
## Used SharePoint Framework Version
![SPFx 1.11](https://img.shields.io/badge/version-1.11.0-green.svg)
![SPFx 1.11](https://img.shields.io/badge/SPFx-1.11.0-green.svg)
## Applies to

2
samples/react-bot-framework-secure/README.md
View File

@ -20,7 +20,7 @@ This demo does not include any threat models and is designed for educational pur
## Used SharePoint Framework Version
![1.0](https://img.shields.io/badge/version-1.0-green.svg)
![1.0](https://img.shields.io/badge/SPFx-1.0-green.svg)
## Applies to

39
samples/react-bot-framework-secure/webpart/README.md
View File

@ -4,9 +4,16 @@
A web part sample that uses the [botframework-webchat module](https://www.npmjs.com/package/botframework-webchat) to create a React component to render the Bot Framework v4 webchat component. This web part is able to render Text and rich attachments (Images, Cards, Adaptive Cards, ...) and has settings for branding purposes.
## Used SharePoint Framework Version
![SPFx 1.10.0](https://img.shields.io/badge/drop-1.10.0-green.svg)
## Compatibility
![SPFx 1.10](https://img.shields.io/badge/SPFx-1.10.0-green.svg)
![Node.js v10 | v8](https://img.shields.io/badge/Node.js-v10%20%7C%20v8-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 Compatible](https://img.shields.io/badge/Local%20Workbench-Compatible-green.svg)
![Hosted Workbench Compatible](https://img.shields.io/badge/Hosted%20Workbench-Compatible-green.svg)
## Applies to
@ -18,12 +25,6 @@ A web part sample that uses the [botframework-webchat module](https://www.npmjs.
> You need to have this [bot](../bot/) created and registered using the Microsoft Bot Framework and registered to use the **Direct Line Channel**, which will give you the token generation endpoint needed when adding this web part to the page. For more information on creating a bot and registering the channel you can see the official web site at [dev.botframework.com](http://dev.botframework.com).
## 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.**
---
## Minimal Path to Awesome
- Clone this repository
@ -52,4 +53,26 @@ This Web Part illustrates the following concepts on top of the SharePoint Framew
- Office UI Fabric
- React
## 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.**
## Help
We do not support samples, but we this community is always willing to help, and we want to improve these samples. We use GitHub to track issues, which makes it easy for community members to volunteer their time and help resolve issues.
If you're having issues building the solution, please run [spfx doctor](https://pnp.github.io/cli-microsoft365/cmd/spfx/spfx-doctor/) from within the solution folder to diagnose incompatibility issues with your environment.
You can try looking at [issues related to this sample](https://github.com/pnp/sp-dev-fx-webparts/issues?q=label%3Areact-bot-framework-secure) to see if anybody else is having the same issues.
You can also try looking at [discussions related to this sample](https://github.com/pnp/sp-dev-fx-webparts/discussions?discussions_q=label%3Areact-bot-framework-secure) and see what the community is saying.
If you encounter any issues while using this sample, [create a new issue](https://github.com/pnp/sp-dev-fx-webparts/issues/new?assignees=&labels=Needs%3A+Triage+%3Amag%3A%2Ctype%3Abug-suspected&template=bug-report.yml&sample=react-bot-framework-secure&authors=&title=react-bot-framework-secure%20-%20).
For questions regarding this sample, [create a new question](https://github.com/pnp/sp-dev-fx-webparts/issues/new?assignees=&labels=Needs%3A+Triage+%3Amag%3A%2Ctype%3Abug-suspected&template=question.yml&sample=react-bot-framework-secure&authors=&title=react-bot-framework-secure%20-%20).
Finally, if you have an idea for improvement, [make a suggestion](https://github.com/pnp/sp-dev-fx-webparts/issues/new?assignees=&labels=Needs%3A+Triage+%3Amag%3A%2Ctype%3Abug-suspected&template=suggestion.yml&sample=react-bot-framework-secure&authors=&title=react-bot-framework-secure%20-%20).
<img src="https://telemetry.sharepointpnp.com/sp-dev-fx-webparts/samples/react-bot-framework-secure/webpart" />

2
samples/react-bot-framework-sso/README.md
View File

@ -21,7 +21,7 @@ This demo does not include any threat models and is designed for educational pur
## Compatibility
![SPFx 1.10.0](https://img.shields.io/badge/version-1.10.0-green.svg)
![SPFx 1.10.0](https://img.shields.io/badge/SPFx-1.10.0-green.svg)
![Node.js v10](https://img.shields.io/badge/Node.js-v10-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")

2
samples/react-bot-framework-sso/webpart/README.md
View File

@ -8,7 +8,7 @@ An web parts sample that uses the [botframework-webchat module](https://www.npmj
## Compatibility
![SPFx 1.10.0](https://img.shields.io/badge/version-1.10.0-green.svg)
![SPFx 1.10.0](https://img.shields.io/badge/SPFx-1.10.0-green.svg)
![Node.js v10](https://img.shields.io/badge/Node.js-v10-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")

2
samples/react-bot-framework/README.md
View File

@ -29,7 +29,7 @@ where sample was demonstrated.
## Compatibility
![SPFx 1.10.0](https://img.shields.io/badge/version-1.10.0-green.svg)
![SPFx 1.10.0](https://img.shields.io/badge/SPFx-1.10.0-green.svg)
![Node.js v10](https://img.shields.io/badge/Node.js-v10-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")

2
samples/react-calendar/README.md
View File

@ -86,7 +86,7 @@ The Web Part checks the user's permissions for the View, Add, Edit, and Delete e
## Compatibility
![SPFx 1.10.0](https://img.shields.io/badge/version-1.10.0-green.svg)
![SPFx 1.10.0](https://img.shields.io/badge/SPFx-1.10.0-green.svg)
![Node.js v10](https://img.shields.io/badge/Node.js-v10-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")

2
samples/react-check-flows/README.md
View File

@ -11,7 +11,7 @@ The web part only displays the flows which are shared with the current user and
## Used SharePoint Framework Version
![version](https://img.shields.io/badge/version-1.9.1-green.svg)
![version](https://img.shields.io/badge/SPFx-1.9.1-green.svg)
## Minimal Path to Awesome

2
samples/react-company-stories/README.md
View File

@ -8,7 +8,7 @@ This web part allows you to add images to a SharePoint List, and renders them wi
## Used SharePoint Framework Version
![version](https://img.shields.io/badge/version-1.11-green.svg)
![version](https://img.shields.io/badge/SPFx-1.11-green.svg)
## Applies to

2
samples/react-custom-links/README.md
View File

@ -36,7 +36,7 @@ In this web part you can full customize the background and foreground color, fon
## Used SharePoint Framework Version
![1.11.0](https://img.shields.io/badge/version-1.11.0-green.svg)
![1.11.0](https://img.shields.io/badge/SPFx-1.11.0-green.svg)
## Applies to

2
samples/react-designpatterns-typescript/AbstractFactory/README.md
View File

@ -5,7 +5,7 @@ The abstract factory pattern will allow to define an interface for the creation
## Used SharePoint Framework Version
![drop](https://img.shields.io/badge/version-GA-green.svg)
![drop](https://img.shields.io/badge/SPFx-GA-green.svg)
## Applies to

2
samples/react-designpatterns-typescript/Builder/README.md
View File

@ -5,7 +5,7 @@ Builder pattern builds a complex object using simple objects and using a step by
## Used SharePoint Framework Version
![drop](https://img.shields.io/badge/version-GA-green.svg)
![drop](https://img.shields.io/badge/SPFx-GA-green.svg)
## Applies to

2
samples/react-designpatterns-typescript/FactoryMethod/README.md
View File

@ -9,7 +9,7 @@ Another definition which I liked more and fits perfectly my sample is the follo
## Used SharePoint Framework Version
![drop](https://img.shields.io/badge/version-GA-green.svg)
![drop](https://img.shields.io/badge/SPFx-GA-green.svg)
## Applies to

2
samples/react-designpatterns-typescript/Singleton/README.md
View File

@ -5,7 +5,7 @@ A singleton is a pattern that guarantees there is a single instance of an object
## Used SharePoint Framework Version
![drop](https://img.shields.io/badge/version-GA-green.svg)
![drop](https://img.shields.io/badge/SPFx-GA-green.svg)
## Applies to

90
samples/react-designpatterns-typescript/Solid/README.md
View File

@ -1,45 +1,45 @@
# SOLID Principles
## Summary
Blog post here: https://dev.to/kayis/is-react-solid-630
## Used SharePoint Framework Version
![drop](https://img.shields.io/badge/version-GA-green.svg)
## Applies to
* [SharePoint Framework](https://docs.microsoft.com/sharepoint/dev/spfx/sharepoint-framework-overview)
* [Office 365 tenant](https://docs.microsoft.com/sharepoint/dev/spfx/set-up-your-development-environment)
## Prerequisites
> N/A
## Solution
Solution|Author(s)
--------|---------
designpatterns-typescript\solid | [@levalencia](https://www.twitter.com/levalencia)
## Version history
Version|Date|Comments
-------|----|--------
1.0|May 15, 2018|Initial release
## 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.**
---
### SOLID Principles
>Conclusion:
<img src="https://telemetry.sharepointpnp.com/sp-dev-fx-webparts/samples/designpatterns-typescript/solid" />
# SOLID Principles
## Summary
Blog post here: https://dev.to/kayis/is-react-solid-630
## Used SharePoint Framework Version
![drop](https://img.shields.io/badge/SPFx-GA-green.svg)
## Applies to
* [SharePoint Framework](https://docs.microsoft.com/sharepoint/dev/spfx/sharepoint-framework-overview)
* [Office 365 tenant](https://docs.microsoft.com/sharepoint/dev/spfx/set-up-your-development-environment)
## Prerequisites
> N/A
## Solution
Solution|Author(s)
--------|---------
designpatterns-typescript\solid | [@levalencia](https://www.twitter.com/levalencia)
## Version history
Version|Date|Comments
-------|----|--------
1.0|May 15, 2018|Initial release
## 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.**
---
### SOLID Principles
>Conclusion:
<img src="https://telemetry.sharepointpnp.com/sp-dev-fx-webparts/samples/designpatterns-typescript/solid" />

146
samples/react-documents-detailslist/README.md
View File

@ -1,73 +1,73 @@
---
page_type: sample
products:
- office-sp
languages:
- javascript
- typescript
extensions:
contentType: samples
technologies:
- SharePoint Framework
platforms:
- react
createdDate: 11/1/2017 12:00:00 AM
---
# Documents Web Part
## Summary
This sample shows how to build web parts that display documents in accordance with the SharePoint Online modern experience. The code uses Office UI Fabric components on the top of SharePoint framework. The web parts implement filtering and sorting. Two data source approaches are demonstrated: items retrieved from the search index and real-time query to a document library.
![Demo](./assets/Preview.gif)
## Used SharePoint Framework Version
![1.10.0](https://img.shields.io/badge/version-1.10.0-green.svg)
## Applies to
* [SharePoint Framework](https://docs.microsoft.com/sharepoint/dev/spfx/sharepoint-framework-overview)
* [Office 365 tenant](https://docs.microsoft.com/sharepoint/dev/spfx/set-up-your-development-environment)
## Prerequisites
- Office 365 subscription with SharePoint Online.
- SharePoint Framework [development environment](https://docs.microsoft.com/sharepoint/dev/spfx/set-up-your-development-environment) already set up.
## Solution
Solution|Author(s)
--------|---------
react-documents|Dimcho Tsanov
react-documents (v2.0)|Harsha Vardhini ([harshagracy](https://twitter.com/harshagracy?s=20))
## Version history
Version|Date|Comments
-------|----|--------
1.0|October 13, 2017|Initial release
2.0|April 28, 2020|Initial release
## 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.**
---
## Minimal Path to Awesome
- Clone this repository
- in the command line run:
- `npm install`
- `gulp serve`
## Features
This Web Part illustrates the following concepts on top of the SharePoint Framework:
-Using React for building SharePoint Framework client-side web parts.
-Using Office UI Fabric React styles for building user experience consistent with SharePoint and Office.
-Using the SharePoint rest API for querying document library's files.
-Using the SharePoint rest API for retrieving documents from the search index.
-Passing web part properties to React components.
-Reusing single React component between two web parts.
<img src="https://telemetry.sharepointpnp.com/sp-dev-fx-webparts/samples/react-documents-detailslist" />
---
page_type: sample
products:
- office-sp
languages:
- javascript
- typescript
extensions:
contentType: samples
technologies:
- SharePoint Framework
platforms:
- react
createdDate: 11/1/2017 12:00:00 AM
---
# Documents Web Part
## Summary
This sample shows how to build web parts that display documents in accordance with the SharePoint Online modern experience. The code uses Office UI Fabric components on the top of SharePoint framework. The web parts implement filtering and sorting. Two data source approaches are demonstrated: items retrieved from the search index and real-time query to a document library.
![Demo](./assets/Preview.gif)
## Used SharePoint Framework Version
![1.10.0](https://img.shields.io/badge/SPFx-1.10.0-green.svg)
## Applies to
* [SharePoint Framework](https://docs.microsoft.com/sharepoint/dev/spfx/sharepoint-framework-overview)
* [Office 365 tenant](https://docs.microsoft.com/sharepoint/dev/spfx/set-up-your-development-environment)
## Prerequisites
- Office 365 subscription with SharePoint Online.
- SharePoint Framework [development environment](https://docs.microsoft.com/sharepoint/dev/spfx/set-up-your-development-environment) already set up.
## Solution
Solution|Author(s)
--------|---------
react-documents|Dimcho Tsanov
react-documents (v2.0)|Harsha Vardhini ([harshagracy](https://twitter.com/harshagracy?s=20))
## Version history
Version|Date|Comments
-------|----|--------
1.0|October 13, 2017|Initial release
2.0|April 28, 2020|Initial release
## 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.**
---
## Minimal Path to Awesome
- Clone this repository
- in the command line run:
- `npm install`
- `gulp serve`
## Features
This Web Part illustrates the following concepts on top of the SharePoint Framework:
-Using React for building SharePoint Framework client-side web parts.
-Using Office UI Fabric React styles for building user experience consistent with SharePoint and Office.
-Using the SharePoint rest API for querying document library's files.
-Using the SharePoint rest API for retrieving documents from the search index.
-Passing web part properties to React components.
-Reusing single React component between two web parts.
<img src="https://telemetry.sharepointpnp.com/sp-dev-fx-webparts/samples/react-documents-detailslist" />

2
samples/react-feature-framework/README.md
View File

@ -33,7 +33,7 @@ More details on the capability is available from the following article
* [Provision SharePoint assets with your solution package](https://docs.microsoft.com/sharepoint/dev/spfx/toolchain/provision-sharepoint-assets)
## Used SharePoint Framework Version
![drop](https://img.shields.io/badge/version-GA-green.svg)
![drop](https://img.shields.io/badge/SPFx-GA-green.svg)
## Applies to

2
samples/react-file-upload/README.md
View File

@ -6,7 +6,7 @@ The file upload web part allowing users to upload multiple files to a document l
![File upload web part built on the SharePoint Framework using React](./assets/SPFileUploadPreview.gif)
## Used SharePoint Framework Version
![drop](https://img.shields.io/badge/version-GA-green.svg)
![drop](https://img.shields.io/badge/SPFx-GA-green.svg)
## Applies to

2
samples/react-functional-component-with-data-fetch/README.md
View File

@ -8,7 +8,7 @@ This web part demonstrates building a React functional component that uses data
## Used SharePoint Framework Version
![drop](https://img.shields.io/badge/version-GA-green.svg)
![drop](https://img.shields.io/badge/SPFx-GA-green.svg)
## Applies to

2
samples/react-functional-component/README.md
View File

@ -8,7 +8,7 @@ This web part is intended to be easier to understand for new developers building
## Used SharePoint Framework Version
![drop](https://img.shields.io/badge/version-1.8.2-green.svg)
![drop](https://img.shields.io/badge/SPFx-1.8.2-green.svg)
## Applies to

2
samples/react-functional-stateful-component/README.md
View File

@ -8,7 +8,7 @@ This web part demonstrates building a React functional component that includes s
## Used SharePoint Framework Version
![drop](https://img.shields.io/badge/version-1.8.2-green.svg)
![drop](https://img.shields.io/badge/SPFx-1.8.2-green.svg)
## Applies to

2
samples/react-global-news-sp2019/README.md
View File

@ -33,7 +33,7 @@ Please go to https://newsapi.org to get more information.
## Used SharePoint Framework Version
![1.4.1](https://img.shields.io/badge/version-1.4.1-green.svg)
![1.4.1](https://img.shields.io/badge/SPFx-1.4.1-green.svg)
## Applies to

2
samples/react-graph-calendar/README.md
View File

@ -16,7 +16,7 @@ Web part is developed using below technologies
* Office UI Fabric
## Used SharePoint Framework Version
![drop](https://img.shields.io/badge/version-1.10-green.svg)
![drop](https://img.shields.io/badge/SPFx-1.10-green.svg)
## Applies to

2
samples/react-graph-reports/README.md
View File

@ -7,7 +7,7 @@ This sample describe a SPFx application which retrieve an office 365 usage repor
![Office 365 Usage Reports using Microsoft Graph API](./assets/react-graph-reports.gif)
## Used SharePoint Framework Version
![drop](https://img.shields.io/badge/version-1.8.0-green.svg)
![drop](https://img.shields.io/badge/SPFx-1.8.0-green.svg)
## Applies to

2
samples/react-hooks/README.md
View File

@ -7,7 +7,7 @@ Hooks is a new feature included in React version 16.8, with the new version of *
## Used SharePoint Framework Version
![drop](https://img.shields.io/badge/version-1.9.1-green.svg)
![drop](https://img.shields.io/badge/SPFx-1.9.1-green.svg)
## Applies to

2
samples/react-image-gallery/README.md
View File

@ -7,7 +7,7 @@ This sample describes an SPFx application which implements an image gallery with
![Filterable Image Gallery web part built on the SharePoint Framework using React](./assets/image-gallery.gif)
## Used SharePoint Framework Version
![drop](https://img.shields.io/badge/version-1.6.0-green.svg)
![drop](https://img.shields.io/badge/SPFx-1.6.0-green.svg)
## Applies to

2
samples/react-image-magnifier/README.md
View File

@ -21,7 +21,7 @@ This web part allow to magnify an image, displaying a resolution more detailed t
![site page header configurator web part](./assets/spfx-react-image-magnifier.gif)
## Used SharePoint Framework Version
![drop](https://img.shields.io/badge/version-GA-green.svg)
![drop](https://img.shields.io/badge/SPFx-GA-green.svg)
## Applies to

2
samples/react-image-slider-list-taxonomy-filter/README.md
View File

@ -10,7 +10,7 @@ This web part display the image in slider based on the filter of Taxonomy from P
![preview](./assets/ImageSlider.gif)
## Used SharePoint Framework Version
![drop](https://img.shields.io/badge/version-1.6.0-green.svg)
![drop](https://img.shields.io/badge/SPFx-1.6.0-green.svg)
## Applies to

2
samples/react-item-History/README.md
View File

@ -6,7 +6,7 @@ This listview command is used to show the past versions of the selected list ite
![Item History](./Capture.PNG)
## Used SharePoint Framework Version
![drop](https://img.shields.io/badge/version-GA-green.svg)
![drop](https://img.shields.io/badge/SPFx-GA-green.svg)
## Applies to

2
samples/react-manage-sitedesigns/README.md
View File

@ -89,7 +89,7 @@ Only users with Tenant Admin Role are allowed to managed tenant properties.
## Used SharePoint Framework Version
![SPFx 1.8.0](https://img.shields.io/badge/version-1.8.0-green.svg)
![SPFx 1.8.0](https://img.shields.io/badge/SPFx-1.8.0-green.svg)
## Applies to

2
samples/react-mobx-multiple-stores/README.md
View File

@ -8,7 +8,7 @@ A sample web part that uses the [Mobx](https://mobx.js.org/) library with multip
## Used SharePoint Framework Version
![drop](https://img.shields.io/badge/version-1.8.2-green.svg)
![drop](https://img.shields.io/badge/SPFx-1.8.2-green.svg)
## Applies to

2
samples/react-msgraph-extension/README.md
View File

@ -13,7 +13,7 @@ This sample shows how to managed Microsoft Graph Open Extension in SPFx. This ap
## Used SharePoint Framework Version
![drop](https://img.shields.io/badge/version-1.9.1-green.svg)
![drop](https://img.shields.io/badge/SPFx-1.9.1-green.svg)
## Applies to

2
samples/react-organisationchart/README.md
View File

@ -23,7 +23,7 @@ A simple Organisation Chart web part using Office UI Fabric, React, REST API bat
![Organisation Chart for the current user running in local Workbench](./assets/orgchart-mock.png)
## Used SharePoint Framework Version
![drop](https://img.shields.io/badge/version-GA-green.svg)
![drop](https://img.shields.io/badge/SPFx-GA-green.svg)
## Applies to

2
samples/react-peoplepicker/README.md
View File

@ -21,7 +21,7 @@ SharePoint Framework solution with the Office UI Fabric People Picker, the clien
![React-People-Picker-gif](./assets/Preview.gif)
## Used SharePoint Framework Version
![drop](https://img.shields.io/badge/version-GA-green.svg)
![drop](https://img.shields.io/badge/SPFx-GA-green.svg)
## Applies to

2
samples/react-pnpjs-project-online/README.md
View File

@ -11,7 +11,7 @@ Custom PnPjs module: [pnpjs-project-online-package](https://www.npmjs.com/packag
## Used SharePoint Framework Version
![drop](https://img.shields.io/badge/version-1.8.2-green.svg)
![drop](https://img.shields.io/badge/SPFx-1.8.2-green.svg)
## Applies to

2
samples/react-property-bag-editor/README.md
View File

@ -6,7 +6,7 @@ A set of webparts that lets you set property bag settings on site collections an
[picture of the web part in action]
## Used SharePoint Framework Version
![drop](https://img.shields.io/badge/version-GA-green.svg)
![drop](https://img.shields.io/badge/SPFx-GA-green.svg)
## Applies to

2
samples/react-quotes/README.md
View File

@ -8,7 +8,7 @@ This web part displays a quote of the day by querying a third-party api or can d
## Used SharePoint Framework Version
![drop](https://img.shields.io/badge/version-1.9.1-green.svg)
![drop](https://img.shields.io/badge/SPFx-1.9.1-green.svg)
## Applies to

2
samples/react-recaptcha/README.md
View File

@ -11,7 +11,7 @@ business requirement if you need to implement CAPTCHA in SPFx webpart.
## Used SharePoint Framework Version
![drop](https://img.shields.io/badge/version-1.9.1-green.svg)
![drop](https://img.shields.io/badge/SPFx-1.9.1-green.svg)
## Applies to

2
samples/react-redux-async-immutablejs/README.md
View File

@ -25,7 +25,7 @@ More details in my post here: [Using Redux Async Actions and ImmutableJS in Shar
![](https://raw.githubusercontent.com/vman/sp-dev-fx-webparts/master/samples/react-redux-async-immutablejs/assets/react-redux-immutable.gif)
## Used SharePoint Framework Version
![drop](https://img.shields.io/badge/version-GA-green.svg)
![drop](https://img.shields.io/badge/SPFx-GA-green.svg)
## Applies to

2
samples/react-reduxform/README.md
View File

@ -9,7 +9,7 @@ Sample web part to demonstrate the use of [Redux-Form](https://github.com/erikra
## Used SharePoint Framework Version
![drop](https://img.shields.io/badge/version-1.4.1-green.svg)
![drop](https://img.shields.io/badge/SPFx-1.4.1-green.svg)
## Applies to

2
samples/react-site-provisioning-manager/README.md
View File

@ -9,7 +9,7 @@ You can also find out how you can use React Hooks to manage the state of your ap
![react-provisioning-manager](./assets/screenshot.gif)
## Used SharePoint Framework Version
![drop](https://img.shields.io/badge/version-1.9-green.svg)
![drop](https://img.shields.io/badge/SPFx-1.9-green.svg)
## Applies to

2
samples/react-sitepages-metadata/README.md
View File

@ -10,7 +10,7 @@ Solution provides an enhancement to SitePages library that enables updating exis
![SitePages library CommandSet](./assets/demo-commandset.gif)
## Used SharePoint Framework Version
![drop](https://img.shields.io/badge/version-GA-green.svg)
![drop](https://img.shields.io/badge/SPFx-GA-green.svg)
## Applies to

2
samples/react-teams-tabs-pnpjs/README.md
View File

@ -13,7 +13,7 @@ A SPFx WebPart using [@pnp/graph/teams](https://pnp.github.io/pnpjs/graph/docs/t
## Used SharePoint Framework Version
![drop](https://img.shields.io/badge/version-1.9.1-green.svg)
![drop](https://img.shields.io/badge/SPFx-1.9.1-green.svg)
## Applies to

2
samples/react-themes/README.md
View File

@ -27,7 +27,7 @@ The Section Theme web part illustrates how to use theme variant variables to sty
## Used SharePoint Framework Version
![SPFx 1.11.0](https://img.shields.io/badge/version-1.11.0-green.svg)
![SPFx 1.11.0](https://img.shields.io/badge/SPFx-1.11.0-green.svg)
## Applies to

2
samples/react-tinymce/README.md
View File

@ -24,7 +24,7 @@ editor is powered by the community.
![picture of the web part in action](./assets/preview.gif)
## Used SharePoint Framework Version
![drop](https://img.shields.io/badge/version-1.4.1-green.svg)
![drop](https://img.shields.io/badge/SPFx-1.4.1-green.svg)
## Applies to

2
samples/react-tour-pnpjs/README.md
View File

@ -19,7 +19,7 @@ The property pane shows dinamically all webparts in the current page, using [PnP
## Used SharePoint Framework Version
![drop](https://img.shields.io/badge/version-1.9.1-green.svg)
![drop](https://img.shields.io/badge/SPFx-1.9.1-green.svg)
## Applies to

2
samples/react-webcam/README.md
View File

@ -12,7 +12,7 @@ This is sample web part to showcase how to open webcam and take photo in SPFx we
## Used SharePoint Framework Version
![drop](https://img.shields.io/badge/version-1.9.1-green.svg)
![drop](https://img.shields.io/badge/SPFx-1.9.1-green.svg)
## Applies to

4
samples/react-webhooks-realtime/README.md
View File

@ -25,7 +25,7 @@ The libraries used by this web part are Socket.io, sp pnp js, moment.
![Architecture](./assets/Architecture.png)
## Used SharePoint Framework Version
![drop](https://img.shields.io/badge/version-GA-green.svg)
![drop](https://img.shields.io/badge/SPFx-GA-green.svg)
## Applies to
@ -70,4 +70,4 @@ This Web Part illustrates the following concepts on top of the SharePoint Framew
- How to leverage the capabilities of SharePoint webhooks.
<img src="https://telemetry.sharepointpnp.com/sp-dev-fx-webparts/samples/react-webhooks-realtime" />
<img src="https://telemetry.sharepointpnp.com/sp-dev-fx-webparts/samples/react-webhooks-realtime" />

2
samples/react-word-game/README.md
View File

@ -8,7 +8,7 @@ A fun game where you unscramble the words before the time runs out. It stores ev
## Used SharePoint Framework Version
![1.11.0](https://img.shields.io/badge/version-1.11.0-green.svg)
![1.11.0](https://img.shields.io/badge/SPFx-1.11.0-green.svg)
## Applies to

2
samples/react-youtube/README.md
View File

@ -23,7 +23,7 @@ This web part allows to search and view the YouTube videos, across the YouTube A
## Used SharePoint Framework Version
![SPFx 1.11](https://img.shields.io/badge/version-1.11-green.svg)
![SPFx 1.11](https://img.shields.io/badge/SPFx-1.11-green.svg)
## Applies to

2
samples/react-zpl-viewer/README.md
View File

@ -8,7 +8,7 @@ This web part will allow a user to select a text file contatining zpl which is u
## Used SharePoint Framework Version
![drop](https://img.shields.io/badge/version-1.9.1-green.svg)
![drop](https://img.shields.io/badge/SPFx-1.9.1-green.svg)
## Applies to

2
samples/vue-js-org-chart/README.md
View File

@ -7,7 +7,7 @@ A simple Organisation Chart web part using Office UI Fabric, VueJS, REST API.
## Used SharePoint Framework Version
![drop](https://img.shields.io/badge/version-1.8.1-green.svg)
![drop](https://img.shields.io/badge/SPFx-1.8.1-green.svg)
## Applies to

2
tutorials/tutorial-getting-started/README.md
View File

@ -15,7 +15,7 @@ This sub folder contains client-side projects includes the web parts detailed in
You can also find other SharePoint Framework related videos from the [SharePoint PnP YouTube Channel](https://aka.ms/SPPnP-Videos).
## Used SharePoint Framework Version
![GA](https://img.shields.io/badge/version-GA-green.svg)
![GA](https://img.shields.io/badge/SPFx-GA-green.svg)
## Applies to