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

Added links to issue templates

This commit is contained in:
Hugo Bernier 2021-04-26 02:08:59 -04:00
parent 2122b66687
commit 82598c094f
89 changed files with 608 additions and 370 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

13
samples/aad-api-spo-cookie/README.md
View File

@ -25,7 +25,8 @@ Sample web part showing the list of latest orders retrieved from a custom API se
![Web part showing the list of latest orders retrieved from a custom API secured with AAD](./assets/preview-orders.png)
## Used SharePoint Framework Version
## Used SharePoint Framework Version
![drop](https://img.shields.io/badge/drop-GA-green.svg)
## Applies to
@ -46,6 +47,7 @@ Version|Date|Comments
1.0.0|May 5, 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.**
---
@ -227,4 +229,13 @@ This sample illustrates the following concepts on top of the SharePoint Framewor
- manipulating DOM without using JavaScript libraries
- chaining promises
## Support
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=aad-api-spo-cookie&authors=@waldekmastykarz&title=aad-api-spo-cookie%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=aad-api-spo-cookie&authors=@waldekmastykarz&title=aad-api-spo-cookie%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=aad-api-spo-cookie&authors=@waldekmastykarz&title=aad-api-spo-cookie%20-%20).
<img src="https://telemetry.sharepointpnp.com/sp-dev-fx-webparts/samples/aad-api-spo-cookie" />

17
samples/angular-aad-webapi/README.md
View File

@ -24,6 +24,7 @@ Sample SharePoint Framework client-side web part illustrating communication with
![Sample showing the client-side web part](./assets/preview.jpg)
## Used SharePoint Framework Version
![drop](https://img.shields.io/badge/drop-ga-green.svg)
## Applies to
@ -45,11 +46,13 @@ Version|Date|Comments
1.0|December 21, 2016|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.**
---
## Configuration Bliss
- clone this repo
### Create custom Web API site
@ -57,6 +60,7 @@ Version|Date|Comments
- in the Azure Management Portal at https://portal.azure.com create a new API App
### Secure custom Web API with AAD
- in the Azure Management Portal at https://manage.windowsazure.com navigate to Azure Active Directory and register a new web application:
- as the name use anything you want
- as the sign-in URL use the URL of the previously created API App
@ -97,8 +101,17 @@ Version|Date|Comments
> Note: When you first login, the screen will refresh several times. I tried using the popUp feature with adal,
> however, this caused a infinite digest loop. Also ideally you should be able to make the calls to both the Graph
> API and your custom Web API without having to acquire the bearer tokens first, however, what happens is the app
> aquires the bearer token and then never finishes the call, I believe that is because the app is reloading, not quite
> acquires the bearer token and then never finishes the call, I believe that is because the app is reloading, not quite
> sure how to fix that yet. There is definitely room to improved the user experience but the main logic and functionality
> is here. Thanks!
<img src="https://telemetry.sharepointpnp.com/sp-dev-fx-webparts/samples/angular-aad-webapi" />
## Support
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=angular-aad-webapi&authors=@davidhartman&title=angular-aad-webapi%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=angular-aad-webapi&authors=@davidhartman&title=angular-aad-webapi%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=angular-aad-webapi&authors=@davidhartman&title=angular-aad-webapi%20-%20).
<img src="https://telemetry.sharepointpnp.com/sp-dev-fx-webparts/samples/angular-aad-webapi" />

19
samples/angular-greeting/README.md
View File

@ -19,14 +19,15 @@ extensions:
## Summary
This sample Web Part illustrating using AngularJS with the SharePoint Framework. This is Greeting webpart which shows greeting to the current logged in user.
This sample Web Part illustrating using AngularJS with the SharePoint Framework. This is Greeting web part which shows greeting to the current logged in user.
![AngularJS Greetings Webpart SharePoint Framework client-side web part built using AngularJS](./assets/captured.gif)
![AngularJS Greetings Web part SharePoint Framework client-side web part built using AngularJS](./assets/captured.gif)
Final outcome:
![AngularJS Greetings Webpart SharePoint Framework client-side web part built using AngularJS](./assets/preview.PNG)
![AngularJS Greetings Web part SharePoint Framework client-side web part built using AngularJS](./assets/preview.PNG)
## Used SharePoint Framework Version
![drop](https://img.shields.io/badge/drop-GA-green.svg)
## Applies to
@ -44,9 +45,10 @@ angular-todo|Gaurav Goyal (MCSD, BizPortals Solutions, @gauravgoyal_5)
Version|Date|Comments
-------|----|--------
1.0|Feb 15, 2020|Initial release submittion
1.0|Feb 15, 2020|Initial release submission
## 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.**
---
@ -71,4 +73,13 @@ This web part illustrates the following concepts on top of the SharePoint Framew
* using conditional rendering for one-time web part setup
* passing web part configuration to AngularJS and reacting to configuration changes
## Support
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=angular-greeting&authors=@gauravgoyal5&title=angular-greeting%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=angular-greeting&authors=@gauravgoyal5&title=angular-greeting%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=angular-greeting&authors=@gauravgoyal5&title=angular-greeting%20-%20).
<img src="https://telemetry.sharepointpnp.com/sp-dev-fx-webparts/samples/angular-greeting" />

9
samples/angular-migration/README.md
View File

@ -43,6 +43,7 @@ Version|Date|Comments
1.0.0|October 21, 2016|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.**
---
@ -51,4 +52,12 @@ Follow the setup instructions:
- [Angular application](./angular-todo/README.md)
- [SharePoint Framework client-side web part](./angular-todo-webpart/README.md)
## Support
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=angular-migration&authors=@waldekmastykarz&title=angular-migration%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=angular-migration&authors=@waldekmastykarz&title=angular-migration%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=angular-migration&authors=@waldekmastykarz&title=angular-migration%20-%20).
![](https://telemetry.sharepointpnp.com/sp-dev-fx-webparts/samples/angular-migration)

6
samples/angular-msgraph/README-Localized/README-fr-fr.md
View File

@ -17,10 +17,10 @@ extensions:
- AngularJS
createdDate: 2/16/2017 12:00:00 AM
---
Composant graphique WebPart Angular MS Graph créé avec Angular v1.x
Composant graphique Web Part Angular MS Graph créé avec Angular v1.x
## Résumé
Il s’agit d’un exemple de composant WebPart Angular MS Graph qui se connecte à Microsoft Graph et extrait des informations SharePoint de votre client.
Il s’agit d’un exemple de composant Web Part Angular MS Graph qui se connecte à Microsoft Graph et extrait des informations SharePoint de votre client.
Il extrait tout d’abord la collection de sites racine (actuellement limitée par Microsoft Graph),
puis affiche toutes les listes associées au site, suivies de tous les éléments dans la liste.
@ -94,4 +94,4 @@ Version|Date|Commentaires
1. Remplacez les valeurs d’espace réservé **aad**et **redirect_uri** par l’ID d’application et
redirigez l’URL de votre application Azure inscrit dans le fichier GraphHelper.ts sous src-> angularMsGraph-> GraphHelper.ts
<img src="https://telemetry.sharepointpnp.com/sp-dev-fx-webparts/samples/angular-msgraph" />
<img src="https://telemetry.sharepointpnp.com/sp-dev-fx-webparts/samples/angular-msgraph" />

14
samples/angular-msgraph/README.md
View File

@ -20,6 +20,7 @@ extensions:
# Angular MS Graph Web Part Built with Angular v1.x
## Summary
This is a sample MS Graph web part that connects to Microsoft Graph and pulls SharePoint information from your
tenant. It will first pull the root site collection (currently a limitation by Microsoft Graph), then it will
display all the lists associated with the site followed by all the items inside the list.
@ -38,6 +39,7 @@ display all the lists associated with the site followed by all the items inside
> Note: I currently only have models developed for the Announcements list. All other lists will currently generate errors.
## Used SharePoint Framework Version
![drop](https://img.shields.io/badge/drop-ga-green.svg)
## Applies to
@ -59,6 +61,7 @@ Version|Date|Comments
1.0|February 6th, 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.**
---
@ -91,7 +94,18 @@ Version|Date|Comments
8. Choose **Save**.
## Configuring the App
1. Replace the **aad** and **redirect_uri** placeholder values with the application ID and redirect url of your registered Azure application in the GraphHelper.ts file Under
src -> angularMsGraph -> GraphHelper.ts
## Support
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=angular-msgraph&authors=@davidhartman&title=angular-msgraph%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=angular-msgraph&authors=@davidhartman&title=angular-msgraph%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=angular-msgraph&authors=@davidhartman&title=angular-msgraph%20-%20).
<img src="https://telemetry.sharepointpnp.com/sp-dev-fx-webparts/samples/angular-msgraph" />

10
samples/angular-multipage/README.md
View File

@ -26,6 +26,7 @@ This sample contains a poll web part allowing users to vote and view the results
![Poll web part built on the SharePoint Framework using Angular](./assets/poll-preview.gif)
## Used SharePoint Framework Version
![drop](https://img.shields.io/badge/drop-drop5-red.svg)
## Applies to
@ -46,6 +47,7 @@ Version|Date|Comments
1.0.0|November 1, 2016|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.**
---
@ -98,4 +100,12 @@ This sample illustrates the following concepts on top of the SharePoint Framewor
- reading and updating SharePoint list items using Angular
- showing charts using [Chart.js](http://www.chartjs.org) and [Angular Chart directives](https://jtblin.github.io/angular-chart.js/)
## Support
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=angular-multipage&authors=@waldekmastykarz&title=angular-multipage%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=angular-multipage&authors=@waldekmastykarz&title=angular-multipage%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=angular-multipage&authors=@waldekmastykarz&title=angular-multipage%20-%20).
<img src="https://telemetry.sharepointpnp.com/sp-dev-fx-webparts/samples/angular-multipage" />

24
samples/angular-ngofficeuifabric-file-upload/README.md
View File

@ -14,16 +14,18 @@ extensions:
- AngularJS
createdDate: 6/19/2017 12:00:00 AM
---
# Spfx Webpart: File Upload using AngularJs
# SPFx Web part: File Upload using AngularJs
## Summary
File Update/Delete webpart using AngularJs and ngOfficeUIFabric with the SharePoint Framework.
File Update/Delete web part using AngularJs and ngOfficeUIFabric with the SharePoint Framework.
![File Upload using Angular](http://i.imgur.com/U5qg4II.png)
Edit webpart properties to set Document library Name. Initially, It has been set to `Documents`.
Edit web part properties to set Document library Name. Initially, It has been set to `Documents`.
## Used SharePoint Framework Version
## Used SharePoint Framework Version
![drop](https://img.shields.io/badge/version-GA-green.svg)
## Applies to
@ -35,7 +37,8 @@ Edit webpart properties to set Document library Name. Initially, It has been set
Solution|Author(s)
--------|---------
angular-ngofficeuifabric-file-upload | Atish Kumar Dipongkor (MVP, Office Development), Gautam Sheth(SharePoint Consultant,RapidCircle,@gautamdsheth)
angular-ngofficeuifabric-file-upload | [Atish Kumar Dipongkor](https://github.com/dipongkor) (MVP, Office Development)
angular-ngofficeuifabric-file-upload | [Gautam Sheth](https://github.com/gautamdsheth) (SharePoint Consultant,RapidCircle,@gautamdsheth)
## Version history
@ -46,6 +49,7 @@ Version|Date|Comments
2.1|July 19, 2017|Bug fix
## 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.**
---
@ -59,10 +63,20 @@ Version|Date|Comments
- `gulp serve --nobrowser`
## Features
This Web Part illustrates the following concepts on top of the SharePoint Framework & AngularJs:
- `BaseService`: By injecting this Angular Service, GET, POST, UPDATE & DELETE requests can be made easily. It's a resuable service.
- `CustomFileChange`: It's a custom Angular directive. It binds the file with model on file change event.
- `IsoToDateString`: It's a custom Angular filter. It formats ISO date string to `{0:yyyy}-{0:MM}-{0:dd}` format.
## Support
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=angular-ngofficeuifabric-file-upload&authors=@waldekmastykarz&title=angular-ngofficeuifabric-file-upload%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=angular-ngofficeuifabric-file-upload&authors=@waldekmastykarz&title=angular-ngofficeuifabric-file-upload%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=angular-ngofficeuifabric-file-upload&authors=@waldekmastykarz&title=angular-ngofficeuifabric-file-upload%20-%20).
<img src="https://telemetry.sharepointpnp.com/sp-dev-fx-webparts/samples/angular-ngofficeuifabric-file-upload" />

14
samples/angular-ngofficeuifabric-todo/README.md
View File

@ -26,7 +26,8 @@ You can find a video recording walk-through this sample from [SharePoint PnP You
![Sample To do SharePoint Framework Client-Side Web Part built using Angular and ngOfficeUIFabric](./assets/preview.png)
## Used SharePoint Framework Version
## Used SharePoint Framework Version
![drop](https://img.shields.io/badge/drop-drop2-red.svg)
## Applies to
@ -38,7 +39,7 @@ You can find a video recording walk-through this sample from [SharePoint PnP You
Solution|Author(s)
--------|---------
angular-ngofficeuifabric-todo|Waldek Mastykarz (MVP, Rencore, @waldekm)
angular-ngofficeuifabric-todo|[Waldek Mastykarz](https://github.com/waldekmastykarz) (MVP, Rencore, @waldekm)
## Version history
@ -48,6 +49,7 @@ Version|Date|Comments
1.0|August 29, 2016|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.**
---
@ -75,4 +77,12 @@ This web part illustrates the following concepts on top of the SharePoint Framew
- using conditional rendering for one-time web part setup
- passing web part configuration to Angular and reacting to configuration changes
## Support
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=angular-ngofficeuifabric-todo&authors=@waldekmastykarz&title=angular-ngofficeuifabric-todo%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=angular-ngofficeuifabric-todo&authors=@waldekmastykarz&title=angular-ngofficeuifabric-todo%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=angular-ngofficeuifabric-todo&authors=@waldekmastykarz&title=angular-ngofficeuifabric-todo%20-%20).
<img src="https://telemetry.sharepointpnp.com/sp-dev-fx-webparts/samples/angular-ngofficeuifabric-todo" />

20
samples/angular-search/README.md
View File

@ -16,6 +16,7 @@ extensions:
# Search Client-Side Web Part Built with Angular v1.x
## Summary
This is a sample search web part that illustrates how you can use Angular within the new SharePoint Framework
![Sample of the search web part](./assets/angularSearch.png)
@ -23,15 +24,16 @@ This app uses the SharePoint Search REST API endpoint to query listitems of a sp
Ideally instead of selecting a content type for the search you would want to select a Result Source, but currently Result Sources are not
available through SharePoint's REST API.
The logic for querying the SharePoint Content Types in the properties of the webpart was in part due to Chris O'Brien and this [blog post](http://www.sharepointnutsandbolts.com/2016/09/sharepoint-framework-spfx-web-part-properties-dynamic-dropdown.html?m=0)
The logic for querying the SharePoint Content Types in the properties of the web part was in part due to Chris O'Brien and this [blog post](http://www.sharepointnutsandbolts.com/2016/09/sharepoint-framework-spfx-web-part-properties-dynamic-dropdown.html?m=0)
> Note: In order to use the ngOfficeFabric code I use the ModuleLoader to load newer source files than the currently Office Fabric UI in SharePoint Online, which will cause many of the icons not to load properly on the SharePoint Page this webpart is added to.
> Note: In order to use the ngOfficeFabric code I use the ModuleLoader to load newer source files than the currently Office Fabric UI in SharePoint Online, which will cause many of the icons not to load properly on the SharePoint Page this web part is added to.
> Note: For the display template of the search results I'm currently using the Office Fabric UI List template. Ideally I was hoping to use the DocumentCard Component, however, that is not yet available through the ngOfficUIFabric.
> Note: The List display is not currently displaying correctly because there appears to be an issue when loading https://appsforoffice.microsoft.com/fabric/2.6.1/fabric.components.min.css which causes the dropdowns in the property pane not to work.
## Used SharePoint Framework Version
## Used SharePoint Framework Version
![drop](https://img.shields.io/badge/drop-rc0-green.svg)
## Applies to
@ -43,7 +45,7 @@ The logic for querying the SharePoint Content Types in the properties of the web
Solution|Author(s)
--------|---------
angular-search|David Hartman ([Slalom](https://slalom.com))
angular-search|[David Hartman](https://github.com/davidhartman) ([Slalom](https://slalom.com))
## Version history
@ -52,6 +54,7 @@ Version|Date|Comments
1.0|February 4th, 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.**
---
@ -72,4 +75,13 @@ Version|Date|Comments
> and not by id because then I would get everything that inherits from that content type. I only want the
> the results for a specific content type and not everything that inherits that content type as well
## Support
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=angular-search&authors=@davidhartman&title=angular-search%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=angular-search&authors=@davidhartman&title=angular-search%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=angular-search&authors=@davidhartman&title=angular-search%20-%20).
<img src="https://telemetry.sharepointpnp.com/sp-dev-fx-webparts/samples/angular-search" />

12
samples/angular-todo/README.md
View File

@ -23,6 +23,7 @@ Sample Web Part illustrating using Angular with the SharePoint Framework.
![Sample To do SharePoint Framework client-side web part built using Angular](./assets/preview.png)
## Used SharePoint Framework Version
![drop](https://img.shields.io/badge/drop-GA-green.svg)
## Applies to
@ -34,7 +35,7 @@ Sample Web Part illustrating using Angular with the SharePoint Framework.
Solution|Author(s)
--------|---------
angular-todo|Waldek Mastykarz (MVP, Rencore, @waldekm)
angular-todo|[Waldek Mastykarz](https://github.com/waldekmastykarz) (MVP, Rencore, @waldekm)
## Version history
@ -43,6 +44,7 @@ Version|Date|Comments
1.0|March 10, 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.**
---
@ -67,4 +69,12 @@ This web part illustrates the following concepts on top of the SharePoint Framew
* using conditional rendering for one-time web part setup
* passing web part configuration to Angular and reacting to configuration changes
## Support
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=angular-todo&authors=@waldekmastykarz&title=angular-todo%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=angular-todo&authors=@waldekmastykarz&title=angular-todo%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=angular-todo&authors=@waldekmastykarz&title=angular-todo%20-%20).
<img src="https://telemetry.sharepointpnp.com/sp-dev-fx-webparts/samples/angular-todo" />

21
samples/angular2-prototype/README.md
View File

@ -16,17 +16,20 @@ extensions:
# Angular2 Web Part Prototype
## Note to developers
> This web part sample is currently in prototype phase and subject to change.
This sample is not currently supported for use in production environments as unexpected behavior may occur.
It is provided as guidance for building Angular2 web parts in the SharePoint Framework environment.
This sample is a work in progress and it will be updated as advances in stability are made.
## Summary
Sample To Do Web Part built with Angular2. This sample illustrates how you can use Angular2 with the SharePoint Framework.
![Sample of the search web part](./assets/preview.png)
## Used SharePoint Framework Version
![drop](https://img.shields.io/badge/drop-RC0-green.svg)
## Applies to
@ -42,7 +45,8 @@ Sample To Do Web Part built with Angular2. This sample illustrates how you can u
Solution|Author(s)
--------|---------
angular2-prototype | Manish Garg, Daniel Gaeta
angular2-prototype | Manish Garg
angular2-prototype | [Daniel Gaeta](https://github.com/dgaeta)
## Version history
@ -53,6 +57,7 @@ Version|Date|Comments
0.1|August 14, 2016|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.**
---
@ -68,12 +73,14 @@ Version|Date|Comments
- Test out the web part
## Features
This is a sample client-side web part built on the SharePoint Framework using Angular2 for building the UI component of the web part.
The SharePoint Framework is designed to allow developers to build web parts using the web framework of their choice.
In this prototype we make use of the Angular2 framework. The BaseAngular2WebPart class tries to abstract some of the Angular2 integration.
This way the developer can focus on their web part code and not worry about Angular2 integration.
### Protoype anomalies
Please note, this is an early prototype and we are still trying to learn the best practices of the Angular2 framework.
Angular2 uses TypeScript decorators to annotate classes as Components and Modules.
And also recommends that there be only one NgModule per application.
@ -83,13 +90,25 @@ Though this is not a best practice, it helps build web parts successfully.
We are trying to find better solutions to this problem. Specially, how to avoid creating a separate NgModule for each web part.
### Adding functionality
To add functionality to this web part prototype the main file to edit is `TodoWebPart.ts`, here there are comments to help you alter the prototype.
### Web part concepts
The web part displays a title, button to add to dos and a button to print the to do items to the console.
This web part illustrates the following concepts on top of the SharePoint Framework:
- Changing a property (the title) of a web part using the PropertyPane
- Manipulating properties in the Angular2 component class and saving to web part’s property bag
## Support
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=angular2-prototype=@dgaeta&title=angular-todo%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=angular2-prototype=@dgaeta&title=angular-todo%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=angular2-prototype=@dgaeta&title=angular-todo%20-%20).
<img src="https://telemetry.sharepointpnp.com/sp-dev-fx-webparts/samples/angular2-prototype" />

13
samples/angularelements-helloworld/README.md
View File

@ -20,6 +20,7 @@ extensions:
Set of sample web parts illustrating how to use Angular Elements in the SharePoint Framework.
## Used SharePoint Framework Version
![SPFx 1.4.1](https://img.shields.io/badge/spfx-1.4.1-green.svg)
## Applies to
@ -31,7 +32,8 @@ Set of sample web parts illustrating how to use Angular Elements in the SharePoi
Solution|Author(s)
--------|---------
angularelements-helloworld|Waldek Mastykarz (MVP, Rencore, @waldekm), Sébastien Levert (MVP, Valo, @sebastienlevert)
angularelements-helloworld|[Waldek Mastykarz](https://github.com/waldekmastykarz) (MVP, Rencore, @waldekm),
angularelements-helloworld|[Sébastien Levert](https://github.com/sebastienlevert) (MVP, Valo, @sebastienlevert)
## Version history
@ -40,6 +42,7 @@ Version|Date|Comments
1.0|June 1, 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.**
---
@ -67,4 +70,12 @@ This web part illustrates the following concepts on top of the SharePoint Framew
* calling the SharePoint REST API from an Angular Element using PnPjs
* calling the Microsoft Graph from an Angular Element using PnPjs
## Support
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=angularelements-helloworld=@waldekmastykarz, @sebastienlevert&title=angular-todo%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=angularelements-helloworld=@waldekmastykarz, @sebastienlevert&title=angular-todo%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=angularelements-helloworld=@waldekmastykarz, @sebastienlevert&title=angular-todo%20-%20).
<img src="https://telemetry.sharepointpnp.com/sp-dev-fx-webparts/samples/angularelements-helloworld" />

13
samples/angularelements-html-templatefile/README.md
View File

@ -21,7 +21,8 @@ extensions:
A sample web part illustrating how to use Angular Elements in the SharePoint Framework with the help of separate template HTML File.
## Used SharePoint Framework Version
## Used SharePoint Framework Version
![drop](https://img.shields.io/badge/drop-1.4.1-green.svg)
## Applies to
@ -33,7 +34,7 @@ A sample web part illustrating how to use Angular Elements in the SharePoint Fra
Solution|Author(s)
--------|---------
angularelements-html-templatefile| Jayakumar Balasubramaniam (C# Corner MVP, Hubfly, @jayakumrB)
angularelements-html-templatefile| [Jayakumar Balasubramaniam](https://github.com/JayakumarB) (C# Corner MVP, Hubfly, [@jayakumrB](https://twitter.com/jayakumrB))
## Version history
@ -84,5 +85,13 @@ build.rig.addPostTypescriptTask(tsInlines);
//************END: Added to handle Template file url ************/
```
## Support
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=angularelements-html-templatefile=@JayakumarB&title=angular-todo%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=angularelements-html-templatefile=@JayakumarB&title=angular-todo%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=angularelements-html-templatefile=@JayakumarB&title=angular-todo%20-%20).
<img src="https://telemetry.sharepointpnp.com/sp-dev-fx-webparts/samples/angularelements-helloworld" />

16
samples/bootstrap-slider/README.md
View File

@ -17,6 +17,7 @@ extensions:
# Bootstrap Slider Built with jQuery v1.x and Boostrap v3.x
## Summary
Sample bootstrap slider which pulls the slides from a list inside the SharePoint site. The list is automatically deployed once the app is installed in the SharePoint site.
![First Slider Image](./assets/slider_image_1.png)
@ -26,6 +27,7 @@ Sample bootstrap slider which pulls the slides from a list inside the SharePoint
![Deployed List](./assets/List.png)
## Used SharePoint Framework Version
![drop](https://img.shields.io/badge/drop-ga-green.svg)
## Applies to
@ -37,7 +39,7 @@ Sample bootstrap slider which pulls the slides from a list inside the SharePoint
Solution|Author(s)
--------|---------
bootstrap-slider|David Hartman ([Slalom](https://slalom.com))
bootstrap-slider|[David Hartman](https://github.com/davidhartman) ([Slalom](https://slalom.com))
## Version History
@ -46,11 +48,13 @@ Version|Date|Comments
1.0|April 25th, 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.**
---
## Configuration Bliss
- clone this repo
- in write-manifests.json
- fill in the correct CDN path
@ -64,7 +68,15 @@ Version|Date|Comments
- add the app to your SharePoint Online site
- When the app is finished installing you should see a **SPFx List** in the **Site Contents** of the site
![Deployed List](./assets/List.png)
- Add items to the **SPFx List** in order for slides to display in the webpart
- Add items to the **SPFx List** in order for slides to display in the web part
## Support
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=bootstrap-slider=@davidhartman&title=angular-todo%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=bootstrap-slider=@davidhartman&title=angular-todo%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=bootstrap-slider=@davidhartman&title=angular-todo%20-%20).
<img src="https://telemetry.sharepointpnp.com/sp-dev-fx-webparts/samples/bootstrap-slider" />

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

@ -61,6 +61,7 @@ Version|Date|Comments
## 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.**
@ -85,7 +86,7 @@ This Web Part illustrates the following concepts on top of the SharePoint Framew
- the titles webs in current sitecollection
- titles of the lists in the selected web
- fields of a selected list
* Use of a third party control(sp-client-custom-fields) for selecting webpart foregroud and background colors.
* Use of a third party control(sp-client-custom-fields) for selecting web part foreground and background colors.
* Use of switch, slider controls to configure slider speed and auto scrolling.
* Using a javascript slider.
* Fetching the user details from User Profile service like user designation, user profile image.

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

@ -7,6 +7,7 @@
##
![directory](/samples/js-myflows/assets/MyFlows.gif)
@ -22,6 +23,7 @@
## Used SharePoint Framework Version
![drop](https://img.shields.io/badge/version-1.8.2-green.svg)
## Applies to
@ -31,7 +33,7 @@
* [Office 365 tenant](https://docs.microsoft.com/sharepoint/dev/spfx/set-up-your-development-environment)
## WebPart Properties
## Web Part Properties
Property |Type|Required| comments
--------------------|----|--------|----------
@ -56,6 +58,7 @@ Version|Date|Comments
## 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.**
---

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

@ -1,14 +1,17 @@
# Dynamic Scalable Vector Graphics (SVG) image using propertie
## Summary
An SPFx webpart that displays a Scalable Vector Graphics (SVG) image using properties to customize how it is rendered. The webpart utilizes the PnP SPFx Property Controls package (specifially the SpinButton and ColorPicker) to set these properties.
An SPFx web part that displays a Scalable Vector Graphics (SVG) image using properties to customize how it is rendered. The web part utilizes the PnP SPFx Property Controls package (specifially the SpinButton and ColorPicker) to set these properties.
![picture of the web part in action](./assets/js-propertycontrols-svg.gif)
## Used SharePoint Framework Version
![drop](https://img.shields.io/badge/version-1.3.4-green.svg)
## Which PnP SPFx controls are being used in this sample?
* [PropertyFieldSpinButton](https://github.com/SharePoint/sp-dev-fx-property-controls/wiki/PropertyFieldSpinButton)
* [PropertyFieldColorPicker](https://github.com/SharePoint/sp-dev-fx-property-controls/wiki/PropertyFieldColorPicker)
@ -31,6 +34,7 @@ Version|Date|Comments
1.0|November 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.**
---

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

@ -50,12 +50,15 @@ Version|Date|Comments
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
Because the Skype API's are secured, you first need to register an Azure Active Directory application.
To do that go to `portal.azure.com` and sign in as your tenant administrator.
![azure active directory](./images/1.PNG)
@ -77,11 +80,13 @@ Don't forget to click on `Grant permissions` and `yes`.
After copying that sample to your local machine and running `npm install` to install the depenencies, `/src/webparts/skypePresence/services/Constants.ts` open your favorite editor. Make sure you replace the value of `ApplicationIdKey` to the value application id we kept earlier.
### Deploying the application
Start by running `gulp package-solution` and deploy the application to the app catalog. More information on how to do it [here](https://docs.microsoft.com/en-us/sharepoint/dev/spfx/web-parts/get-started/serve-your-web-part-in-a-sharepoint-page)
**At the end select SkypePresence webpart instead**
**At the end select SkypePresence web part instead**
Don't forget to run `gulp serve --nobrowser` to start the debugging server.
### Additional page required
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.

4
samples/knockout-sp-pnp-js/README.md
View File

@ -17,11 +17,12 @@ extensions:
## Summary
This webpart demonstrates how to integrate the @pnp/sp library into the SharePoint Framework as well as including mock data and simple list I/O.
This web part demonstrates how to integrate the @pnp/sp library into the SharePoint Framework as well as including mock data and simple list I/O.
![Sample of the search web part](./assets/screenshot.png)
## Used SharePoint Framework Version
![drop](https://img.shields.io/badge/drop-1.7.0-green.svg)
## Applies to
@ -45,6 +46,7 @@ Version|Date|Comments
1.0.0| November 14, 2018| Version Upgrade
## 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.**
---

4
samples/react-Edit-ApplicationCustomizer/README.md
View File

@ -12,11 +12,11 @@ This web part will allow users to view/update application customizers properties
- We can use properties to pass data to Application customizers to make solution customizable.
- To update properties of application customizer there is no UI based solution.
- To update the title, details and other information of application customizer we use either PowerShell script or cli tool.
- This webpart can be used at a central location where all the users have access and if they require to update title, description and properties.
- This web part can be used at a central location where all the users have access and if they require to update title, description and properties.
## Features
- Webpart to view/update Application Customizers registered for a selected web
- Web part to view/update Application Customizers registered for a selected web
- Provides two different UI Accordion or List based(configurable)
- Provides a dropdown to select the web from where we would require to fetch application customizers
- Allows to update application customizer properties which makes it easy to make re-useable application customizers

4
samples/react-adaptivecards-hooks/README.md
View File

@ -47,8 +47,8 @@ Version|Date|Comments
| File | Type | Description |
|------------------------------|--------------------------------------------------|----------------|
| AdaptiveCardViewerWebPart.ts | React Class component (derives from BaseWebPart) | Used to define web part properties and bootstrap the component tree|
| RootComponent.tsx | React Function component | Interrogates webpart properties and establishes AppContext and initial state.<br/>Monitors CardService state and dispatches updates to viewer state. |
| AppContext.ts | React context provider | Exposes the SPFx webpart context, the webpart instance and the state dispatch to all components via `React.useContext()` |
| RootComponent.tsx | React Function component | Interrogates web part properties and establishes AppContext and initial state.<br/>Monitors CardService state and dispatches updates to viewer state. |
| AppContext.ts | React context provider | Exposes the SPFx web part context, the web part instance and the state dispatch to all components via `React.useContext()` |
| CardService.ts | React Hook | Abstracts the SP HttpClient |
| CardServiceReducer.ts | React Reducer | Reducer/state for CardService hook |
| AdaptiveCardViewer.tsx | React Function component | Top-level UI component. |

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

@ -19,7 +19,7 @@ This repo is a react based SPFx web part and extension that allows users to add/
WebPart in Action
![Webpart in action](assets/webpartinaction.gif?raw=true "Webpart in action")
![Web part in action](assets/webpartinaction.gif?raw=true "Webpart in action")
Challenges/Drawback with ONLY using SPFx extension for adding js and css file references.
* JS and CSS file references links needs to be hardcoded in solution
@ -32,7 +32,7 @@ To overcome this drawbacks, this solution comes handy. This is reusable componen
### Features of solution
* WebPart to configure JS and CSS file reference.
* Web part to configure JS and CSS file reference.
* Edit functionality if at least one JS or CSS reference is already added via this solution
* Completely remove all the references added via this solution
* Support for relative url also, if your js and css file is referred from some document library in same site collection.
@ -70,19 +70,19 @@ gulp package-solution --ship
- Upload or drag and drop the newly created client-side solution package to the app catalog in your tenant.
- Based on your tenant settings, if you would not have CDN enabled in your tenant, and the `includeClientSideAssets` setting would be true in the `package-solution.json`, the loading URL for the assets would be dynamically updated and pointing directly to the `ClientSideAssets` folder located in the app catalog site collection.
### How to Use Solution
* Once app is deployed to app catalog successfully.
* Install app to required site collection
* Create new modern page. Add **addJsCssReference** webpart to page. Publish the page.
* Create new modern page. Add **addJsCssReference** web part to page. Publish the page.
* Use grid to add js and css file references, both are separate sections.
* On Success message - Refresh the page and you would see your js and css files will be loaded.
* To Edit/Remove, go to same page again and Use **Activate** or **Deactivate**.
* Only Users with Manage Web permission will be able to access webpart and add/modify references.
* Only Users with Manage Web permission will be able to access web part and add/modify references.
### High level design of Solution
* SPFx solution with 2 components 1. SPFx Webpart 2. SPFx Extension Application Customizer
* SPFx solution with 2 components 1. SPFx Web part 2. SPFx Extension Application Customizer
* Disables Automatic activation of SPFx extension when app is installed.
* React based solution
* Register Custom action with ClientSideComponentId of Extension component
@ -101,7 +101,6 @@ Version|Date|Comments
1.0.0|Apr 24, 2020|Initial release
2.0.0|June 09, 2020|Displaying access denied message, added spinner to display on page load, fix edit, delete icons not displaying.
## 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.**

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

@ -2,13 +2,11 @@
## Summary
A SPFx WebPart using [@pnp/sp/appcatalog](https://pnp.github.io/pnpjs/sp/docs/alm/) and [@pnp/spfx-controls-react](https://sharepoint.github.io/sp-dev-fx-controls-react/). It allows to see in a single view all the SiteCollection catalogs and the Apps installed with some useful metadata.
It needs Globlal Administrator or SharePoint Online Administrator permissions in order to access Site collection App Catalogs hidden list (https://yourtenant.sharepoint.com/sites/appcatalog/Lists/SiteCollectionAppCatalogs) and each Site Collection App Catalog. This WebPart use [@pnp/spfx-controls-react WebPartTitle](https://sharepoint.github.io/sp-dev-fx-controls-react/controls/WebPartTitle/) and [@pnp/spfx-controls-react ListView](https://sharepoint.github.io/sp-dev-fx-controls-react/controls/ListView/) components.
A SPFx web part using [@pnp/sp/appcatalog](https://pnp.github.io/pnpjs/sp/docs/alm/) and [@pnp/spfx-controls-react](https://sharepoint.github.io/sp-dev-fx-controls-react/). It allows to see in a single view all the SiteCollection catalogs and the Apps installed with some useful metadata.
It needs Globlal Administrator or SharePoint Online Administrator permissions in order to access Site collection App Catalogs hidden list (https://yourtenant.sharepoint.com/sites/appcatalog/Lists/SiteCollectionAppCatalogs) and each Site Collection App Catalog. This web part use [@pnp/spfx-controls-react WebPartTitle](https://sharepoint.github.io/sp-dev-fx-controls-react/controls/WebPartTitle/) and [@pnp/spfx-controls-react ListView](https://sharepoint.github.io/sp-dev-fx-controls-react/controls/ListView/) components.
## react-admin-sc-catalog-pnpjs in action
![WebPartInAction](./assets/react-admin-sc-catalog-pnpjs-webpart-animated.gif)
## Used SharePoint Framework Version
![drop](https://img.shields.io/badge/version-1.9.1-green.svg)
@ -47,7 +45,7 @@ Version|Date|Comments
* locate solution at `.\sharepoint\solution\react-admin-sc-catalog-pnpjs.sppkg`
* upload it to your tenant app catalog
* add `react-admin-sc-catalog-pnpjs` app to your site
* add `react-admin-sc-catalog-pnpjs` webpart to your page to see it in action
* add `react-admin-sc-catalog-pnpjs` web part to your page to see it in action
## Features

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

@ -1,24 +1,23 @@
# Aggregated Calendar
## Summary
This is a sample webpart developed using React Framework to gather the aggregated events from the multiple calendars from multiple sites using Full Calendar from fullcalendar.io
This is a sample web part developed using React Framework to gather the aggregated events from the multiple calendars from multiple sites using Full Calendar from fullcalendar.io
![The web part in action](./assets/react-aggregated-calendar.gif)
The web part was designed to create an aggregated view of calendar to fetch events from multiple calendars across the sites and site collection.
The web part will show the event information using the callout functionality of Office UI Fabric
The webpart was designed to create an aggregated view of calendar to fetch events from multiple calendars across the sites and site collection.
The webpart will show the event information using the callout functionality of Office UI Fabric
Webpart is developed using below technologies
Web part is developed using below technologies
* React Framework
* Full Calendar(fullcalendar.io)
* jQuery
* Office UI Fabric
## Used SharePoint Framework Version
![drop](https://img.shields.io/badge/version-GA-green.svg)
## Applies to
@ -26,11 +25,9 @@ Webpart is developed using below technologies
* [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
Before you can use this webpart example, you will need at least one Out of the Box Calendar created.
Before you can use this web part example, you will need at least one Out of the Box Calendar created.
It is required that the users have view access on the calendar.
@ -47,6 +44,7 @@ Version|Date|Comments
1.0 |July 16, 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.**
---
@ -60,7 +58,8 @@ Version|Date|Comments
## Features
This Web Part displays the events from multiple calendars located in various sites/site collection of sharepoint:
This Web Part displays the events from multiple calendars located in various sites/site collection of SharePoint:
- Aggregated events for Calendar
- Supports Sub-Sites and Site Collection level
@ -72,8 +71,6 @@ This Web Part displays the events from multiple calendars located in various sit
## React Aggregated Calendar
### Building the code
```bash

13
samples/react-async-await-sp-pnp-js/README.md
View File

@ -16,16 +16,19 @@ extensions:
# Using @pnp/js with Async / Await
## Summary
This webpart demonstrates how to use [PnPJS](https://pnp.github.io/pnpjs/) with Async functions into the SharePoint Framework as well as integrating [PnP JS and SPFx Logging systems](https://blog.josequinto.com/2017/04/30/how-to-integrate-pnp-js-core-and-sharepoint-framework-logging-systems/). Real example querying SharePoint library to show document sizes.
This web part demonstrates how to use [PnPJS](https://pnp.github.io/pnpjs/) with Async functions into the SharePoint Framework as well as integrating [PnP JS and SPFx Logging systems](https://blog.josequinto.com/2017/04/30/how-to-integrate-pnp-js-core-and-sharepoint-framework-logging-systems/). Real example querying SharePoint library to show document sizes.
![React-sp-pnp-js-async-await](./assets/async-await-sp-pnp-js.png)
## Used SharePoint Framework Version
![drop](https://img.shields.io/badge/drop-1.4.1-green.svg)
## Applies to
* [SharePoint Framework](https://docs.microsoft.com/sharepoint/dev/spfx/sharepoint-framework-overview)
* [Office 365 developer tenant](https://docs.microsoft.com/sharepoint/dev/spfx/set-up-your-developer-tenant)
@ -44,29 +47,35 @@ Version|Date|Comments
1.0|May 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
- clone this repo
- `$ npm i`
- `$ gulp trust-dev-cert`
- `$ gulp serve `
### Local Mode
A browser in local mode (localhost) will be opened.
https://localhost:4321/temp/workbench.html
### SharePoint Mode
If you want to try on a real environment, open:
https://your-domain.sharepoint.com/_layouts/15/workbench.aspx
## Usage
![React-sp-pnp-js-async-await-code](./assets/async-await-sp-pnp-js-2.png)
## Features
- [Async / Await functionality working with PnP JS sample](https://github.com/jquintozamora/spfx-react-async-await-sp-pnp-js/blob/master/src/webparts/asyncAwaitPnPJs/components/AsyncAwaitPnPJs.tsx#L93)
- Tested and working on IE11 (as TypeScript config provides Promise polyfill)
- React Container for the initial load. [Smart Component](https://github.com/jquintozamora/spfx-react-async-await-sp-pnp-js/blob/master/src/webparts/asyncAwaitPnPJs/components/IAsyncAwaitPnPJsState.ts)
@ -74,6 +83,4 @@ https://your-domain.sharepoint.com/_layouts/15/workbench.aspx
- [PnP JS and SPFx Logging systems integration](https://blog.josequinto.com/2017/04/30/how-to-integrate-pnp-js-core-and-sharepoint-framework-logging-systems)
![React-sp-pnp-js-async-await-code](./assets/pnp-js-logging-spfx.png)
<img src="https://telemetry.sharepointpnp.com/sp-dev-fx-webparts/samples/react-async-await-sp-pnp-js" />

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

@ -47,7 +47,7 @@ This Web Part illustrates the following concepts on top of the SharePoint Framew
* Usage of [avataaars](https://getavataaars.com/)
## WebPart Properties
## Web Part Properties
Property |Type|Required| comments
--------------------|----|--------|----------

12
samples/react-banner/README.md
View File

@ -15,7 +15,7 @@ This web part provides you the ability to add a variable height image banner wit
## Configurable Properties
The `Banner` webpart can be configured with the following properties:
The `Banner` web part can be configured with the following properties:
| Label | Property | Type | Required | Description |
| ---- | ---- | ---- | ---- | ---- |
@ -26,21 +26,21 @@ The `Banner` webpart can be configured with the following properties:
| Enable parallax effect | useParallax | toggle | no | Enable if you want to include parallax effect on vertical scrolling |
# Installing the web part
## Installing the web part
See getting started from [SP-Starter-Kit repository readme](https://github.com/SharePoint/sp-starter-kit).
You can also download just the [SharePoint Framework solution package (spppkg) file](https://github.com/SharePoint/sp-starter-kit/blob/master/package/sharepoint-starter-kit.sppkg) and install that to your tenant. This web part does not have external dependencies.
# Screenshots
## Screenshots
![Banner](https://github.com/pnp/sp-starter-kit/raw/master/assets/images/components/part-banner.png)
# Source Code
## Source Code
https://github.com/SharePoint/sp-starter-kit/tree/master/solution/src/webparts/banner
# Minimal Path to Awesome
## Minimal Path to Awesome
- Clone this repository
- Move to Solution folder
@ -48,7 +48,7 @@ https://github.com/SharePoint/sp-starter-kit/tree/master/solution/src/webparts/b
- `npm install`
- `gulp serve`
# Version history
## Version history
Version|Date|Comments
-------|----|--------

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

@ -1,4 +1,4 @@
# SharePoint webpart sample with SSO
# SharePoint web part sample with SSO
## Summary
@ -48,7 +48,7 @@ This demo does not include any threat models and is designed for educational pur
Solution|Author(s)
--------|---------
webpart | Bot Framework Discussions (msbots@service.microsoft.com) <br/> Stephan Bisser (@stephanbisser, bisser.io)
web part | Bot Framework Discussions (msbots@service.microsoft.com) <br/> Stephan Bisser (@stephanbisser, bisser.io)
bot | Bot Framework Discussions (msbots@service.microsoft.com)
## Version history

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

@ -99,7 +99,7 @@ The Web Part checks the user's permissions for the View, Add, Edit, and Delete e
* [Office 365 tenant](https://docs.microsoft.com/sharepoint/dev/spfx/set-up-your-development-environment)
## WebPart Properties
## Web Part Properties
Property |Type|Required| comments
--------------------|----|--------|----------

3
samples/react-carousel/README.md
View File

@ -36,7 +36,7 @@ It uses Microsoft Graph API to get image/video url and use PnPjs to load files f
* [Office 365 tenant](https://docs.microsoft.com/sharepoint/dev/spfx/set-up-your-development-environment)
## WebPart Properties
## Web Part Properties
Property |Type|Required| comments
--------------------|----|--------|----------
@ -72,6 +72,7 @@ Version|Date|Comments
## 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.**
---

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

@ -2,7 +2,7 @@
## Summary
This webpart allows you to add images to a SharePoint List, and renders them with a UX very similar to Instagram Stories (or Twitter Reels, or [Place your Social network here]). It is a way to engage employees, showing relevant content in a well-known visual appearance.
This web part allows you to add images to a SharePoint List, and renders them with a UX very similar to Instagram Stories (or Twitter Reels, or [Place your Social network here]). It is a way to engage employees, showing relevant content in a well-known visual appearance.
![react-company-stories](./assets/react-company-stories.gif)
@ -52,11 +52,11 @@ Version|Date|Comments
- In the command-line run:
- **npm install**
- **gulp serve --nobrowser**
- Add the webpart to the SharePoint Workbench (same Site where the List was created)
- Add the web part to the SharePoint Workbench (same Site where the List was created)
## Features
This webpart illustrates the following concepts:
This web part illustrates the following concepts:
- Using the Microsoft Graph Toolkit react components: [Person component](https://docs.microsoft.com/en-us/graph/toolkit/components/person)
- Using FluentUI components

36
samples/react-content-query-onprem/README.md
View File

@ -13,17 +13,18 @@ extensions:
- react
createdDate: 8/1/2017 12:00:00 AM
---
# Content Query WebPart (Compatible with On-Premises SharePoint versions)
# Content Query Web Part (Compatible with On-Premises SharePoint versions)
## Summary
> NOTE: This web part was built with an earlier version of SPFx which is compatible with on-premises versions of SharePoint. If you wish, you can use the [newer version of this web part](../react-content-query-online/README.md) which is compatible with SharePoint Online only.
The `React Content Query WebPart` is a modern version of the good old `Content by Query WebPart` that was introduced in SharePoint 2007. Built for *SharePoint 2016* and *Office 365*, this modern version is built against the new **SharePoint Framework (SPFx)** and uses the latest *Web Stack* practices. While the original WebPart was based on a `XSLT` templating engine, this *React* WebPart is based on the well known [Handlebars templating engine](http://handlebarsjs.com), which empowers users to create simple, yet powerfull `HTML` templates for rendering the queried content. This new version also lets the user query `any site collections` which resides on the same domain url, add `unlimited filters`, query *DateTime* fields to the `nearest minute` rather than being limited to a day, and much more.
The `React Content Query Web Part` is a modern version of the good old `Content by Query Web Part` that was introduced in SharePoint 2007. Built for *SharePoint 2016* and *Office 365*, this modern version is built against the new **SharePoint Framework (SPFx)** and uses the latest *Web Stack* practices. While the original Web Part was based on a `XSLT` templating engine, this *React* Web Part is based on the well known [Handlebars templating engine](http://handlebarsjs.com), which empowers users to create simple, yet powerful `HTML` templates for rendering the queried content. This new version also lets the user query `any site collections` which resides on the same domain url, add `unlimited filters`, query *DateTime* fields to the `nearest minute` rather than being limited to a day, and much more.
<img src="Misc/toolpart.gif" />
## Used SharePoint Framework Version
![drop](https://img.shields.io/badge/drop-GA-green.svg)
## Applies to
@ -43,24 +44,25 @@ Version|Date|Comments
-------|----|--------
1.0.0|May 04, 2017|Initial release
1.0.1|July 23rd 15, 2017|Updated to GA Version
1.0.3|August 12, 2017|Added external scripts functionnality
1.0.3|August 12, 2017|Added external scripts functionality
1.0.4|August 31, 2017|Fixed a bug where tenant sites/subsites were missing from the **Web Url** dropdown
1.0.5|September 1st, 2017|Added a **Site Url** parameter next to the **Web Url** parameter in order to narrow down the results
1.0.6|September 19, 2017|Upgraded to SharePoint drop 1.2.0 and added the site url and web url preselection when adding the WebPart for the first time on a page. Also fixed a bug with fields that had spaces in their internal names (automatically replaced with `_x0020_` by SharePoint).
1.0.6|September 19, 2017|Upgraded to SharePoint drop 1.2.0 and added the site url and web url pre-selection when adding the web part for the first time on a page. Also fixed a bug with fields that had spaces in their internal names (automatically replaced with `_x0020_` by SharePoint).
1.0.7|November 17, 2017|Reverted to drop 1.1.0 in order to keep compatibility for SP2016 on-premise
1.0.8|March 17, 2018|Updated to store the selected list using its ID instead of its title, so the webpart keeps working if the list title gets updated.
1.0.9|March 28, 2018|Added a switch to enable the WebPart to apply it's query recursively within folders, and fixed a bug where webs could sometimes not appear under the web url dropdown
1.0.8|March 17, 2018|Updated to store the selected list using its ID instead of its title, so the web part keeps working if the list title gets updated.
1.0.9|March 28, 2018|Added a switch to enable the web part to apply it's query recursively within folders, and fixed a bug where webs could sometimes not appear under the web url dropdown
1.0.10|April 5, 2018|Fixed a bug where the webs of the selected site collection were not being loaded correctly for particular tenants
1.0.11|May 22, 2018|Fixed a bug causing filters to loose their sort order in IE
## 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.**
## Features
### Cross site collection
The WebPart uses the search in order to get all sites under the current domain, which makes it possible to query not only subsites but other site collections and their subsites as well. By default, the current site collection and the current web on which the user is adding the WebPart will be pre-selected automatically.
The web part uses the search in order to get all sites under the current domain, which makes it possible to query not only sub-sites but other site collections and their sub-sites as well. By default, the current site collection and the current web on which the user is adding the web part will be pre-selected automatically.
<img src="Misc/allsites_v2.gif" />
<br>
@ -81,7 +83,7 @@ It is now possible to include time validation when querying date fields, giving
### Handlebars templating engine
Enjoy a simple, yet powerfull html-based templating engine for rendering your results. The WebPart even generates a default Handlebars template for you based on the view fields you have selected during the configuration!
Enjoy a simple, yet powerfull html-based templating engine for rendering your results. The web part even generates a default Handlebars template for you based on the view fields you have selected during the configuration!
For advanced users, more than 150 Handlebars block helpers are available by default within the user defined template. For a list of all block helpers, see [handlebars-helpers](https://github.com/helpers/handlebars-helpers#helpers)
<br>
@ -103,7 +105,7 @@ External scripts can be used to include either libraries such as *jQuery*, or ev
## Getting Started
### Adding the WebPart to your page
### Adding the web part to your page
To add the `React Content Query WebPart` to your site page you have two options :
- Either clone this repository, build the project yourself and connect it to SharePoint (see [officedev documentation](https://docs.microsoft.com/en-us/sharepoint/dev/spfx/web-parts/get-started/connect-to-sharepoint))
@ -113,7 +115,7 @@ Note : The second method will only work for Office 365 sites, since the **.ppkg*
### Configuring the WebPart
As seen in the [User friendly configuration](#user-friendly-configuration) section, configuring the WebPart is quite straight forward. However, here's a list of *gotchas* that could save you some time :
As seen in the [User friendly configuration](#user-friendly-configuration) section, configuring the web part is quite straight forward. However, here's a list of *gotchas* that could save you some time :
- The `Web Url` property uses the search to find all sites that are under the current domain. That being said, newly created sites can take a while to appear within the dropdown options, based on the search crawl schedule.
- The `Filters` property still supports query string expressions like *[PageQueryString:ParamName]* for text fields, and date expressions such as *[Today]* or *[Today] + 4* for date fields.
@ -187,7 +189,7 @@ Once we can loop within the items, we can render any field, as long as the field
<div class="item">[object]</div>
```
We are almost there, the above code is rendering a *[object]* because the Content Query Webpart offers 3 different ways to render a field value:
We are almost there, the above code is rendering a *[object]* because the Content Query Web Part offers 3 different ways to render a field value:
Property | Description
---------|---------------
@ -221,15 +223,15 @@ Property | Description
#### Including basic library files
For including JavaScript files within the WebPart, file URLs must be added to the **External Scripts** parameter available in the toolpart.
For including JavaScript files within the web part, file URLs must be added to the **External Scripts** parameter available in the toolpart.
<img src="Misc/externalScripts.png" />
Each file URL must be on its own line, and placed in the desired order. The scripts will be loaded asynchronously, but in a sequential fashion, which means that the WebPart will wait until a script is completely loaded before proceeding to load the next one.
Each file URL must be on its own line, and placed in the desired order. The scripts will be loaded asynchronously, but in a sequential fashion, which means that the web part will wait until a script is completely loaded before proceeding to load the next one.
#### Including custom logic files
If you need custom logic files that can interact precisely **before** or **after** the rendering of the HTML generated by the *Handlebars* template, you must follow the patern below in order for the WebPart to recognize the endpoints and call them when needed :
If you need custom logic files that can interact precisely **before** or **after** the rendering of the HTML generated by the *Handlebars* template, you must follow the pattern below in order for the web part to recognize the endpoints and call them when needed :
```javascript
ReactContentQuery.ExternalScripts.MyScriptFile = {
@ -250,7 +252,7 @@ Looking at this example, here are the key things that needs to be respected in o
_Namespace_
- [x] The script uses a namespace which starts by **ReactContentQuery.ExternalScripts.**, followed by the name of its own file
- [x] The name of the file has to be written without its **.js** extension, and without any caracters that aren't letters or numbers
- [x] The name of the file has to be written without its **.js** extension, and without any characters that aren't letters or numbers
- [x] The name of the file needs to respect the same casing as in it's URL
Examples :
@ -278,8 +280,8 @@ Both functions provide the following parameters :
Parameter | Description
----------------------|-------------
**wpContext** | Represents the context of the WebPart who called the function, which exposes all kinds of useful informations such as **wpContext.domElement** which represents the HTML element on which the current WebPart is being rendered.
**handlebarsContext** | Represents the handlebars context used for generating the template of the current WebPart. Can be used for adding handlebar block helpers in the **onPreRender** function for example.
**wpContext** | Represents the context of the web part which called the function, which exposes all kinds of useful information such as **wpContext.domElement** which represents the HTML element on which the current web part is being rendered.
**handlebarsContext** | Represents the handlebars context used for generating the template of the current web part. Can be used for adding handlebar block helpers in the **onPreRender** function for example.
#### Including custom block helpers

4
samples/react-css-in-js-typestyle/README.md
View File

@ -41,8 +41,8 @@ Version|Date|Comments
* `gulp build`
* `gulp bundle --ship`
* `gulp package-solution --ship`
* add the webpart to your tenant app store
* add the app to a SharePoint site and then add the webpart to the page
* add the web part to your tenant app store
* add the app to a SharePoint site and then add the web part to the page
## Features

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

@ -30,6 +30,7 @@ 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.**
---
@ -39,16 +40,18 @@ Version|Date|Comments
A very good real life scenario where this pattern can be used is in Data Application Layers scenario, more than often developers and architects are faced with requirements where an application needs to be able to access different databases or event different database servers which have different drivers, but the users want to to that without changing a lot of code, something that can be switched from an easy parameter somewhere.
For the sake of simplicity lets suppose you work at Company A, and company A acquired company B, at company A you have a webpart developed that brings Customer Information from SharePoint List, but at Company B which was acquired and in the process of merging, they have Product Information in their own CRM which exposes data via REST APIs or just a JSON file.
For the sake of simplicity lets suppose you work at Company A, and company A acquired company B, at company A you have a web part developed that brings Customer Information from SharePoint List, but at Company B which was acquired and in the process of merging, they have Product Information in their own CRM which exposes data via REST APIs or just a JSON file.
The users wants to see their products in the same SharePoint page using the same webpart, meaning that the webpart needs to be added twice with different parameters to the same page and users can search for customers information on both data sources, with the same source code.
The users wants to see their products in the same SharePoint page using the same web part, meaning that the web part needs to be added twice with different parameters to the same page and users can search for customers information on both data sources, with the same source code.
### Project Structure
![](http://www.luisevalencia.com/content/images/2018/01/2018-01-04-12_33_49-TypescriptDesignPatterns02AbstractFactoryWebPart.ts---TypescriptDesignPatterns02.png)
As seen above we have a Factory component and in there we have all files that our project needs, lets discuss them one by one.
##### Customer.ts
Our model or data access object, nothing to fancy, the idea is to show the pattern, not complex Data Transfer Objects.
```typescript
@ -78,6 +81,7 @@ export default DataSources;
```
##### DaoFactory.ts
This is the abstract class DAO Factory that would need to be implemented, for the ease of sake, I am doing only one DAO, Customers, but you can use the same pattern for many different DTOs as well on the same class.
```typescript
@ -108,7 +112,9 @@ import JsonDAOFactory from "./JsonDAOFactory";
```
##### JsoDAOFactory.ts
This class is just the implementation of the factory method
```typescript
import DAOFactory from "./DaoFactory";
import JsonCustomerDAO from "./JsonCustomerDAO";
@ -124,7 +130,9 @@ export default JsonDAOFactory;
```
##### SharepointListDAOFactory.ts
This class is just the implementation of the factory method
```typescript
import DaoFactory from "./DaoFactory";
import ICustomerDao from "./ICustomerDao";
@ -142,6 +150,7 @@ export default SharepointListDAOFactory;
##### ICustomerDao.ts
Now, this is the customer interface which defines the methods that would need to be implemented and that depends on the data source endpoint, database or driver, or whatever.
```typescript
@ -160,7 +169,7 @@ export default ICustomerDao;
##### JsonCustomerDAO.ts
Implementation on these methods are left to the reader, but the main idea here is to implement based on the datasource the Data Access Logic here and return the strongly typed objects where needed.
Implementation on these methods are left to the reader, but the main idea here is to implement based on the data source the Data Access Logic here and return the strongly typed objects where needed.
```typescript
import ICustomerDao from "./ICustomerDao";
@ -198,9 +207,10 @@ import Customer from "./Customer";
export default JsonCustomerDAO;
```
##### SharepointCustomerDAO.ts
Implementation on these methods are left to the reader, but the main idea here is to implement based on the datasource the Data Access Logic here and return the strongly typed objects where needed.
Implementation on these methods are left to the reader, but the main idea here is to implement based on the data source the Data Access Logic here and return the strongly typed objects where needed.
```typescript
import ICustomerDao from "./ICustomerDao";
@ -239,12 +249,13 @@ import Customer from "./Customer";
export default SharepointCustomerDao;
```
##### The component
##### The component
This is where we actually see the entire benefit of the abstract factory pattern, as you can see the code is really short here and easy to read, no custom business logic, and everything so easy to maintain.
We create a private property of type ICustomerDao to be instantiated on the setDaos method based on the input of the user in the property pane. This method is only called in the constructor once.
And then in the render method we just get the Customer items from the datasource, and as you can see, its totally generic, no custom logic based on the datasource selected.
And then in the render method we just get the Customer items from the data source, and as you can see, its totally generic, no custom logic based on the data source selected.
```typescript
import * as React from 'react';
@ -291,6 +302,7 @@ export default class Abstractfactory extends React.Component<IAbstractfactoryPro
And just for your understanding, I show below the props and states clases
##### IAbstractfactoryProps.ts
```typescript
export interface IAbstractfactoryProps {
datasource: string;
@ -298,7 +310,9 @@ export interface IAbstractfactoryProps {
```
##### IAbstractFactoryState.ts
```typescript
import Customer from "./Customer";
@ -307,8 +321,10 @@ export interface IAbstractFactoryState {
}
```
And finally the webpart code
And finally the web part code
##### AbstractFactoryWebPart.ts
```typescript
import * as React from 'react';
import * as ReactDom from 'react-dom';
@ -376,6 +392,6 @@ export default class AbstractfactoryWebPart extends BaseClientSideWebPart<IAbstr
```
>Conclusion:
We all know that SharePoint Framework Projects are transpiled and bundled into one single JS file, however regardless of that for those of us who have worked in huge projects and are only User Interface Developers, we know that we can do better than what the standard samples show us in the standard documentation, with the above post I wanted to show you how simple is to create maintenable code, code that anyone can read, and later modify.
We all know that SharePoint Framework Projects are transpiled and bundled into one single JS file, however regardless of that for those of us who have worked in huge projects and are only User Interface Developers, we know that we can do better than what the standard samples show us in the standard documentation, with the above post I wanted to show you how simple is to create maintainable code, code that anyone can read, and later modify.
<img src="https://telemetry.sharepointpnp.com/sp-dev-fx-webparts/samples/designpatterns-typescript/abstractfactory" />

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

@ -34,6 +34,7 @@ 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.**
---
@ -54,7 +55,7 @@ It promotes the loose-coupling by eliminating the need to bind application-speci
So lets start this journey explaining how I saw this factory method pattern could be applied.
In a SharePoint Site we can have multiple lists and all those lists could have different columns or fields, why not create a generic way to build the list item objets depending on the selected list? well in plain english, a webpart where you can select the list, and based on the selected list it will render all the columns, sure you can do this in many ways and probably with lots of switches/if statements, etc, but I wanted a more elegant solution and I believe this sample will do just that.
In a SharePoint Site we can have multiple lists and all those lists could have different columns or fields, why not create a generic way to build the list item objets depending on the selected list? well in plain english, a web part where you can select the list, and based on the selected list it will render all the columns, sure you can do this in many ways and probably with lots of switches/if statements, etc, but I wanted a more elegant solution and I believe this sample will do just that.
##### Diagram
@ -255,7 +256,7 @@ export class ListItemFactory implements IFactory {
###### Props and states
Properties we pass from the main webpart to the component are defined in the props interface, things like SPHttpclient are important here, state is where we actually store our returned information from the server, because listitems could be of different types, I created a wrapper Interface and depending on the type of list, then the state would be read from a different state property DetailsListItemState, DetailsNewsListItemState, etc.
Properties we pass from the main web part to the component are defined in the props interface, things like SPHttpclient are important here, state is where we actually store our returned information from the server, because listitems could be of different types, I created a wrapper Interface and depending on the type of list, then the state would be read from a different state property DetailsListItemState, DetailsNewsListItemState, etc.
We will see later in the series how could achieve this with shorter code, but for this pattern its what I need so far.
@ -498,9 +499,10 @@ export default class FactoryMethod extends React.Component<IFactoryMethodProps,
//#endregion
}
```
###### The webpart
And finally the webpart code is below, with self explanatory comments for the reader to understand the events lifecycle.
###### The web part
And finally the web part code is below, with self explanatory comments for the reader to understand the events lifecycle.
```Typescript

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

@ -1,137 +1,139 @@
# Singleton Design Pattern
## Summary
A singleton is a pattern that guarantees there is a single instance of an object in the system. A singleton can maintain a state which is shared across the entire system. Singletons abstract their internal workings from the rest of the system
## 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\singleton | [@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.**
---
### Singleton pattern
Singletons are common in business applications. They help model real-life business processes that involve shared resources.
Even when I started my career in 2002 and started developing with VB.NET and then C#, at that time design patterns were popular and probably the most widely used was the Singleton Pattern, why, is this so important, because if not used correctly it can lead to Memory leaks, bad use of memory because instantiating objects too many times that are not needed.
So Software Designers, Architects and Developers should have at the very least this design pattern very well wood understood in their own arsenal and use it on a daily basis.
Some people might say, well but its only 4kb of memory, and 100 users, well I have seen by experience how even small applications which are poorly developed get this memory leaks and by a simple refactoring with a few Singletons here and there, the problem goes away.
### Scenario:
Any application at some point will need to read configuration variables from somewhere, imagine a SPFx webpart which is a complex SPA with many screens and forms where you need to rely on a configuration Sharepoint List, where you store information like: Number of Items per page, Max Number of Connections, Timeouts, Max Number of devices allowd, and things like that.
In this scenario it makes sense to build a class that will allow you easy retrieval of those values without you having to write code to retrieve the values in all screens or forms on the SPA.
It is a poor practice to repeat configuration access code everywhere in the system. If the physical location of configuration ever changes one would have to update many different files and lines of code. To solve this, developers implement a singleton for managing configuration.
For this sample only one file need to be added and the .tsx file modified to use the Singleton Pattern.
### ConfigurationManager.ts
```typescript
class ConfigurationManager {
private static instance: ConfigurationManager;
public constructor() {
// do something construct...
}
static getInstance(): ConfigurationManager {
if (!ConfigurationManager.instance) {
ConfigurationManager.instance = new ConfigurationManager();
// ... any one time initialization goes here ...
}
return ConfigurationManager.instance;
}
// excercise for the reader to get data from an external data source.
numberOfItemsPerPage(): number {
return 10;
}
maxNumberOfConnections(): number {
return 10;
}
restTimeout(): number {
return 1000;
}
}
export default ConfigurationManager;
```
And finally the component TSX where we use the singleton pattern from the Constructor.
```typescript
import * as React from "react";
import styles from "./Singleton.module.scss";
import { ISingletonProps } from "./ISingletonProps";
import { escape } from "@microsoft/sp-lodash-subset";
import ConfigurationManager from "./ConfigurationManager";
export default class Singleton extends React.Component<ISingletonProps, {}> {
private numberOfItemsPerPage: number;
private maxNumberOfConnections: number;
private restTimeout: number;
constructor(props: ISingletonProps, state: any) {
super(props);
let config:ConfigurationManager = ConfigurationManager.getInstance();
this.numberOfItemsPerPage = config.numberOfItemsPerPage();
this.maxNumberOfConnections = config.numberOfItemsPerPage();
this.restTimeout = config.restTimeout();
}
public render(): React.ReactElement<ISingletonProps> {
return (
<div className={ styles.singleton }>
<div className={ styles.container }>
<div className={ styles.row }>
<div className={ styles.column }>
<span className={ styles.title }>Welcome to SharePoint!</span>
<p className={ styles.subTitle }>Customize SharePoint experiences using Web Parts.</p>
<p className={ styles.description }>{escape(this.props.description)}</p>
<a href="https://aka.ms/spfx" className={ styles.button }>
<span className={ styles.label }>Learn more</span>
</a>
</div>
</div>
</div>
</div>
);
}
}
```
As you can see this clearly shows how to use the singleton pattern in a real life situation and I hope its clear to the reader and start using in your own projects
<img src="https://telemetry.sharepointpnp.com/sp-dev-fx-webparts/samples/designpatterns-typescript/singleton" />
# Singleton Design Pattern
## Summary
A singleton is a pattern that guarantees there is a single instance of an object in the system. A singleton can maintain a state which is shared across the entire system. Singletons abstract their internal workings from the rest of the system
## 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\singleton | [@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.**
---
### Singleton pattern
Singletons are common in business applications. They help model real-life business processes that involve shared resources.
Even when I started my career in 2002 and started developing with VB.NET and then C#, at that time design patterns were popular and probably the most widely used was the Singleton Pattern, why, is this so important, because if not used correctly it can lead to Memory leaks, bad use of memory because instantiating objects too many times that are not needed.
So Software Designers, Architects and Developers should have at the very least this design pattern very well wood understood in their own arsenal and use it on a daily basis.
Some people might say, well but its only 4kb of memory, and 100 users, well I have seen by experience how even small applications which are poorly developed get this memory leaks and by a simple refactoring with a few Singletons here and there, the problem goes away.
### Scenario:
Any application at some point will need to read configuration variables from somewhere, imagine a SPFx web part which is a complex SPA with many screens and forms where you need to rely on a configuration SharePoint List, where you store information like: Number of Items per page, Max Number of Connections, Timeouts, Max Number of devices allowd, and things like that.
In this scenario it makes sense to build a class that will allow you easy retrieval of those values without you having to write code to retrieve the values in all screens or forms on the SPA.
It is a poor practice to repeat configuration access code everywhere in the system. If the physical location of configuration ever changes one would have to update many different files and lines of code. To solve this, developers implement a singleton for managing configuration.
For this sample only one file need to be added and the .tsx file modified to use the Singleton Pattern.
### ConfigurationManager.ts
```typescript
class ConfigurationManager {
private static instance: ConfigurationManager;
public constructor() {
// do something construct...
}
static getInstance(): ConfigurationManager {
if (!ConfigurationManager.instance) {
ConfigurationManager.instance = new ConfigurationManager();
// ... any one time initialization goes here ...
}
return ConfigurationManager.instance;
}
// excercise for the reader to get data from an external data source.
numberOfItemsPerPage(): number {
return 10;
}
maxNumberOfConnections(): number {
return 10;
}
restTimeout(): number {
return 1000;
}
}
export default ConfigurationManager;
```
And finally the component TSX where we use the singleton pattern from the Constructor.
```typescript
import * as React from "react";
import styles from "./Singleton.module.scss";
import { ISingletonProps } from "./ISingletonProps";
import { escape } from "@microsoft/sp-lodash-subset";
import ConfigurationManager from "./ConfigurationManager";
export default class Singleton extends React.Component<ISingletonProps, {}> {
private numberOfItemsPerPage: number;
private maxNumberOfConnections: number;
private restTimeout: number;
constructor(props: ISingletonProps, state: any) {
super(props);
let config:ConfigurationManager = ConfigurationManager.getInstance();
this.numberOfItemsPerPage = config.numberOfItemsPerPage();
this.maxNumberOfConnections = config.numberOfItemsPerPage();
this.restTimeout = config.restTimeout();
}
public render(): React.ReactElement<ISingletonProps> {
return (
<div className={ styles.singleton }>
<div className={ styles.container }>
<div className={ styles.row }>
<div className={ styles.column }>
<span className={ styles.title }>Welcome to SharePoint!</span>
<p className={ styles.subTitle }>Customize SharePoint experiences using Web Parts.</p>
<p className={ styles.description }>{escape(this.props.description)}</p>
<a href="https://aka.ms/spfx" className={ styles.button }>
<span className={ styles.label }>Learn more</span>
</a>
</div>
</div>
</div>
</div>
);
}
}
```
As you can see this clearly shows how to use the singleton pattern in a real life situation and I hope its clear to the reader and start using in your own projects
<img src="https://telemetry.sharepointpnp.com/sp-dev-fx-webparts/samples/designpatterns-typescript/singleton" />

5
samples/react-directory/README.md
View File

@ -46,11 +46,11 @@
* [Office 365 tenant](https://docs.microsoft.com/sharepoint/dev/spfx/set-up-your-development-environment)
## WebPart Properties
## Web Part Properties
Property |Type|Required| comments
--------------------|----|--------|----------
Title | Text| No|WebPart Title
Title | Text| No|Web Part Title
searchFirstName | boolean|No| Lastname or Firstname search query
Properties to search | text | No | By default **FirstName,LastName,WorkEmail,Department** are used for search. You can add custom properties separated by comma.
Properties to sent as clear text | text | No | By default if the search key has empty spaces, its replaced with **+** before sending it to the search query. The search properties mentioned here will be sent without the empty space replacemnt.
@ -79,6 +79,7 @@ Version|Date|Comments
## 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.**
---

3
samples/react-events-aggregator/README.md
View File

@ -8,7 +8,7 @@ Following issue [#659](https://github.com/SharePoint/sp-dev-fx-webparts/issues/6
## Summary
This sample shows how we can use the SPFx Event Aggregator to communicate between web parts through broadcasting events utilizing the [Publish–subscribe pattern](https://en.wikipedia.org/wiki/Publish–subscribe_pattern). It enables a webpart or component to raise event (broadcast message) through the SPFx event aggregator and that event is received by other web parts or components that have been subscribed to receive it.
This sample shows how we can use the SPFx Event Aggregator to communicate between web parts through broadcasting events utilizing the [Publish–subscribe pattern](https://en.wikipedia.org/wiki/Publish–subscribe_pattern). It enables a web part or component to raise event (broadcast message) through the SPFx event aggregator and that event is received by other web parts or components that have been subscribed to receive it.
> Please note the SPFx Event Aggregator is still in Alpha and **NOT SUPPORTED IN PRODUCTION USE**, but this sample will be updated in future when there are changes from the Alpha version to GA.
@ -43,6 +43,7 @@ Version|Date|Comments
0.0.3|November 18, 2018 | Sample deprecated
## 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.**
---

5
samples/react-faqapp/README.md
View File

@ -17,12 +17,13 @@ extensions:
## Summary
- This Web Part allows users to create Frequently Asked Questions(Faq App) in modern and classic SharePoint pages.
- This webpart allows to search within questions and answers which are stored in a SharePoint FAQ list.
- This web part allows to search within questions and answers which are stored in a SharePoint FAQ list.
- "React-autosuggest and react-accessible-accordion" react packages are used for the search and accordion control.
![Web part preview](assets/FAQWebpart.png)
## Used SharePoint Framework Version
![1.8.2](https://img.shields.io/badge/drop-1.8.2-green.svg)
## Applies to
@ -90,7 +91,7 @@ Column Name|Field Type
- Expand answers to your most frequent questions.
- Include text, links, images in your answers.
- A search bar to make your FAQ accordion searchable.
- This webpart allows to search within questions and answers which are stored in a SharePoint FAQ list.
- This web part allows to search within questions and answers which are stored in a SharePoint FAQ list.
- Sorting is enabled on both the category & Question
<img src="https://telemetry.sharepointpnp.com/sp-dev-fx-webparts/samples/react-FAQApp" />

15
samples/react-followedsites/README.md
View File

@ -2,7 +2,6 @@
> NOTE: This sample is available in the [PnP Starter Kit](https://github.com/pnp/sp-starter-kit). You can find the sample code for this web part at https://github.com/pnp/sp-starter-kit/tree/master/solution/src/webparts/followedSites.
This web part provides you the ability to display a list of site administrator defined number of sites that a given user is following, with paging as well as inline filtering of sites by keyword or phrase. Currently the list of followed sites includes classic as well as modern communication sites but does not include group enabled (modern) team sites.
![Followed Sites](https://github.com/pnp/sp-starter-kit/raw/master/assets/images/components/part-followed-sites.gif)
@ -15,29 +14,29 @@ This web part provides you the ability to display a list of site administrator d
## Configurable Properties
The `Followed Sites` webpart can be configured with the following properties:
The `Followed Sites` web part can be configured with the following properties:
| Label | Property | Type | Required | Description |
| ---- | ---- | ---- | ---- | ---- |
| Followed Sites | title | string | no | The webpart title, editable inline with the webpart itself |
| Followed Sites | title | string | no | The web part title, editable inline with the web part itself |
| Number of followed sites to retrieve | nrOfItems | number | no | The number of sites to show per page, default = 10 |
| Specify the sort order of the retrieved sites | sortOrder | number | no | Preferred site sort order. Default sort order driven by SharePoint, or by site name |
# Installing the web part
## Installing the web part
See getting started from [SP-Starter-Kit repository readme](https://github.com/SharePoint/sp-starter-kit).
You can also download just the [SharePoint Framework solution package (spppkg) file](https://github.com/SharePoint/sp-starter-kit/blob/master/package/sharepoint-starter-kit.sppkg) and install that to your tenant. This web part utilizes the SharePoint Rest API, `/_api/social.following/my/followed(types=4)`, endpoint.
# Screenshots
## Screenshots
![Followed Sites](https://github.com/pnp/sp-starter-kit/raw/master/assets/images/components/part-followed-sites.png)
# Source Code
## Source Code
https://github.com/SharePoint/sp-starter-kit/tree/master/solution/src/webparts/followedSites
# Minimal Path to Awesome
## Minimal Path to Awesome
- Clone this repository
- Move to Solution folder
@ -45,7 +44,7 @@ https://github.com/SharePoint/sp-starter-kit/tree/master/solution/src/webparts/f
- `npm install`
- `gulp serve`
# Version history
## Version history
Version|Date|Comments
-------|----|--------

2
samples/react-github-badge/README.md
View File

@ -48,7 +48,7 @@ Version|Date|Comments
This sample illustrates how to convert an existing Javascript-only SPFx web part to a React SPFx web part while keeping the same look and feel. Please refer to the [js-GitHubBadge](https://github.com/SharePoint/sp-dev-fx-webparts/tree/master/samples/js-gitHubBadge) sample for the original Javascript-only web part.
A second webpart (called `GitHub Badge v2`) demonstrates how to render the same data using a Fabric UI persona card.
A second web part (called `GitHub Badge v2`) demonstrates how to render the same data using a Fabric UI persona card.
For more information about the conversion process, refer to this [blog article](https://tahoeninjas.blog/2019/04/19/converting-spfx-from-javascript-to-react/).

3
samples/react-graph-pnpjs/README.md
View File

@ -1,7 +1,7 @@
# Using PnPJS with Microsoft Graph
## Summary
This webpart demonstrates how to use [PnPJS](https://pnp.github.io/pnpjs/) with SharePoint Framework and how to query [Microsoft Graph](https://docs.microsoft.com/en-us/graph/overview) with PnPJS.
This web part demonstrates how to use [PnPJS](https://pnp.github.io/pnpjs/) with SharePoint Framework and how to query [Microsoft Graph](https://docs.microsoft.com/en-us/graph/overview) with PnPJS.
It requests a list of Azure AD [groups](https://docs.microsoft.com/en-us/graph/api/group-list?view=graph-rest-1.0) at your tenant and shows them using [Office UI Fabric React](https://developer.microsoft.com/en-us/fabric#/components) list.
![Main UI](./assets/summary.png)
@ -28,6 +28,7 @@ Version|Date|Comments
1.0|Jan 09, 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.**
---

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

@ -67,7 +67,7 @@ Description of the web part with possible additional details than in short summa
This Web Part illustrates the following concepts on top of the SharePoint Framework:
* Detail List control from Fluent UI
* Webpart Title control from PnP React
* Web part Title control from PnP React
* Microsoft Graph API
* External API Integration with SharePoint Framework

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

@ -1,7 +1,7 @@
# React Hooks Form WebPart
## Summary
The `React Hooks web part` is an example of how to implement Hooks in Spfx.
The `React Hooks web part` is an example of how to implement Hooks in SPFx.
Hooks is a new feature included in React version 16.8, with the new version of **SharePoint Framework (SPFx) version 1.9.1** we can use them in our developments. In this example we are going to see the different types of hooks that are available and with the comparison of how this implementation can be done without the Hooks to be able to observe the benefits of using it.
![Brithdays Web Part](./assets/webpart.PNG)
@ -54,4 +54,4 @@ This Web Part illustrates the following concepts on top of the SharePoint Framew
- Using React Hooks for building SharePoint Framework client-side web parts.
- Using @PnP/PnPjs to read items ...
<img src="https://telemetry.sharepointpnp.com/sp-dev-fx-webparts/samples/react-hooks" />
<img src="https://telemetry.sharepointpnp.com/sp-dev-fx-webparts/samples/react-hooks" />

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

@ -1,7 +1,7 @@
# Image Slider from Photo Gallery using Taxonomy Filter
## Summary
This webpart display the image in slider based on the filter of Taxonomy from Property panel. Images are stored in PhotoGallery and tagged with Taxonomy. This web part showcase 3 important implementation.
This web part display the image in slider based on the filter of Taxonomy from Property panel. Images are stored in PhotoGallery and tagged with Taxonomy. This web part showcase 3 important implementation.
- How to add the Terms in the propertypage and pass the values to react component
- How to filter the list based on Taxonomy and extract the Image URL
@ -35,6 +35,7 @@ Version|Date|Comments
1.0|March 1, 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.**
---

8
samples/react-kanban-board/README.md
View File

@ -19,8 +19,8 @@ extensions:
## Summary
This solution contains an SPFx webpart that shows a kanban board using Office UI Fabric components ([Office UI Fabric](https://developer.microsoft.com/fluentui/)).
The webpart uses the default columns of the SharePoint Tasks list for showing the board's columns and the tasks.
This solution contains an SPFx web part that shows a kanban board using Office UI Fabric components ([Office UI Fabric](https://developer.microsoft.com/fluentui/)).
The web part uses the default columns of the SharePoint Tasks list for showing the board's columns and the tasks.
![picture of the web part in action](assets/kanbanofficeUI.gif)
@ -35,7 +35,7 @@ The webpart uses the default columns of the SharePoint Tasks list for showing th
## Prerequisites
This webpart reads the information from a Tasks list and uses the following OOB columns
This web part reads the information from a Tasks list and uses the following OOB columns
* Task Name
* Assigned To
* % Complete
@ -43,7 +43,7 @@ This webpart reads the information from a Tasks list and uses the following OOB
* Priority
* Task Status
The Task list can be chosen using the webpart properties (BaseTemplate 171 or 107)
The Task list can be chosen using the web part properties (BaseTemplate 171 or 107)
## Solution

6
samples/react-links/README.md
View File

@ -13,15 +13,15 @@ Links and groups are both customizable.
1. Place the page you want to add this web part to in edit mode.
2. Search for and insert the **Links** web part.
3. Configure the webpart to update its properties.
3. Configure the web part to update its properties.
## Configurable Properties
The `Links` webpart can be configured with the following properties:
The `Links` web part can be configured with the following properties:
| Label | Property | Type | Required | Description |
| ---- | ---- | ---- | ---- | ---- |
| Useful links | title | string | no | The webpart title, editable inline with the webpart itself |
| Useful links | title | string | no | The web part title, editable inline with the web part itself |
| Group names for the links | groupData | collection | no | Collection of group names for grouping links into sets |
| Link data | collectionData | collection | no | Collection of links |

4
samples/react-lob-integration/README.md
View File

@ -53,11 +53,11 @@ Grant-PnPTenantServicePrincipalPermission -Resource "SPFx-LOB-Function" -Scope "
1. Place the page you want to add this web part to in edit mode.
2. Search for and insert the **LobIntegration** web part.
3. Configure the webpart to update its properties.
3. Configure the web part to update its properties.
## Configurable Properties
The `LobIntegration` webpart can be configured with the following properties:
The `LobIntegration` web part can be configured with the following properties:
| Label | Property | Type | Required | Description |
| ---- | ---- | ---- | ---- | ---- |

2
samples/react-manage-spfx-solutions-alm/README.md
View File

@ -14,7 +14,7 @@ This web part acts as a centralized place where admin can manage SPFx solutions
**Note:**
This webpart is mainly build for tenant and SharePoint admins, since most of the operation requires administrator privileges.
This web part is mainly build for tenant and SharePoint admins, since most of the operation requires administrator privileges.
## Used SharePoint Framework Version

3
samples/react-members-with-presence/README.md
View File

@ -1,6 +1,7 @@
# Spfx Webpart Group members list with Presence information
# SPFx Web part Group members list with Presence information
## Summary
This sample shows how to get the members of a specific group, including their presence information (using the new Presence endpoint in the MS Graph API).
![Members with Presence](./assets/react-members-with-presence.gif)

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

@ -1,17 +1,19 @@
# Using Mobx with multiple stores
## Summary
A sample webpart that uses the [Mobx](https://mobx.js.org/) library with multiple stores to keep track of the applications state.
A sample web part that uses the [Mobx](https://mobx.js.org/) library with multiple stores to keep track of the applications state.
<img src="assets/demo.gif"/>
## Used SharePoint Framework Version
![drop](https://img.shields.io/badge/version-1.8.2-green.svg)
## Applies to
* [SharePoint Framework](https://docs.microsoft.com/sharepoint/dev/spfx/sharepoint-framework-overview)
* [SharePoint Framework Webpart Samples](https://github.com/SharePoint/sp-dev-fx-webparts)
* [SharePoint Framework Web part Samples](https://github.com/SharePoint/sp-dev-fx-webparts)
* [Office 365 developer tenant](https://docs.microsoft.com/sharepoint/dev/spfx/set-up-your-developer-tenant)
## Solution
@ -27,6 +29,7 @@ Version|Date|Comments
1.0|May 24, 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.**
---

5
samples/react-mobx/README.md
View File

@ -16,7 +16,7 @@ extensions:
# Using Mobx
## Summary
Sample webpart implementation that uses [Mobx](https://github.com/mobxjs/mobx) to keep track of its state.
Sample web part implementation that uses [Mobx](https://github.com/mobxjs/mobx) to keep track of its state.
### Reactive
![](https://i.gyazo.com/e6f1903b9a9c8201985cd25cc1fe28bc.gif)
@ -45,6 +45,7 @@ Version|Date|Comments
1.0|November 4, 2016|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.**
---
@ -62,6 +63,6 @@ $ gulp serve
* Presentational (dumb) components live in `./components`
* Container (smart) components live in `./container`
* Mobx stores are defined in `./store` with a sample webpart store that keeps track of the webpart properties.
* Mobx stores are defined in `./store` with a sample web part store that keeps track of the web part properties.
<img src="https://telemetry.sharepointpnp.com/sp-dev-fx-webparts/samples/react-mobx" />

2
samples/react-modern-charts/README.md
View File

@ -17,7 +17,7 @@ extensions:
## Summary
This webpart uses the Chart.js library to visualize SharePoint list data.
This web part uses the Chart.js library to visualize SharePoint list data.
Built in Chart Types:
-Bar

2
samples/react-modern-organization-chart/README.md
View File

@ -17,7 +17,7 @@ extensions:
## Summary
This webpart show organization chart for current user, shows, managers and direct reports and there available status.
This web part show organization chart for current user, shows, managers and direct reports and there available status.
On Click the profile page of will be open.

16
samples/react-multilist-grid/README.md
View File

@ -1,15 +1,15 @@
# Multilist Grid
## Summary
React-multilist-grid is an SPFx webpart that uses React, Office-UI-Fabric, and Redux to let users edit list data from lists that reside in multiple webs and multiple sites in a single grid, similar to Quick Edit mode. The lists do not to be of the same type – you just need to create column mappings to tell the webpart which fields to show in which columns of the grid.
React-multilist-grid is an SPFx web part that uses React, Office-UI-Fabric, and Redux to let users edit list data from lists that reside in multiple webs and multiple sites in a single grid, similar to Quick Edit mode. The lists do not to be of the same type – you just need to create column mappings to tell the web part which fields to show in which columns of the grid.
The configuration panel of the webpart is show below. It has two buttons—one to configure the columns that will be displayed on the grid, and another to configure the lists that contain the data to be edited.
The configuration panel of the web part is show below. It has two buttons—one to configure the columns that will be displayed on the grid, and another to configure the lists that contain the data to be edited.
![config panel](./src/images/Configuration.PNG)
Clicking on the Update Columns button shows the Column Definition configuration panel shown below:
![columnDefinitions panel](./src/images/columnDefinitions.PNG)
When adding a column the webpart automatically assigns a guid for internal use. In the &#39;name&#39; field you can use any name you like. The text entered here will be used as the column header in the grid. In the &#39;type&#39; field, you need to select the type of data to be displayed:
When adding a column the web part automatically assigns a guid for internal use. In the &#39;name&#39; field you can use any name you like. The text entered here will be used as the column header in the grid. In the &#39;type&#39; field, you need to select the type of data to be displayed:
![ColumnTypes panel](./src/images/ColumnTypes.PNG)
These are SharePoint field types for the most part(not all field types have been implemented yet). There is one &#39;special&#39; field type called &#39;List Title&#39;. It is used to identify which list an item came from when displayed in the grid. You can move an item from one list (and site) to another by changing the selected list title in the grid. In the &#39;editable&#39; field you can specify whether this field can be edited in the grid(not yet implemented). The sortSequence and sortDirection field let you set up default sorting on a given column.
@ -20,7 +20,7 @@ After defining all the columns to be displayed in your grid, click the save icon
Clicking the Update Lists button on the configuration panel will open the List Definitions panel:
![ListDefinitions panel](./src/images/ListDefinitions.PNG)
Here you configure which lists the webpart should display in the grid. When adding a list the webpart automatically assigns a guid for internal use. In the &#39;SiteUrl&#39; you must enter the url of the site collection that contains the list. In the &#39;List Definition Title&#39; field enter a user friendly title for this list. The text you enter here will be shown on the grid for all items that came from this list in the &#39;List Title&#39; column (provided you have created a &#39;List Title&#39; column.
Here you configure which lists the web part should display in the grid. When adding a list the web part automatically assigns a guid for internal use. In the &#39;SiteUrl&#39; you must enter the url of the site collection that contains the list. In the &#39;List Definition Title&#39; field enter a user friendly title for this list. The text you enter here will be shown on the grid for all items that came from this list in the &#39;List Title&#39; column (provided you have created a &#39;List Title&#39; column.
When you tab to the &#39;Web Containing List&#39; field, you can use the search icon:
@ -48,14 +48,14 @@ Choose the field you want to have displayed for this list in the specified colum
Click the save button in the command bar once you are done defining all your lists.
The webpart will now display a grid showing all of the items in the lists you have selected:
The web part will now display a grid showing all of the items in the lists you have selected:
![editListItems](./src/images/editListItems.PNG)
You can edit any cell in the grid by tabbing to it, or clicking on it. To move an item between lists, simply click on the &#39;List Title&#39; column and choose a new list:
![MoveListItem](./src/images/MoveListItem.PNG)
If you change a field of type &#39;user&#39;, the webpart will attempt to lookup the user in the destination site and use that user when adding the item to the new site. Similar mappings are done for other column types.
If you change a field of type &#39;user&#39;, the web part will attempt to lookup the user in the destination site and use that user when adding the item to the new site. Similar mappings are done for other column types.
You can click the save icon on each row to save the selected row back to SharePoint. The delete icon can be used to mark an item to be deleted:
![deleteitem](./src/images/deleteitem.PNG)
@ -93,6 +93,7 @@ Version|Date|Comments
## 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.**
---
@ -108,7 +109,8 @@ Version|Date|Comments
> Include any additional steps as needed.
## Features
An SPFx Webpart that uses React, Office-UI-Fabric, and Redux to let users edit list data from multiple Webs and Multiple Sites in a single grid.
An SPFx Web part that uses React, Office-UI-Fabric, and Redux to let users edit list data from multiple Webs and Multiple Sites in a single grid.
Usage:

6
samples/react-my-groups/README.md
View File

@ -17,9 +17,9 @@ extensions:
## Summary
Using Microsoft Graph, this webpart grabs the Office 365 groups the current user is a member of with links to the groups SharePoint site.
Using Microsoft Graph, this web part grabs the Office 365 groups the current user is a member of with links to the groups SharePoint site.
The webpart has been updated to include a grid like in addition to the compact layout as seen below:
The web part has been updated to include a grid like in addition to the compact layout as seen below:
![Grid Demo](./assets/React-MyGroups_Grid.png)
Compact Layout:
@ -66,7 +66,7 @@ Version|Date|Comments
* `gulp package-solution --ship`
* Add the package to your app catalog
* Approve the Graph API permissions in the SharePoint admin center
* Add the webpart to your page
* Add the web part to your page
## Features

7
samples/react-offline-first/README.md
View File

@ -17,10 +17,10 @@ extensions:
## Summary
Sample Webpart that demonstrates how to use offline storage in a way that is more
Sample Web part that demonstrates how to use offline storage in a way that is more
offline first.
This webpart would not be possible without the great tools provided, please
This web part would not be possible without the great tools provided, please
read the documentation for
* [LocalForage](https://github.com/localForage/localForage)
* [ES6-Promise](https://github.com/stefanpenner/es6-promise)
@ -51,6 +51,7 @@ Version |Date | Comments
0.0.3 |18/Feb/18 | Updated JSDocs, and and created readme.
## 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.**
---
@ -67,7 +68,7 @@ Version |Date | Comments
## Features
This webpart demonstrates using the OfflineFirstHTTPService how to do offline
This web part demonstrates using the OfflineFirstHTTPService how to do offline
first HTTP Requests.
HTTP Get requests are first retrieved from an offline storage system. Either

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

@ -16,7 +16,7 @@ extensions:
# Organisation Chart
## Summary
A simple Organisation Chart webpart using Office UI Fabric, React, REST API batching and ServiceScope plumbing.
A simple Organisation Chart web part using Office UI Fabric, React, REST API batching and ServiceScope plumbing.
![Organisation Chart for the current user running in SharePoint](./assets/orgchart.png)
@ -45,6 +45,7 @@ Version|Date|Comments
2.1|July 19, 2017|Use office-ui-fabric-react and uifabric/styling
## 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.**
---

2
samples/react-people-directory/README.md
View File

@ -10,7 +10,7 @@ This web part provides you the ability to add a searchable people directory. A p
1. Place the page you want to add this web part to in edit mode.
2. Search for and insert the **People Directory** web part.
3. Configure the webpart to update its properties.
3. Configure the web part to update its properties.
## Configurable Properties

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

@ -52,7 +52,7 @@ gulp serve
gulp bundle --ship
```
- Execute the following task to package your solution. This creates an updated webpart `.sppkg` package on the `sharepoint/solution` folder.
- Execute the following task to package your solution. This creates an updated web part `.sppkg` package on the `sharepoint/solution` folder.
```bash
gulp package-solution --ship

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

@ -32,6 +32,7 @@ Version|Date|Comments
1.0|march 19, 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.**
---
@ -49,7 +50,7 @@ Version|Date|Comments
This project consists of four webparts that can be used to manage the Property Bags for SharePoint sites and display navigational components from those Properties.
- PropertyBagEditor
This webpart allows an administrator to edit selected items in a site&#39;s Property Bag. A sample display is shown below:
This web part allows an administrator to edit selected items in a site&#39;s Property Bag. A sample display is shown below:
![PropertyBagEditorDisplay](./src/images/PropertyBagEditorDisplay.PNG)
Selecting a Property and clicking the Edit button will bring up the Edit Panel:
@ -62,9 +63,9 @@ The Properties that can be edited are specified in the webpart&#39;s Property Pa
![PropertyBagEditorEdur](./src/images/PropertyBagEditorConfig.PNG)
The Properties set in the Property Pane of this webpart are crawled properties, and should be mapped to managed properties so that can be used by the other webparts in this project.
The Properties set in the Property Pane of this web part are crawled properties, and should be mapped to managed properties so that can be used by the other webparts in this project.
The Site whose properties are to be edited can be passed in via a query parameter. While this webpart can be added to any page, it would be most useful if added to a page in an infrastructure site collection in the tenant, and then linked to from all other sites via a link in the Site Settings page.
The Site whose properties are to be edited can be passed in via a query parameter. While this web part can be added to any page, it would be most useful if added to a page in an infrastructure site collection in the tenant, and then linked to from all other sites via a link in the Site Settings page.
The following script shows how to add such a link to all sites &#39;Site Settings&#39; page using PNP Powershell. It will add a menu item named &#39;Edit Site Metadata &#39; to the Site Settings of each Team Site that links to the PropertBagEdcitor.aspx page on the tenants infrastructure site (this site is named 'cdn' in the example below).
@ -112,7 +113,7 @@ foreach($site in $sites){
```
- PropertyBagDisplay
The propertyBagDisplay webpart can be used by an administrator to view and edit selected properties across sites in the tenant:
The propertyBagDisplay web part can be used by an administrator to view and edit selected properties across sites in the tenant:
![PropertyBagDisplay](./src/images/PropertyBagDisplayDisplay.PNG)
@ -122,14 +123,14 @@ In the Property Pane, an administrator must specify both the Crawled Property Na
The administrator can also include a list of site templates to narrow down the list of sites to be included in the webpart. When specifying site templates to include you can include just the Site Template Name (STS) and all sites within that template name will be included, or you can specify the Site Template Name and ID, separated by a &#39;#&quot; character (STS#1) to have only sites with that template name and ID included.
The webpart displays the site template, Title and Url, plus the selected Managed Properties for all sites in the tenant with the selected site template. The Managed Properties are only displayed if they have been set as searchable, and a full crawl has been run. After selecting a Site, a user can click the edit button to edit the Crawled properties (i.e. the raw property bag values) for the selected site:
The web part displays the site template, Title and Url, plus the selected Managed Properties for all sites in the tenant with the selected site template. The Managed Properties are only displayed if they have been set as searchable, and a full crawl has been run. After selecting a Site, a user can click the edit button to edit the Crawled properties (i.e. the raw property bag values) for the selected site:
![PropertyBagDisplayEdit](./src/images/PropertyBagDisplayEdit.PNG)
On the edit panel one can specify a new value for each property as well as whether that property is to be included in the search index. Additionally one can specify that a full crawl of the site should be run once the properties are saved.
- PropertyBagFilteredSiteList
This webpart displays a list of all sites that meet the criteria specified in the property pane by the administrator:
This web part displays a list of all sites that meet the criteria specified in the property pane by the administrator:
![PropertyBagFilteredSiteListDisplay](./src/images/PropertyBagFilteredSiteListDisplay.PNG)
@ -140,7 +141,7 @@ Additionally, it lets the user narrow down the list of sites displayed by applyi
In the PropertyPane above, the 'Site Templates to Include' and 'Metadata Filters' are used to filter which site collections are retrieved from search. The 'User Filters' are used to allow the user to easily filter the results returned from search using the command bar on the top of the display.
- PropertyBagGlobalNav
This Webpart builds a navigation menu based on the Managed Properties set up in the PropertyPane:
This Web part builds a navigation menu based on the Managed Properties set up in the PropertyPane:
![propertyBagGlobalNavDisplay](./src/images/propertyBagGlobalNavDisplay.PNG)

5
samples/react-provision-assets/README.md
View File

@ -17,7 +17,7 @@ extensions:
## Summary
This sample shows how we can provision Document Library, Custom List, Web and List PropertyBag properties, Site Columns, Content Types, Images, Site Page with the SFPx Client side webpart and even prepopulated list and library items along with the SPFx solution package. All of the components can be deployed at once with the SPFx webpart when the app is added to a SharePoint site. It also contains custom list and document library xml schemas.
This sample shows how we can provision Document Library, Custom List, Web and List PropertyBag properties, Site Columns, Content Types, Images, Site Page with the SFPx Client side web part and even prepopulated list and library items along with the SPFx solution package. All of the components can be deployed at once with the SPFx web part when the app is added to a SharePoint site. It also contains custom list and document library xml schemas.
![The yammer search web part displayed in SharePoint online](./assets/spfx-provision-assets.gif)
@ -30,7 +30,7 @@ This sample shows how we can provision Document Library, Custom List, Web and Li
* [SharePoint Framework](https://docs.microsoft.com/sharepoint/dev/spfx/sharepoint-framework-overview)
* [Office 365 developer tenant](https://docs.microsoft.com/sharepoint/dev/spfx/set-up-your-developer-tenant)
** The SPFx webpart will work in local workbench, but not the assets. They can be provisioned only when the app is deployed since they are SharePoint specific.
** The SPFx web part will work in local workbench, but not the assets. They can be provisioned only when the app is deployed since they are SharePoint specific.
## Prerequisites
@ -51,6 +51,7 @@ Version|Date|Comments
0.0.1|June 17, 2017 | Initial commit
## 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.**
---

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

@ -2,7 +2,7 @@
## Summary
This webpart displays a quote of the day by querying a third-party api or can display a quote entered manually into the webpart property pane.
This web part displays a quote of the day by querying a third-party api or can display a quote entered manually into the web part property pane.
![picture of the web part in action](./assets/react-quotes-sample.png)
@ -38,11 +38,11 @@ Version|Date|Comments
* in the command line run:
* `npm install`
* `gulp serve`
* In the browser that opens add the webpart to your page.
* After the webpart has loaded it will load the quote automatically or you can edit the webparts properties to display a manual quote.
* In the browser that opens add the web part to your page.
* After the web part has loaded it will load the quote automatically or you can edit the webparts properties to display a manual quote.
## Features
This webpart loads a random quote from a third-party api (https://favqs.com/api). Additionally a quote can be entered manually and the text color of the quote and author can be adjusted through the webpart properties.
This web part loads a random quote from a third-party api (https://favqs.com/api). Additionally a quote can be entered manually and the text color of the quote and author can be adjusted through the web part properties.
<img src="https://telemetry.sharepointpnp.com/sp-dev-fx-webparts/samples/readme-template" />

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

@ -2,7 +2,7 @@
## Summary
This is sample webpart which showcase how to implement Google reCaptcha v2 in SPFx. CAPTCHA is used to prevent bots from automatically submitting forms with SPAM or other unwanted content. If we are building a custom input form to get feedback, newsletter subscription or contact us form using SPFx webpart. We might have to implement SPAM protection using some CAPTCHA resolving technique. This sample can come in handy to extend it for your
This is sample web part which showcase how to implement Google reCaptcha v2 in SPFx. CAPTCHA is used to prevent bots from automatically submitting forms with SPAM or other unwanted content. If we are building a custom input form to get feedback, newsletter subscription or contact us form using SPFx webpart. We might have to implement SPAM protection using some CAPTCHA resolving technique. This sample can come in handy to extend it for your
business requirement if you need to implement CAPTCHA in SPFx webpart.
* Please refer this [link](https://www.c-sharpcorner.com/article/google-recaptcha-in-sharepoint-framework-webpartspfx/) to know 'How to build this from Scratch'

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

@ -13,10 +13,10 @@ extensions:
- react
createdDate: 8/1/2017 12:00:00 AM
---
# SharePoint Framework webpart sample using React, Redux and ImmutableJS
# SharePoint Framework web part sample using React, Redux and ImmutableJS
## Summary
SharePoint Framework webpart which uses [Redux](http://redux.js.org/) to maintain a single state for the entire application and [ImmutableJS](https://facebook.github.io/immutable-js/) to create performant state trees.
SharePoint Framework web part which uses [Redux](http://redux.js.org/) to maintain a single state for the entire application and [ImmutableJS](https://facebook.github.io/immutable-js/) to create performant state trees.
Redux AJAX actions are used together with the SharePoint REST API to display lists in your site. You can also add a new list to the site from this webpart.
@ -45,6 +45,7 @@ Version|Date|Comments
1.0|July 11, 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.**
---

15
samples/react-redux/README.md
View File

@ -13,18 +13,22 @@ extensions:
- React
createdDate: 1/1/2016 12:00:00 AM
---
# Webpart with React and Redux
# Web part with React and Redux
## Summary
Sample webpart implementation that uses [Redux](https://github.com/reactjs/redux) to keep track of its state.
Sample web part implementation that uses [Redux](https://github.com/reactjs/redux) to keep track of its state.
### Reactive
![](https://i.gyazo.com/729c4addf6c992513f8eb91a3fa0e302.gif)
### Non-Reactive
![](https://i.gyazo.com/1981f22fa6a162931a29ce8dad9c2657.gif)
## Used SharePoint Framework Version
## Used SharePoint Framework Version
![drop](https://img.shields.io/badge/drop-drop5-red.svg)
## Applies to
@ -45,6 +49,7 @@ Version|Date|Comments
1.0|October 28, 2016|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.**
---
@ -62,8 +67,8 @@ $ gulp serve
* Presentational (dumb) components live in `./components`
* Container (smart) components live in `./container`
* Redux reducers are defined in `./reducers` with a sample webpart reducer that stores the webpart properties.
Webpart reducer implementation follows the [ducks pattern](https://github.com/erikras/ducks-modular-redux).
* Redux reducers are defined in `./reducers` with a sample web part reducer that stores the web part properties.
Web part reducer implementation follows the [ducks pattern](https://github.com/erikras/ducks-modular-redux).
* Redux store configuration defined in `./store`
<img src="https://telemetry.sharepointpnp.com/sp-dev-fx-webparts/samples/react-redux" />

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

@ -1,7 +1,7 @@
# SPFx webpart using Redux-Form library and React
# SPFx web part using Redux-Form library and React
## Summary
Sample webpart to demonstrate the use of [Redux-Form](https://github.com/erikras/redux-form) library with SPFx, React and Typescript. Demonstrates how to easily build a dynamic grid using redux-form.
Sample web part to demonstrate the use of [Redux-Form](https://github.com/erikras/redux-form) library with SPFx, React and Typescript. Demonstrates how to easily build a dynamic grid using redux-form.
@ -34,13 +34,14 @@ Version|Date|Comments
1.0|May 02, 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.**
---
## Minimal Path to Awesome
- The webpart requires two custom lists in the SharePoint site. The folder "SetupScript" contains a PnP PowerShell script that will setup the custom fields, content type and the required lists.
- The web part requires two custom lists in the SharePoint site. The folder "SetupScript" contains a PnP PowerShell script that will setup the custom fields, content type and the required lists.
- Change the site URL in the PowerShell script and execute with proper credentials to setup the lists.
@ -54,19 +55,19 @@ Version|Date|Comments
## Features
- This is a data entry webpart to create a "Purchase Request". Each purchase request can have several items that can be ordered within it.
- This is a data entry web part to create a "Purchase Request". Each purchase request can have several items that can be ordered within it.
- The webpart interacts with two SharePoint lists - "PurchaseRequest" and "PurchaseRequestItems".
- The web part interacts with two SharePoint lists - "PurchaseRequest" and "PurchaseRequestItems".
- The purchase request is created in the "PurchaseRequest" list. The purchase items are stored in separate "PurchaseRequestItems" list along with the ListItem ID of the corrosponding PurchaseRequest item.
Redux-Form :
Redux-Form :
- Webpart makes use of [Redux-Form](https://github.com/erikras/redux-form) library which makes it easy to maintain the state of form fields without explicitly requiring to maintain the state everytime data in a form field is added/updated/deleted.
- Web part makes use of [Redux-Form](https://github.com/erikras/redux-form) library which makes it easy to maintain the state of form fields without explicitly requiring to maintain the state everytime data in a form field is added/updated/deleted.
Refer to the [Getting started](https://redux-form.com/6.4.3/docs/gettingstarted.md/) guide for the basics of redux-form
- The sample demonstrates how to integrate redux-form in SPFx webpart and develop a dynamic grid component using [FieldArray](https://redux-form.com/6.4.3/docs/api/fieldarray.md/) component of redux-form.
- The sample demonstrates how to integrate redux-form in SPFx web part and develop a dynamic grid component using [FieldArray](https://redux-form.com/6.4.3/docs/api/fieldarray.md/) component of redux-form.
- The sample also uses custom renderers for form fields along with required field and number validations.

4
samples/react-rss-reader/README.md
View File

@ -77,7 +77,7 @@ Version|Date|Comments
Setting | Description
-------|----
Feed Url | The url of the RSS Feed for readers. Normally will url will return XML
Feed Retrieval Service | The service to use to retrieve the feed. **Direct** = Make a direct call from the webpart to the feed. Note, may have issues with CORS depending on the feed owner. **Feed2Json** = Retrieve a JSON version of feed via feed2json.org. Note, not for production, and may have issues with CORS. For production use, host your own feed2json service. Learn more at https://github.com/appsattic/feed2json.org. **Rss2Json** = CORS safe method to retieve a feed response. Note, subject to limitations with paid options available.
Feed Retrieval Service | The service to use to retrieve the feed. **Direct** = Make a direct call from the web part to the feed. Note, may have issues with CORS depending on the feed owner. **Feed2Json** = Retrieve a JSON version of feed via feed2json.org. Note, not for production, and may have issues with CORS. For production use, host your own feed2json service. Learn more at https://github.com/appsattic/feed2json.org. **Rss2Json** = CORS safe method to retieve a feed response. Note, subject to limitations with paid options available.
Feed Service Url | If using Feed2Json, the url of the feed2json service. Host your own service, learn more at https://github.com/appsattic/feed2json.org
Feed Service API Key | If using rss2json, an optional API key for paid services
Max Count | The maximum results to return, default: 10
@ -109,7 +109,7 @@ Description Character Limit | The maximum number of description characters to di
Link Target | The "target" of a listing link, default: _blank
Date Format | The Moment based format format of the listing date, i.e. DD/MM/YYYY (European), default: MM/DD/YYYY
Title Color | Color override for a listing title
Background Color | Color override for the webpart background
Background Color | Color override for the web part background
## Features
This Web Part illustrates the following concepts on top of the SharePoint Framework:

3
samples/react-rxjs-event-emitter/README.md
View File

@ -17,7 +17,7 @@ extensions:
## Summary
This sample shows how we can use the [ReactiveX (RxJs)](http://reactivex.io/) library with the SharePoint Framework to communicate between web parts through broadcasting events utilizing the [Publish–subscribe pattern](https://en.wikipedia.org/wiki/Publish–subscribe_pattern). It enables a webpart or component to emit event (broadcast message) and that event is received by other web parts or components that have been subscribed to receive it. Please note this is custom implementation of the [Publish–subscribe pattern](https://en.wikipedia.org/wiki/Publish–subscribe_pattern) by using the [ReactiveX (RxJs)](http://reactivex.io/) library. The SPFx will nativelly support this in future without the need of custom implementation through new SPFx api called Event Aggregator, but it is still in Alpha.
This sample shows how we can use the [ReactiveX (RxJs)](http://reactivex.io/) library with the SharePoint Framework to communicate between web parts through broadcasting events utilizing the [Publish–subscribe pattern](https://en.wikipedia.org/wiki/Publish–subscribe_pattern). It enables a web part or component to emit event (broadcast message) and that event is received by other web parts or components that have been subscribed to receive it. Please note this is custom implementation of the [Publish–subscribe pattern](https://en.wikipedia.org/wiki/Publish–subscribe_pattern) by using the [ReactiveX (RxJs)](http://reactivex.io/) library. The SPFx will nativelly support this in future without the need of custom implementation through new SPFx api called Event Aggregator, but it is still in Alpha.
![SPFx ReactiveX (RxJs) Event Emitter Sample](./assets/spfx-event-emitter.gif)
@ -49,6 +49,7 @@ Version|Date|Comments
0.0.3|December 10, 2018 | Updated to SPFx v1.7.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.**
---

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

@ -39,7 +39,7 @@ The user can change alternate between displaying user names and emails selectin
![Select Mode](./src/images/SelectDisplayModePopout.PNG)
The the first configuration panel of the webpart is shown below:
The the first configuration panel of the web part is shown below:
![config panel](./src/images/Configuration.PNG)

2
samples/react-site-information/README.md
View File

@ -54,6 +54,6 @@ https://github.com/SharePoint/sp-starter-kit/tree/master/solution/src/webparts/s
Version|Date|Comments
-------|----|--------
1.0|May 2018|Initial release
1.1|June 2018|Link webpart to proper term group and term set
1.1|June 2018|Link web part to proper term group and term set
<img src="https://telemetry.sharepointpnp.com/sp-dev-fx-webparts/samples/react-site-information" />

3
samples/react-skype-status/README.md
View File

@ -51,6 +51,7 @@ Version|Date|Comments
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.**
---
@ -79,7 +80,7 @@ After copying that sample to your local machine and running `npm install` to ins
### Deploying the application
Start by running `gulp package-solution` and deploy the application to the app catalog. More information on how to do it [here](https://docs.microsoft.com/en-us/sharepoint/dev/spfx/web-parts/get-started/serve-your-web-part-in-a-sharepoint-page)
**At the end select SkypePresence webpart instead**
**At the end select SkypePresence web part instead**
Don't forget to run `gulp serve --nobrowser` to start the debugging server.
### Addtional page required

3
samples/react-slide-swiper/README.md
View File

@ -53,6 +53,7 @@ Version|Date|Comments
0.0.3|December 10, 2018 | Upgrade to 1.7.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.**
---
@ -75,7 +76,7 @@ This Web Part illustrates the following concepts on top of the SharePoint Framew
## SharePoint info
When using the webpart in SharePoint, either in the SharePoint Workbench or deployed, the webpart reads by default from a List called "Swiper Content" with fields Title, ImageUrl, Description of type Single line of text. The list has to be created manually.
When using the web part in SharePoint, either in the SharePoint Workbench or deployed, the web part reads by default from a List called "Swiper Content" with fields Title, ImageUrl, Description of type Single line of text. The list has to be created manually.
<img src="https://telemetry.sharepointpnp.com/sp-dev-fx-webparts/samples/react-slide-swiper" />

3
samples/react-sp-pnp-js-property-decorators/README.md
View File

@ -1,7 +1,7 @@
# Using PnP JS Core custom objects with @select and @expand decorators
## Summary
This webpart demonstrates how to use [PnP JS Core](https://github.com/SharePoint/PnP-JS-Core) Custom Objects with @select and @expand TypeScript decorators.
This web part demonstrates how to use [PnP JS Core](https://github.com/SharePoint/PnP-JS-Core) Custom Objects with @select and @expand TypeScript decorators.
If you are going to use PnP JS Core library and you've plans for [extending it with Custom Business Objects](https://github.com/SharePoint/PnP-JS-Core/wiki/Extending-with-Custom-Business-Objects), then this project will show you some best practices.
You can also find more information in the [blog series about working with Custom Business Objects, Parsers and TypeScript Decorators in PnP JS Core](https://blog.josequinto.com/2017/05/19/why-do-we-should-use-custom-business-objects-models-in-pnp-js-core/)
@ -27,6 +27,7 @@ Version|Date|Comments
1.0|July 2, 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.**
---

9
samples/react-taxonomypicker-panel/README.md
View File

@ -1,7 +1,7 @@
# SPFx webpart with Taxonomy picker Office UI Fabric Panel.
# SPFx web part with Taxonomy picker Office UI Fabric Panel.
## Summary
Sample webpart with Single and Multi-select taxonomy pickers using Office UI Fabric panel. The webpart uses the Taxonomy API support available in the @pnp/taxonomy.
Sample web part with Single and Multi-select taxonomy pickers using Office UI Fabric panel. The web part uses the Taxonomy API support available in the @pnp/taxonomy.
![TaxonomyPickerPanel webpart](https://github.com/vipulkelkar/sp-dev-fx-webparts/blob/TaxonomyPanelPicker/samples/react-taxonomypicker-panel/assets/TaxonomyPicker.gif)
@ -34,6 +34,7 @@ Version|Date|Comments
1.1|August 20, 2018|Bug fix and version upgrade
## 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.**
---
@ -59,9 +60,9 @@ Version|Date|Comments
## Features
- This webpart demonstrates the use of a custom taxonomy picker control built with Office UI Fabric React Panel and Tagpicker that enables users to select terms for a single-select or multi-select taxonomy field in a controlled manner.
- This web part demonstrates the use of a custom taxonomy picker control built with Office UI Fabric React Panel and Tagpicker that enables users to select terms for a single-select or multi-select taxonomy field in a controlled manner.
- The custom taxonomy picker control is a reusable React component and can be easily placed in a SPFx webpart just by providing the TermSetId as a property to the component.
- The custom taxonomy picker control is a reusable React component and can be easily placed in a SPFx web part just by providing the TermSetId as a property to the component.
<TermsPickerComponent IsMultiValue={false} TermSetId='<TERM-SET-ID>' LabelText='Single-select field' SelectedTerms={<State variable>}/>

5
samples/react-taxonomypicker/README.md
View File

@ -42,6 +42,7 @@ Version|Date|Comments
1.0|March 14, 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.**
---
@ -97,7 +98,7 @@ PropertyPaneTaxonomyPicker("Language", {
```
## Features
- Use [React](https://facebook.github.io/react) for using [react-taxonomypicker](https://github.com/jquintozamora/react-taxonomypicker) control inside a custom property pane (it can be used in the webpart itself too).
- Use [React](https://facebook.github.io/react) for using [react-taxonomypicker](https://github.com/jquintozamora/react-taxonomypicker) control inside a custom property pane (it can be used in the web part itself too).
- Use [TypeScript](https://www.typescriptlang.org) to create the custom property pane control containing the taxonomy picker control.
- **Reacting to web part property changes**
- Loading data for use in **custom property pane controls asynchronously** without blocking the web part
@ -107,7 +108,7 @@ PropertyPaneTaxonomyPicker("Language", {
- Async mode is used for large Term Sets and it **doesn't load any data initially**, but it loads the Terms upon user input in batches of 10 items.
- Sync / Async mode configurable via **termSetCountMaxSwapToAsync** property
- The control will fetch the number of terms and decide which mode to use depends on termSetCountMaxSwapToAsync value.
- It Uses and depends on **SP.Taxonomy.js** (the webpart uses a wrapper to load all the SP.*.js dependencies)
- It Uses and depends on **SP.Taxonomy.js** (the web part uses a wrapper to load all the SP.*.js dependencies)
- Use **Promise** (polyfill it if needed IE)
- **onPickerChange** event handler exposed
- [react-select](https://github.com/JedWatson/react-select) properties exposed (extends them)

1
samples/react-teams-membership-updater/README.md
View File

@ -47,6 +47,7 @@ Version|Date|Comments
## 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.**
---

7
samples/react-teams-tab-suggested-members/README.md
View File

@ -1,7 +1,8 @@
# Spfx Webpart / Teams tab Group members suggestion
# SPFx Web part / Teams tab Group members suggestion
## Summary
This webpart uses Graph API to suggest you members to add to a group (based on People endpoint), so you can easily add those members to the Group / Teams. It can be used as a SharePoint webpart or Teams tab
This web part uses Graph API to suggest you members to add to a group (based on People endpoint), so you can easily add those members to the Group / Teams. It can be used as a SharePoint web part or Teams tab
![Suggested Group Members Teams Tab](./assets/SuggestedMembersTeamsTab.jpg)
@ -40,7 +41,7 @@ Version|Date|Comments
This sample illustrates the following concepts on top of the SharePoint Framework:
* __Teams__ tab webpart using ReactJS
* __Teams__ tab web part using ReactJS
* Using __GraphClient__ to call _/me/people_
* Graph API __Batch request__ to add members to a Group
* Gulp custom task to zip Teams folder

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

@ -50,7 +50,7 @@ Version|Date|Comments
* upload it to your tenant app catalog
* [approve permission requests](https://docs.microsoft.com/en-us/sharepoint/dev/spfx/use-aadhttpclient#manage-permission-requests) into SharePoint Online Admin API Permission page
* add `react-teams-tabs-pnpjs` app to your site
* add `react-teams-tabs-pnpjs` webpart to your page to see it in action
* add `react-teams-tabs-pnpjs` web part to your page to see it in action
## Features

4
samples/react-teams-tagging/README.md
View File

@ -1,7 +1,7 @@
# spfx webpart to Tag Teams using a TermSet in SharePoint
# spfx web part to Tag Teams using a TermSet in SharePoint
## Summary
This sample shows how read and update a custom Schema extension in MS Graph to Tag a Team using metadata from a specific TermSet in SharePoint. The user can select different Terms (up to 3), and are saved as a custom Schema extension in Group Graph entity. Besides, the webpart allows to find other Teams tagged wit the same Tag (for demo puposes only 1st Tag is used to run the query)
This sample shows how read and update a custom Schema extension in MS Graph to Tag a Team using metadata from a specific TermSet in SharePoint. The user can select different Terms (up to 3), and are saved as a custom Schema extension in Group Graph entity. Besides, the web part allows to find other Teams tagged wit the same Tag (for demo puposes only 1st Tag is used to run the query)
![Custom Schema Extension Webpart](./assets/webpart.JPG)

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

@ -49,6 +49,7 @@ Version|Date|Comments
1.0|Feb |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.**
---
@ -59,7 +60,7 @@ Version|Date|Comments
- in the command line run:
- `npm install`
- `gulp serve`
- `add webpart to page`
- `add web part to page`
## Features

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

@ -55,7 +55,7 @@ Version|Date|Comments
* locate solution at `.\sharepoint\solution\react-tour-pnpjs.sppkg`
* upload it to your tenant app catalog
* add `react-tour-pnpjs` app to your site
* add `react-tour-pnpjs` webpart to your page to see it in action
* add `react-tour-pnpjs` web part to your page to see it in action
## Features

2
samples/react-tree-orgchart/README.md
View File

@ -3,7 +3,7 @@
## Summary
The Tree Organization WebPart shows the Organization Chart of the or the team, the web part reads infomation from current user to build the Organization Chart.
You can configure in the webpart properties:
You can configure in the web part properties:
* show all Organization Chart
* the only user team, (same manager and peers).
* show Organization Chart by picking up user

15
samples/react-videolibrary/README.md
View File

@ -23,8 +23,8 @@ when a user clicks on one of the thumbnails, replace the thumbnail with a video
All 3 webparts share a common utility class (O365Vutilities) that is used to talk to the tenants Video Service through its rest
API (https://msdn.microsoft.com/en-us/office/office365/api/video-rest-operations)
The first webpart used react-3d-carousel. The carousel looks great, but I found no way to swap out the image and replace
it with a video player or Iframe. This carousel would be fine for displaying a picture library though. A sample of the webpart
The first web part used react-3d-carousel. The carousel looks great, but I found no way to swap out the image and replace
it with a video player or Iframe. This carousel would be fine for displaying a picture library though. A sample of the web part
being used on a modern page is shown below:
![react-3d-carousel](./src/assets/react-3d-carousel.PNG)
@ -34,14 +34,14 @@ And a sample of the webparts configuration:
![react-3d-carousel configuration](./src/assets/react-3d-carousel config.PNG)
The getPropertyPaneConfiguration of the webpart calls a method in the O365Vutilities class to get a list of
The getPropertyPaneConfiguration of the web part calls a method in the O365Vutilities class to get a list of
channels on the tenants Video Service, and allows the user to select a channel.
The second webpart used react-slick. The carousel is not as fancy as react-3d-carousel, but I was able to to swap out the
The second web part used react-slick. The carousel is not as fancy as react-3d-carousel, but I was able to to swap out the
image and replace it with an Iframe playing the Video once a user clicked it. I had trouble with the css and getting the next and previous
buttons to show. If you run the webpart, the buttons are there to the left and the right of the image, they are just not visible.You can find them by moving the mouse along the left and right borders. Hopefully someone with better css skiils than I can fix this. You can also change videos by clicking the dots at the bottom of the webpart, A sample of the webpart is shown below:
buttons to show. If you run the webpart, the buttons are there to the left and the right of the image, they are just not visible.You can find them by moving the mouse along the left and right borders. Hopefully someone with better css skiils than I can fix this. You can also change videos by clicking the dots at the bottom of the webpart, A sample of the web part is shown below:
![react-slick](./src/assets/react-slick.PNG)
And a sample of the webparts configuration:
@ -50,13 +50,13 @@ And a sample of the webparts configuration:
Finally I tried reactjs-coverflow. It has nice scrolling through the images with the mousweheel, and some cool 3d effects.
It was also simple to swap the image with an Iframe playing the Video once a user clicked it (same code as react-slick). This is the best
of the three for my purposes. A sample of the webpart is shown below:
of the three for my purposes. A sample of the web part is shown below:
![react-coverflow](./src/assets/react-coverflow.PNG)
And a sample of its configuration (this one I made fully configurable, the others had a lot of hard-coded values)
![react-coverflow](./src/assets/react-coverflow configuratioion.PNG)
In the future I would like to modify this webpart to link a SharePoint list with the video channel so that users can enter additional
In the future I would like to modify this web part to link a SharePoint list with the video channel so that users can enter additional
metadata for the video and be anle to search/filter the videos using this metadata.
See also https://github.com/russgove/O365VideoSync. It's a console app that you can schedule to run to synchronize an Office 365 Video Channel with a sharepoint list (on prem or otherwise).
@ -90,6 +90,7 @@ Version|Date|Comments
## 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.**
---

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

@ -2,7 +2,7 @@
## Summary
This is sample webpart to showcase how to open webcam and take photo in SPFx webpart. This will work in desktop/laptop with webcam and mobile device also(from browser). This can be extended to stored captured photo in document library or it can be saved as user profile photo using GRAPH API.
This is sample web part to showcase how to open webcam and take photo in SPFx webpart. This will work in desktop/laptop with webcam and mobile device also(from browser). This can be extended to stored captured photo in document library or it can be saved as user profile photo using GRAPH API.
* [Please refer this link on How to build this from Scratch](https://www.c-sharpcorner.com/article/how-to-open-webmobile-camera-and-take-photo-from-spfx-webpart/)
@ -59,4 +59,4 @@ This Web Part illustrates the following concepts on top of the SharePoint Framew
* Using react-webcam npm package in SPFx webpart
* Open web cam or mobile camera to capture photo and display in img html element
<img src="https://telemetry.sharepointpnp.com/sp-dev-fx-webparts/samples/react-spfx-webcam" />
<img src="https://telemetry.sharepointpnp.com/sp-dev-fx-webparts/samples/react-spfx-webcam" />

13
samples/react-yammer-api/README.md
View File

@ -14,11 +14,11 @@ extensions:
- react
createdDate: 4/1/2017 12:00:00 AM
---
# Yammer REST API SPFx webpart #
# Yammer REST API SPFx web part #
## Summary
This sample shows how Yammer REST APIs can be consumed by using SharePoint Framework React webpart and the Yammer JavaScript SDK. The SPFx webpart contains wrapper around the Yammer JavaScript SDK that can be extended for fluent typescript api experience.
This sample shows how Yammer REST APIs can be consumed by using SharePoint Framework React web part and the Yammer JavaScript SDK. The SPFx web part contains wrapper around the Yammer JavaScript SDK that can be extended for fluent typescript api experience.
### Yammer search
@ -28,7 +28,7 @@ Sample SharePoint Framework client-side web part built using React that consumes
### Smart Authentication, if Yammer Enforce Office 365 identity is enabled
If Yammer Office 365 Identity Enforcement is enabled, the webpart will 'smart' authenticate Office 365 user when in SharePoint Online environment i.e. a user should allow the app (consent popup) once in a lifetime. After, the user will be logged in all the time. Smart because if you do not have the yammer auth cookies, you would not have to re-authenticate with login button and popups.
If Yammer Office 365 Identity Enforcement is enabled, the web part will 'smart' authenticate Office 365 user when in SharePoint Online environment i.e. a user should allow the app (consent popup) once in a lifetime. After, the user will be logged in all the time. Smart because if you do not have the yammer auth cookies, you would not have to re-authenticate with login button and popups.
To enable Office 365 Identity Enforcement on `Office 365 Enterprise E3 Trial tenant`, go to the Office 365 admin -> Admin centers -> Yammer -> Security Settings -> Enforce Office 365 identity.
## Used SharePoint Framework Version
@ -39,7 +39,7 @@ To enable Office 365 Identity Enforcement on `Office 365 Enterprise E3 Trial ten
* [SharePoint Framework](https://docs.microsoft.com/sharepoint/dev/spfx/sharepoint-framework-overview)
* [Office 365 Enterprise E3](https://docs.microsoft.com/sharepoint/dev/spfx/set-up-your-developer-tenant)
** [Office 365 Enterprise E3 Trial](https://products.office.com/en-ie/business/office-365-enterprise-e3-business-software) instead of `Office 365 Enterprise E3 Developer Trial` is required to test the webpart with Yammer.
** [Office 365 Enterprise E3 Trial](https://products.office.com/en-ie/business/office-365-enterprise-e3-business-software) instead of `Office 365 Enterprise E3 Developer Trial` is required to test the web part with Yammer.
## Prerequisites
@ -60,6 +60,7 @@ Version|Date|Comments
0.0.1|April 19, 2017 | Initial commit
## 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.**
---
@ -75,13 +76,13 @@ Version|Date|Comments
![Yammer app enabled](./assets/yammer-enabled-screen.png)
- Copy the Yammer app client Id and redirect uri.
- Go to the SPFx webpart folder and find **src/webparts/reactYammerApi/yammer/ProdConfiguration.ts**.
- Go to the SPFx web part folder and find **src/webparts/reactYammerApi/yammer/ProdConfiguration.ts**.
- Replace the config client id and redirect uri with the copied from the yammer registered app values.
```typescript
import { IConfiguration } from './IConfiguration';
/**
* Webpart production configuration.
* Web part production configuration.
*/
export class ProdConfiguration implements IConfiguration {
public readonly clientId: string = "<YOUR_YAMMER_APP_CLIENT_ID>";

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

@ -2,7 +2,7 @@
## Summary
This webpart will allow a user to select a text file contatining zpl which is used to generate an image using the [labelary web service](http://labelary.com/service.html) to render the zpl and return the image.
This web part will allow a user to select a text file contatining zpl which is used to generate an image using the [labelary web service](http://labelary.com/service.html) to render the zpl and return the image.
![Preview](./assets/preview.gif)
@ -43,7 +43,7 @@ Version|Date|Comments
## Features
This webpart allows a user to select a text file containing zpl which then the contents of the selected file are read and the user is also able to configure the size of the label they would like to see in the render. When the user clicks the show label button the label is generated using an online server to render the image.
This web part allows a user to select a text file containing zpl which then the contents of the selected file are read and the user is also able to configure the size of the label they would like to see in the render. When the user clicks the show label button the label is generated using an online server to render the image.
* [PnP SPFx React Controls - File Selector](https://sharepoint.github.io/sp-dev-fx-controls-react/)
* [PnP JS - Read Contents of a file](https://pnp.github.io/pnpjs/)

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

@ -1,7 +1,7 @@
# Organization Chart using VueJS
## Summary
A simple Organisation Chart webpart using Office UI Fabric, VueJS, REST API.
A simple Organisation Chart web part using Office UI Fabric, VueJS, REST API.
![React Org Chart](./assets/preview.gif)
@ -14,7 +14,7 @@ A simple Organisation Chart webpart using Office UI Fabric, VueJS, REST API.
* [SharePoint Framework](https://docs.microsoft.com/sharepoint/dev/spfx/sharepoint-framework-overview)
* [Office 365 developer tenant](https://docs.microsoft.com/sharepoint/dev/spfx/set-up-your-developer-tenant)
** The SPFx webpart will work in local workbench, but not the assets. They can be provisioned only when the app is deployed since they are SharePoint specific.
** The SPFx web part will work in local workbench, but not the assets. They can be provisioned only when the app is deployed since they are SharePoint specific.
## Prerequisites
@ -24,6 +24,7 @@ A simple Organisation Chart webpart using Office UI Fabric, VueJS, REST API.
## 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.**
---