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

Merge pull request #8 from pnp/master 

FI
This commit is contained in:
Peter Paul Kirschner 2021-02-22 08:14:55 +01:00 committed by GitHub
parent 5b74b64cb6 181f815aa7
commit 16d061f986
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
1433 changed files with 445595 additions and 114398 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
.github/CONTRIBUTING.md vendored
View File

@ -33,7 +33,7 @@ Whenever you are submitting any changes to the SharePoint repositories, please f
When you are submitting a new sample, it has to follow up below guidelines
* You will need to have a `README.md` file for your contribution, which is based on [the provided template](../samples/README-template.md) under the `samples` folder. Please copy this template to your project and update it accordingly. Your `README.md` must be named exactly `README.md` -- with capital letters -- as this is the information we use to make your sample public.
* You will need to have a screenshot picture of your sample in action in the `README.md` file ("pics or it didn't happen"). The preview image must be located in the `/assets/` folder in the root your you solution.
* You will need to have a screenshot picture of your sample in action in the `README.md` file ("pics or it didn't happen"). The preview image must be located in the `/assets/` folder in the root of your solution.
* The `README` template contains a specific tracking image at the bottom of the file with an `img` tag, where the `src` attribute points to `https://telemetry.sharepointpnp.com/sp-dev-fx-webparts/samples/readme-template`. This is a transparent image which is used to track viewership of individual samples in GitHub.
* Update the image `src` attribute according with the repository name and folder information. For example, if your sample is named `react-todo` in the `samples` folder, you should update the `src` attribute to `https://telemetry.sharepointpnp.com/sp-dev-fx-webparts/samples/react-todo`
* If you find an existing sample which is similar to yours, please extend the existing one rather than submitting a new similar sample

37
.github/ISSUE_TEMPLATE/bug.md vendored
View File

@ -1,7 +1,7 @@
---
name: "\U0001F41E Bug"
about: Report an anomaly or unexpected behavior with a sample from this repository.
title: ''
title: '[Web Part Name]: [Issue Title]'
labels: type:bug
assignees: ''
@ -19,19 +19,41 @@ Thank you for reporting a bug! Use the sections below to submit a bug ONLY if it
DELETE EVERYTHING ABOVE AFTER READING - THANKS!
## Sample (which sample are you having trouble with)
## Sample
> Which sample are you having trouble with?
>
> Issues without a sample name will be closed automatically
>
> _(DELETE THIS PARAGRAPH AFTER READING)_
## Authors
> Because of the way this repository is configured, samples authors do not get a notification when you create an issue. *It makes it less likely for you to get your issue resolved or to get help*. For the section above **@mention any author of the sample**. Authors' GitHub handle can be found on the main sample documentation page, under the "solution" section. Use the `PREVIEW` tab at the top right to preview the rendering before submitting your issue.
> Because of the way this repository is configured, samples authors do not get a notification when you create an issue. *It makes it less likely for you to get your issue resolved or to get help*. For the section above **@mention any author of the sample**. Authors' GitHub handle can be found on the main sample documentation page, under the "solution" section. Use the `PREVIEW` tab at the top right to preview the rendering before submitting your issue.
>
> The author's name can be found in the sample's `README.md` file, under **Authors**.
>
> Issues without an author will be closed automatically
>
> _(DELETE THIS PARAGRAPH AFTER READING)_
## Expected or Desired Behavior
> What should it do?
>
> Issues without an expected behavior will be closed automatically
>
> _(DELETE THIS PARAGRAPH AFTER READING)_
## Observed Behavior
> What does it do?
>
> Issues without an observed behavior will be closed automatically
>
> _(DELETE THIS PARAGRAPH AFTER READING)_
## Steps to Reproduce
@ -41,6 +63,11 @@ Steps to reproduce the behavior:
3. Scroll down to '....'
4. See error
> Issues without an steps to reproduce will be closed automatically
>
> _(DELETE THIS PARAGRAPH AFTER READING)_
# Environment Details (*Development & Target environment*)
- **OS**: [e.g. Windows 10 | MacOS 10.15.x]
@ -50,4 +77,8 @@ Steps to reproduce the behavior:
- **Tooling**: [e.g. VS Code | SPFx v1.10.0 | Visual Studio 2019]
- **Additional details**: *The more context you can provide, the easier it is (and therefore quicker) to help.*
> Issues without environment details will be closed automatically
>
> _(DELETE THIS PARAGRAPH AFTER READING)_
## Additional context

3
.github/ISSUE_TEMPLATE/config.yml vendored
View File

@ -1,5 +1,8 @@
blank_issues_enabled: false
contact_links:
- name: Start a discussion
about: 🗨 Start a friendly conversation with the other members of the community about the samples in this repository.
url: https://github.com/pnp/sp-dev-fx-webparts/discussions
- name: SharePoint Developer Documentation
url: https://github.com/SharePoint/sp-dev-docs/issues/new
about: 📚 Issue related to the SharePoint Framework or its documentation? Submit an issue here.

19
.github/ISSUE_TEMPLATE/enhancement.md vendored
View File

@ -1,7 +1,7 @@
---
name: "\U0001F4A1 Suggestion"
about: Suggest an enhancement to make one of our web part samples even better
title: Let's make SAMPLE even better
title: '[Web Part Name]: [Suggestion Title]'
labels: type:enhancement
assignees: ''
@ -18,13 +18,26 @@ Thank you for your suggestion! Use the sections below to submit a suggestion ONL
DELETE EVERYTHING ABOVE AFTER READING - THANKS!
## Sample (which sample are you talking about)
## Sample
> Which sample are you talking about
>
> Suggestions without a sample name will be closed automatically
>
> _(DELETE THIS PARAGRAPH AFTER READING)_
## Authors
> Because of the way this repository is configured, samples authors do not get a notification when you create an issue. *It makes it less likely for you to get your issue resolved or to get help*. For the section above **@mention any author of the sample**. The authors' GitHub handle can be found on the main sample documentation page, under the "solution" section. Use the `PREVIEW` tab at the top right to preview the rendering before submitting your issue.
>
> The authors can be found in the sample's `README.md` file, under **Authors**
>
> Suggestions without an author will be closed automatically
>
> _(DELETE THIS PARAGRAPH AFTER READING)_
## Suggestion (the more details, the better)
## Suggestion
> The more details, the better
>
> _(DELETE THIS PARAGRAPH AFTER READING)_

16
.github/ISSUE_TEMPLATE/question.md vendored
View File

@ -15,20 +15,30 @@ Thank you for asking a question! Use the sections below to submit a question ONL
- Include sufficient details and context.
- If you have multiple questions please submit them separately so we can track resolution.
- Screenshots are always helpful (just paste any images right here in the question)
- If you're trying to start a conversation on a topic, consider using [Discussions](https://github.com/pnp/sp-dev-fx-webparts/discussions). We want to close every issue as quickly as possible, but discussions are intended for longer conversations.
DELETE EVERYTHING ABOVE AFTER READING - THANKS!
## Sample (which sample are you talking about)
> Questions without a sample name will be rejected automatically
>
> _(DELETE THIS PARAGRAPH AFTER READING)_
## Authors
> Because of the way this repository is configured, samples authors do not get a notification when you create an issue. *It makes it less likely for you to get your issue resolved or to get help*. For the section above **@mention any author of the sample**. The authors' GitHub handle can be found on the main sample documentation page, under the "solution" section. Use the `PREVIEW` tab at the top right to preview the rendering before submitting your issue.
>
> Questions without an author will be rejected automatically
>
> _(DELETE THIS PARAGRAPH AFTER READING)_
## Question (the more details, the better)
## Question
> The more details, the better
>
> _(DELETE THIS PARAGRAPH AFTER READING)_

4
.gitignore vendored
View File

@ -32,4 +32,6 @@ obj
# Styles Generated Code
*.scss.ts
packages/
packages/
samples/react-teams-send-notification/MyNotes.md
samples/react-teams-send-notification/teams/teams.zip

7
samples/.yo-rc.json
View File

@ -1,7 +0,0 @@
{
"@microsoft/generator-sharepoint": {
"isCreatingSolution": true,
"environment": "spo",
"whichFolder": "subdir"
}
}

59
samples/README-template.md
View File

@ -1,4 +1,15 @@
# title of the sample
# Title of the sample
> This is how you want the sample to appear in the samples browser.
> When naming your sample, try to give it a friendly name that describes what it does. Avoid using terms like `SharePoint` and `WebPart` -- because that's what all the samples in this repo is all about. Also, don't use `React`, `Angular`, `JavaScript`, etc. in your sample title -- unless that's what the sample is about.
> GOOD 👍:
> Kitten Videos
> BAD 👎:
> react-kittenvideos
> SPFx Kitten Videos Web Part for SharePoint using React
>
> DELETE THIS PARAGRAPH BEFORE SUBMITTING
## Summary
@ -6,27 +17,53 @@ Short summary on functionality and used technologies.
> Please provide a high-quality screenshot of your web parts below. It should be stored in a folder called `assets`.
> If possible, use a resolution of 1920x1080.
> If your web part uses a placeholder screen and requires the user to configure it, please use a screenshot of the web part as it appears after it has been configured.
> If your web part uses a placeholder screen and requires the user to configure it, please use a screenshot of the web part as it appears **after** it has been configured.
> You can add as many screen shots as you'd like to help users understand your web part without having to download it and install it.
> DELETE THIS PARAGRAPH BEFORE SUBMITTING
![picture of the web part in action](assets/preview.png)
## Used SharePoint Framework Version
## Compatibility
![1.11.0](https://img.shields.io/badge/version-1.11.0-green.svg)
![SPFx 1.11](https://img.shields.io/badge/SPFx-1.11.0-green.svg)
![Node.js LTS 10.x](https://img.shields.io/badge/Node.js-LTS%2010.x-green.svg)
![SharePoint Online](https://img.shields.io/badge/SharePoint-Online-yellow.svg)
![Teams N/A: Untested with Microsoft Teams](https://img.shields.io/badge/Teams-N%2FA-lightgrey.svg "Untested with Microsoft Teams")
![Workbench Local | Hosted](https://img.shields.io/badge/Workbench-Local%20%7C%20Hosted-green.svg)
> Don't worry if you're unsure about the compatibility matrix above. We'll verify it when we approve the PR.
>
> If using an older version of SPFx, update the SPFx compatibility tag accordingly:
> ![SPFx 1.4.1](https://img.shields.io/badge/SPFx-1.4.1-green.svg)
>
> Here's the Node.js compatibility tag for SPFx 1.4.1:
> ![Node.js LTS 6.x | LTS 8.x](https://img.shields.io/badge/Node.js-LTS%206.x%20%7C%20LTS%208.x-green.svg)
>
> If you built this sample specifically for SharePoint 2016, or SharePoint 2019 support, update the SharePoint compatibility tag accordingly:
> ![SharePoint 2019 | Online](https://img.shields.io/badge/SharePoint-2019%20%7C%20Online-yellow.svg)
> ![SharePoint 2016 | 2019 | Online](https://img.shields.io/badge/SharePoint-2016%20%7C%202019%20%7C%20Online-green.svg)
> If you know your web part only works on the hosted workbench, you can use this for the workbench compatibility tag:
> ![Workbench Hosted: Does not work with local workbench](https://img.shields.io/badge/Workbench-Hosted-yellow.svg "Does not work with local workbench")
>
> If you specifically built and tested this web part to work with Teams, use this for the Teams compatibility tag:
> ![Teams Yes: Designed for Microsoft Teams](https://img.shields.io/badge/Teams-Yes-green.svg "Designed for Microsoft Teams")
> And if you know for sure that it is NOT compatible with Teams, use this:
> ![Teams No: Not designed for Microsoft Teams](https://img.shields.io/badge/Teams-No-red.svg "Not designed for Microsoft Teams")
>
> DELETE THIS PARAGRAPH BEFORE SUBMITTING
## 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)
* [Microsoft 365 tenant](https://docs.microsoft.com/sharepoint/dev/spfx/set-up-your-development-environment)
> Update accordingly as needed.
> DELETE THIS PARAGRAPH BEFORE SUBMITTING
## Prerequisites
> Any special pre-requisites?
> Any special pre-requisites? Include any lists, permissions, offerings to the demo gods, or whatever else needs to be done for this web part to work.
> DELETE THIS PARAGRAPH BEFORE SUBMITTING
## Solution
@ -38,8 +75,8 @@ folder name | Author details
Version|Date|Comments
-------|----|--------
1.1|September 2, 2025|Update comment
1.0|August 29, 2025|Initial release
1.1|September 2, 2021|Update comment
1.0|August 29, 2021|Initial release
## Disclaimer
@ -55,6 +92,7 @@ Version|Date|Comments
* `gulp serve`
> Include any additional steps as needed.
> DELETE THIS PARAGRAPH BEFORE SUBMITTING
## Features
@ -65,4 +103,7 @@ This Web Part illustrates the following concepts on top of the SharePoint Framew
* topic 2
* topic 3
> Note that better pictures and documentation will increase the sample usage and the value you are providing for others. Thanks for your submissions in advance! You rock ❤.
> DELETE THIS PARAGRAPH BEFORE SUBMITTING
<img src="https://telemetry.sharepointpnp.com/sp-dev-fx-webparts/samples/readme-template" />

1
samples/aad-api-spo-cookie/assets/sample.json Normal file
View File

@ -0,0 +1 @@
{"name":"pnp-sp-dev-spfx-web-parts-aad-api-spo-cookie","version":null,"source":"pnp","title":"Call custom APIs secured with Azure Active Directory without ADAL JS","shortDescription":"Sample SharePoint Framework client-side web part showing how to access a custom API secured with Azure Active Directory (AAD) without using ADAL JS.","longDescription":["Sample SharePoint Framework client-side web part showing how to access a custom API secured with Azure Active Directory (AAD) without using ADAL JS."],"products":["SharePoint","Office"],"categories":[""],"metadata":[{"key":"CLIENT-SIDE-DEV","value":"Angular"},{"key":"SPFX-VERSION","value":"GA"}],"thumbnails":[{"type":"image","order":100,"url":"https://github.com/pnp/sp-dev-fx-webparts/raw/master/samples/aad-api-spo-cookie/assets/preview-orders.png","alt":"Call custom APIs secured with Azure Active Directory without ADAL JS","slides":null}],"authors":[{"gitHubAccount":"waldekmastykarz","company":"","pictureUrl":"https://github.com/waldekmastykarz.png"}],"references":[]}

4
samples/aad-api-spo-cookie/webpart/yarn.lock
View File

@ -3450,8 +3450,8 @@ inherits@2.0.1:
resolved "https://registry.yarnpkg.com/inherits/-/inherits-2.0.1.tgz#b17d08d326b4423e568eff719f91b0b1cbdf69f1"
ini@^1.3.4, ini@~1.3.0:
version "1.3.4"
resolved "https://registry.yarnpkg.com/ini/-/ini-1.3.4.tgz#0537cb79daf59b59a1a517dff706c86ec039162e"
version "1.3.7"
resolved "https://registry.yarnpkg.com/ini/-/ini-1.3.7.tgz#a09363e1911972ea16d7a8851005d84cf09a9a84"
inpath@~1.0.2:
version "1.0.2"

1
samples/angular-aad-webapi/assets/sample.json Normal file
View File

@ -0,0 +1 @@
{"name":"pnp-sp-dev-spfx-web-parts-angular-aad-webapi","version":null,"source":"pnp","title":"Call custom Web API secured with AAD from SharePoint Framework client-side web part using Angular v1.x","shortDescription":"Sample SharePoint Framework client-side web part illustrating communication with a custom Web API secured with Azue Active Directory using Angular v1.x","longDescription":["Sample SharePoint Framework client-side web part illustrating communication with a custom Web API secured with Azue Active Directory using Angular v1.x"],"products":["SharePoint","Office"],"categories":[""],"metadata":[{"key":"CLIENT-SIDE-DEV","value":"Angular"},{"key":"SPFX-VERSION","value":"GA"}],"thumbnails":[{"type":"image","order":100,"url":"https://github.com/pnp/sp-dev-fx-webparts/raw/master/samples/angular-aad-webapi/assets/preview.jpg","alt":"Call custom Web API secured with AAD from SharePoint Framework client-side web part using Angular v1.x","slides":null}],"authors":[{"gitHubAccount":"davidhartman","company":"","pictureUrl":"https://github.com/davidhartman.png"}],"references":[]}

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

@ -15,7 +15,7 @@ extensions:
createdDate: 2/15/2020 12:00:00 AM
---
# AngularJS Greeting client-side web part
# AngularJS Greeting
## Summary

1
samples/angular-greeting/assets/sample.json Normal file
View File

@ -0,0 +1 @@
{"name":"pnp-sp-dev-spfx-web-parts-angular-greeting","version":null,"source":"pnp","title":"Greeting client-side web part","shortDescription":"This is Greeting web part which shows greeting to the current logged in user.","longDescription":["This is Greeting web part which shows greeting to the current logged in user."],"products":["SharePoint","Office"],"categories":[""],"metadata":[{"key":"CLIENT-SIDE-DEV","value":"Angular"},{"key":"SPFX-VERSION","value":"1.10.0"}],"thumbnails":[{"type":"image","order":100,"url":"https://github.com/pnp/sp-dev-fx-webparts/raw/master/samples/angular-greeting/assets/captured.gif","alt":"Greeting client-side web part","slides":null}],"authors":[{"gitHubAccount":"gauravgoyal5","company":"","pictureUrl":"https://github.com/gauravgoyal5.png"}],"references":[]}

1
samples/angular-migration/assets/sample.json Normal file
View File

@ -0,0 +1 @@
{"name":"pnp-sp-dev-spfx-web-parts-angular-migration","version":null,"source":"pnp","title":"Migrating existing Angular applications to SharePoint Framework sample","shortDescription":"This is a sample Angular application before and after it has been migrated to a SharePoint Framework client-side web part.","longDescription":["This is a sample Angular application before and after it has been migrated to a SharePoint Framework client-side web part."],"products":["SharePoint","Office"],"categories":[""],"metadata":[{"key":"CLIENT-SIDE-DEV","value":"Angular"},{"key":"SPFX-VERSION","value":"GA"}],"thumbnails":[{"type":"image","order":100,"url":"https://github.com/pnp/sp-dev-fx-webparts/raw/master/samples/angular-migration/assets/angular-todo-spfx-preview.png","alt":"Migrating existing Angular applications to SharePoint Framework sample","slides":null}],"authors":[{"gitHubAccount":"waldekmastykarz","company":"","pictureUrl":"https://github.com/waldekmastykarz.png"}],"references":[]}

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

@ -17,7 +17,7 @@ extensions:
- AngularJS
createdDate: 2/16/2017 12:00:00 AM
---
## Angular MS Graph Web Part Built with Angular v1.x
# 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

44
samples/angular-msgraph/assets/sample.json Normal file
View File

@ -0,0 +1,44 @@
{
"name": "pnp-sp-dev-spfx-web-parts-angular-msgraph",
"version": null,
"source": "pnp",
"title": "Angular MS Graph Web Part Built with Angular v1.x",
"shortDescription": "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.",
"longDescription": [
"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."
],
"products": [
"SharePoint",
"Office"
],
"categories": [
""
],
"metadata": [
{
"key": "CLIENT-SIDE-DEV",
"value": "Angular"
},
{
"key": "SPFX-VERSION",
"value": "GA"
}
],
"thumbnails": [
{
"type": "image",
"order": 100,
"url": "https://github.com/pnp/sp-dev-fx-webparts/raw/master/samples/angular-msgraph/assets/Connect.png",
"alt": "Angular MS Graph Web Part Built with Angular v1.x",
"slides": null
}
],
"authors": [
{
"gitHubAccount": "davidhartman",
"company": "",
"pictureUrl": "https://github.com/davidhartman.png"
}
],
"references": []
}

1
samples/angular-multipage/assets/sample.json Normal file
View File

@ -0,0 +1 @@
{"name":"pnp-sp-dev-spfx-web-parts-angular-multipage","version":null,"source":"pnp","title":"Angular multi-page client-side web part","shortDescription":"This is a sample SharePoint Framework client-side web part built using Angular, illustrating building multi-page web parts.","longDescription":["This is a sample SharePoint Framework client-side web part built using Angular, illustrating building multi-page web parts."],"products":["SharePoint","Office"],"categories":[""],"metadata":[{"key":"CLIENT-SIDE-DEV","value":"Angular"},{"key":"SPFX-VERSION","value":"drop5"}],"thumbnails":[{"type":"image","order":100,"url":"https://github.com/pnp/sp-dev-fx-webparts/raw/master/samples/angular-multipage/assets/poll-preview.gif","alt":"Angular multi-page client-side web part","slides":null}],"authors":[{"gitHubAccount":"waldekmastykarz","company":"","pictureUrl":"https://github.com/waldekmastykarz.png"}],"references":[]}

1
samples/angular-ngofficeuifabric-file-upload/assets/sample.json Normal file
View File

@ -0,0 +1 @@
{"name":"pnp-sp-dev-spfx-web-parts-angular-ngofficeuifabric-file-upload","version":null,"source":"pnp","title":"File Upload using AngularJs","shortDescription":"File Update/Delete web part using AngularJs and ngOfficeUIFabric with the SharePoint Framework.","longDescription":["File Update/Delete web part using AngularJs and ngOfficeUIFabric with the SharePoint Framework."],"products":["SharePoint","Office"],"categories":[""],"metadata":[{"key":"CLIENT-SIDE-DEV","value":"Angular"},{"key":"SPFX-VERSION","value":"GA"}],"thumbnails":[{"type":"image","order":100,"url":"https://camo.githubusercontent.com/674cb6e830d597e1ab9bb89992b6fe7f0359b80f/687474703a2f2f692e696d6775722e636f6d2f553571673449492e706e67","alt":"File Upload using AngularJs","slides":null}],"authors":[{"gitHubAccount":"dipongkor","company":"","pictureUrl":"https://github.com/dipongkor.png"},{"gitHubAccount":"gautamdsheth","company":"","pictureUrl":"https://github.com/gautamdsheth.png"}],"references":[]}

1
samples/angular-ngofficeuifabric-todo/assets/sample.json Normal file
View File

@ -0,0 +1 @@
{"name":"pnp-sp-dev-spfx-web-parts-angular-ngofficeuifabric-todo","version":null,"source":"pnp","title":"Angular \u0026 ngOfficeUIFabric Client-Side Web Part","shortDescription":"","longDescription":[""],"products":["SharePoint","Office"],"categories":[""],"metadata":[{"key":"CLIENT-SIDE-DEV","value":"Angular"},{"key":"SPFX-VERSION","value":"drop2"}],"thumbnails":[{"type":"image","order":100,"url":"https://avatars2.githubusercontent.com/u/11164679?s=460\u0026v=4","alt":"Angular \u0026 ngOfficeUIFabric Client-Side Web Part","slides":null}],"authors":[{"gitHubAccount":"waldekmastykarz","company":"","pictureUrl":"https://github.com/waldekmastykarz.png"}],"references":[]}

1
samples/angular-search/assets/sample.json Normal file
View File

@ -0,0 +1 @@
{"name":"pnp-sp-dev-spfx-web-parts-angular-search","version":null,"source":"pnp","title":"Search Client-Side Web Part Built with Angular v1.x","shortDescription":"This is a sample search web part that illustrates how you can use Angular within the new SharePoint Framework","longDescription":["This is a sample search web part that illustrates how you can use Angular within the new SharePoint Framework"],"products":["SharePoint","Office"],"categories":[""],"metadata":[{"key":"CLIENT-SIDE-DEV","value":"Angular"},{"key":"SPFX-VERSION","value":"rc0"}],"thumbnails":[{"type":"image","order":100,"url":"https://github.com/pnp/sp-dev-fx-webparts/raw/master/samples/angular-search/assets/angularSearch.png","alt":"Search Client-Side Web Part Built with Angular v1.x","slides":null}],"authors":[{"gitHubAccount":"davidhartman","company":"","pictureUrl":"https://github.com/davidhartman.png"}],"references":[]}

1
samples/angular-todo/assets/sample.json Normal file
View File

@ -0,0 +1 @@
{"name":"pnp-sp-dev-spfx-web-parts-angular-todo","version":null,"source":"pnp","title":"Angular client-side web part","shortDescription":"Sample Web Part illustrating using Angular with the SharePoint Framework.","longDescription":["Sample Web Part illustrating using Angular with the SharePoint Framework."],"products":["SharePoint","Office"],"categories":[""],"metadata":[{"key":"CLIENT-SIDE-DEV","value":"Angular"},{"key":"SPFX-VERSION","value":"GA"}],"thumbnails":[{"type":"image","order":100,"url":"https://github.com/pnp/sp-dev-fx-webparts/raw/master/samples/angular-todo/assets/preview.png","alt":"Angular client-side web part","slides":null}],"authors":[{"gitHubAccount":"waldekmastykarz","company":"","pictureUrl":"https://github.com/waldekmastykarz.png"}],"references":[]}

1
samples/angular2-prototype/assets/sample.json Normal file
View File

@ -0,0 +1 @@
{"name":"pnp-sp-dev-spfx-web-parts-angular2-prototype","version":null,"source":"pnp","title":"Angular2 Web Part Prototype","shortDescription":"Sample To Do Web Part built with Angular2. This sample illustrates how you can use Angular2 with the SharePoint Framework.","longDescription":["Sample To Do Web Part built with Angular2. This sample illustrates how you can use Angular2 with the SharePoint Framework."],"products":["SharePoint","Office"],"categories":[""],"metadata":[{"key":"CLIENT-SIDE-DEV","value":"Angular"},{"key":"SPFX-VERSION","value":"rc0"}],"thumbnails":[{"type":"image","order":100,"url":"https://github.com/pnp/sp-dev-fx-webparts/raw/master/samples/angular2-prototype/assets/preview.png","alt":"Angular2 Web Part Prototype","slides":null}],"authors":[{"gitHubAccount":null,"company":"","pictureUrl":"https://github.com/.png"},{"gitHubAccount":"dgaeta","company":"","pictureUrl":"https://github.com/dgaeta.png"}],"references":[]}

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

@ -20,7 +20,7 @@ extensions:
Set of sample web parts illustrating how to use Angular Elements in the SharePoint Framework.
## Used SharePoint Framework Version
![drop](https://img.shields.io/badge/drop-1.4.1-green.svg)
![SPFx 1.4.1](https://img.shields.io/badge/spfx-1.4.1-green.svg)
## Applies to
@ -67,4 +67,4 @@ 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
<img src="https://telemetry.sharepointpnp.com/sp-dev-fx-webparts/samples/angularelements-helloworld" />
<img src="https://telemetry.sharepointpnp.com/sp-dev-fx-webparts/samples/angularelements-helloworld" />

1
samples/angularelements-helloworld/assets/sample.json Normal file
View File

@ -0,0 +1 @@
{"name":"pnp-sp-dev-spfx-web-parts-angularelements-helloworld","version":null,"source":"pnp","title":"Angular Elements in SharePoint Framework","shortDescription":"Set of sample web parts illustrating how to use Angular Elements in the SharePoint Framework.","longDescription":["Set of sample web parts illustrating how to use Angular Elements in the SharePoint Framework."],"products":["SharePoint","Office"],"categories":[""],"metadata":[{"key":"CLIENT-SIDE-DEV","value":"Angular"},{"key":"SPFX-VERSION","value":"1.4.1"}],"thumbnails":[{"type":"image","order":100,"url":"https://github.com/pnp/media/raw/master/parker/pnp/300w/parker.png","alt":"Angular Elements in SharePoint Framework","slides":null}],"authors":[{"gitHubAccount":"waldekmastykarz","company":"","pictureUrl":"https://github.com/waldekmastykarz.png"},{"gitHubAccount":"sebastienlevert","company":"","pictureUrl":"https://github.com/sebastienlevert.png"}],"references":[]}

1
samples/angularelements-html-templatefile/assets/sample.json Normal file
View File

@ -0,0 +1 @@
{"name":"pnp-sp-dev-spfx-web-parts-angularelements-html-templatefile","version":null,"source":"pnp","title":"Angular Elements with HTML Template File in SharePoint Framework","shortDescription":"A sample web part illustrating how to use Angular Elements in the SharePoint Framework with the help of separate template HTML File.","longDescription":["A sample web part illustrating how to use Angular Elements in the SharePoint Framework with the help of separate template HTML File."],"products":["SharePoint","Office"],"categories":[""],"metadata":[{"key":"CLIENT-SIDE-DEV","value":"Angular"},{"key":"SPFX-VERSION","value":"1.4.1"}],"thumbnails":[{"type":"image","order":100,"url":"https://github.com/pnp/media/raw/master/parker/pnp/300w/parker.png","alt":"Angular Elements with HTML Template File in SharePoint Framework","slides":null}],"authors":[{"gitHubAccount":"JayakumarB","company":"","pictureUrl":"https://github.com/JayakumarB.png"}],"references":[]}

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

@ -14,7 +14,7 @@ extensions:
- jQuery
createdDate: 5/1/2017 12:00:00 AM
---
## Bootstrap Slider Built with jQuery v1.x and Boostrap v3.x
# 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.

1
samples/bootstrap-slider/assets/sample.json Normal file
View File

@ -0,0 +1 @@
{"name":"pnp-sp-dev-spfx-web-parts-bootstrap-slider","version":null,"source":"pnp","title":"Bootstrap Slider Built with jQuery v1.x and Boostrap v3.x","shortDescription":"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.","longDescription":["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."],"products":["SharePoint","Office"],"categories":[""],"metadata":[{"key":"CLIENT-SIDE-DEV","value":"Other"},{"key":"SPFX-VERSION","value":"GA"}],"thumbnails":[{"type":"image","order":100,"url":"https://github.com/pnp/sp-dev-fx-webparts/raw/master/samples/bootstrap-slider/assets/slider_image_1.png","alt":"Bootstrap Slider Built with jQuery v1.x and Boostrap v3.x","slides":null}],"authors":[{"gitHubAccount":"davidhartman","company":"","pictureUrl":"https://github.com/davidhartman.png"}],"references":[]}

2
samples/handlebarsjs-webpack-loader/README.md
View File

@ -13,7 +13,7 @@ extensions:
- Handlebars
createdDate: 3/5/2017 12:00:00 AM
---
## SPFx Sample with Handlebars.js
# SPFx Sample with Handlebars.js
This sample demonstrate how to set up SPFx to use [Handlebars](http://handlebarsjs.com) through [webpack loader](https://webpack.github.io/docs/loaders.html).

1
samples/handlebarsjs-webpack-loader/assets/sample.json Normal file
View File

@ -0,0 +1 @@
{"name":"pnp-sp-dev-spfx-web-parts-handlebarsjs-webpack-loader","version":null,"source":"pnp","title":"Sample with Handlebars.js","shortDescription":"This sample demonstrate how to set up SPFX to use Handlebars through webpack loader.","longDescription":["This sample demonstrate how to set up SPFX to use Handlebars through webpack loader."],"products":["SharePoint","Office"],"categories":[""],"metadata":[{"key":"CLIENT-SIDE-DEV","value":"Handlebars"},{"key":"SPFX-VERSION","value":"1.4.1"}],"thumbnails":[{"type":"image","order":100,"url":"https://avatars2.githubusercontent.com/u/5503835?s=460\u0026v=4","alt":"Sample with Handlebars.js","slides":null}],"authors":[{"gitHubAccount":"StfBauer","company":"","pictureUrl":"https://github.com/StfBauer.png"}],"references":[]}

1
samples/jquery-cdn/assets/sample.json Normal file
View File

@ -0,0 +1 @@
{"name":"pnp-sp-dev-spfx-web-parts-jquery-cdn","version":null,"source":"pnp","title":"Using jQuery loaded from CDN","shortDescription":"This is a sample web Part that illustrates the use of jQuery and its plugins loaded from CDN for building SharePoint Framework client-side web parts.","longDescription":["This is a sample web Part that illustrates the use of jQuery and its plugins loaded from CDN for building SharePoint Framework client-side web parts."],"products":["SharePoint","Office"],"categories":[""],"metadata":[{"key":"CLIENT-SIDE-DEV","value":"jQuery"},{"key":"SPFX-VERSION","value":"drop2"}],"thumbnails":[{"type":"image","order":100,"url":"https://github.com/pnp/sp-dev-fx-webparts/raw/master/samples/jquery-cdn/assets/preview_weather.png","alt":"Using jQuery loaded from CDN","slides":null}],"authors":[{"gitHubAccount":"waldekmastykarz","company":"","pictureUrl":"https://github.com/waldekmastykarz.png"}],"references":[]}

4
samples/jquery-photopile/README.md
View File

@ -15,7 +15,7 @@ extensions:
- JQuery
createdDate: 1/1/2016 12:00:00 AM
---
# JQuery, Photopile.JS & Office UI Fabric Client-Side Web Part
# JQuery, Photopile.JS & Office UI Fabric Client-Side Web Part
## Summary
@ -83,4 +83,4 @@ This web part illustrates the following concepts on top of the SharePoint Framew
* Etc.
<img src="https://telemetry.sharepointpnp.com/sp-dev-fx-webparts/samples/jquery-photopile" />
<img src="https://telemetry.sharepointpnp.com/sp-dev-fx-webparts/samples/jquery-photopile" />

1
samples/jquery-photopile/assets/sample.json Normal file
View File

@ -0,0 +1 @@
{"name":"pnp-sp-dev-spfx-web-parts-jquery-photopile","version":null,"source":"pnp","title":"JQuery, Photopile.JS \u0026 Office UI Fabric Client-Side Web Part","shortDescription":"This is a sample web part that illustrated the use of JQuery and Photopile.Js with the SharePoint Framework.","longDescription":["This is a sample web part that illustrated the use of JQuery and Photopile.Js with the SharePoint Framework."],"products":["SharePoint","Office"],"categories":[""],"metadata":[{"key":"CLIENT-SIDE-DEV","value":"jQuery"},{"key":"SPFX-VERSION","value":"drop1"}],"thumbnails":[{"type":"image","order":100,"url":"https://github.com/pnp/sp-dev-fx-webparts/raw/master/samples/jquery-photopile/assets/photopileoverview.gif","alt":"JQuery, Photopile.JS \u0026 Office UI Fabric Client-Side Web Part","slides":null}],"authors":[{"gitHubAccount":"OlivierCC","company":"","pictureUrl":"https://github.com/OlivierCC.png"}],"references":[]}

1
samples/js-advanced-commenting/assets/sample.json Normal file
View File

@ -0,0 +1 @@
{"name":"pnp-sp-dev-spfx-web-parts-js-advanced-commenting","version":null,"source":"pnp","title":"Advanced Comments Box","shortDescription":"This component is developed for the advanced usage of commenting the page or article etc. Page Comments lists will be created to store the comments.","longDescription":["This component is developed for the advanced usage of commenting the page or article etc. Page Comments lists will be created to store the comments."],"products":["SharePoint","Office"],"categories":[""],"metadata":[{"key":"CLIENT-SIDE-DEV","value":"jQuery"},{"key":"SPFX-VERSION","value":"1.9.1"}],"thumbnails":[{"type":"image","order":100,"url":"https://github.com/pnp/sp-dev-fx-webparts/raw/master/samples/js-advanced-commenting/assets/Advanced-Comments-Box.gif","alt":"Advanced Comments Box","slides":null}],"authors":[{"gitHubAccount":"sudharsank","company":"","pictureUrl":"https://github.com/sudharsank.png"}],"references":[]}

2
samples/js-display-list/README.md
View File

@ -11,7 +11,7 @@ extensions:
- SharePoint Framework
createdDate: 5/15/2017 12:00:00 AM
---
# Display List JavaScript Client-Side Web Part
# Display List
## Summary

1
samples/js-display-list/assets/sample.json Normal file
View File

@ -0,0 +1 @@
{"name":"pnp-sp-dev-spfx-web-parts-js-display-list","version":null,"source":"pnp","title":"Display List JavaScript Client-Side Web Part","shortDescription":"This simplistic sample Web Part demonstrates the use of JavaScript in a SharePoint Framework web part. The properties pane for this web part display a drop down list of lists in the current web. Once the user selects one of the lists, the web part display the contents of the list.","longDescription":["This simplistic sample Web Part demonstrates the use of JavaScript in a SharePoint Framework web part. The properties pane for this web part display a drop down list of lists in the current web. Once the user selects one of the lists, the web part display the contents of the list."],"products":["SharePoint","Office"],"categories":[""],"metadata":[{"key":"CLIENT-SIDE-DEV","value":"Javascript"},{"key":"SPFX-VERSION","value":"1.11.0"}],"thumbnails":[{"type":"image","order":100,"url":"https://github.com/pnp/sp-dev-fx-webparts/raw/master/samples/js-display-list/assets/display-list-preview.png","alt":"Display List JavaScript Client-Side Web Part","slides":null}],"authors":[{"gitHubAccount":"VelinGeorgiev","company":"","pictureUrl":"https://github.com/VelinGeorgiev.png"},{"gitHubAccount":"sharepointknight","company":"","pictureUrl":"https://github.com/sharepointknight.png"}],"references":[]}

1
samples/js-dynamic-bundling-libraries/assets/sample.json Normal file
View File

@ -0,0 +1 @@
{"name":"pnp-sp-dev-spfx-web-parts-js-dynamic-bundling-libraries","version":null,"source":"pnp","title":"Dynamic Bundling \u0026 Loading of SPFx Packages","shortDescription":"This sample illustrates how SPFx functionality and packages can be bundled in multiple \u0027.js\u0027 files then be dynamically \u0026 asynchronously loaded into the page at execution time, such as with a button click.","longDescription":["This sample illustrates how SPFx functionality and packages can be bundled in multiple \u0027.js\u0027 files then be dynamically \u0026 asynchronously loaded into the page at execution time, such as with a button click."],"products":["SharePoint","Office"],"categories":[""],"metadata":[{"key":"CLIENT-SIDE-DEV","value":"Javascript"},{"key":"SPFX-VERSION","value":"1.7.0"}],"thumbnails":[{"type":"image","order":100,"url":"https://github.com/pnp/sp-dev-fx-webparts/raw/master/samples/js-dynamic-bundling-libraries/assets/WebPart-Preview-PostjQueryClick.jpg","alt":"Dynamic Bundling \u0026 Loading of SPFx Packages","slides":null}],"authors":[{"gitHubAccount":"PopWarner","company":"","pictureUrl":"https://github.com/PopWarner.png"}],"references":[]}

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

@ -13,7 +13,7 @@ extensions:
- react
createdDate: 8/1/2017 12:00:00 AM
---
# Display Employee Spotlight JavaScript Client-Side Web Part
# Employee Spotlight
## Summary
Simple Web Part that demonstrates the use of SharePoint Framework for show casing Employee Spotlight. The web part pulls data from a configured list and User Profile service.

1
samples/js-employee-spotlight/assets/sample.json Normal file
View File

@ -0,0 +1 @@
{"name":"pnp-sp-dev-spfx-web-parts-js-employee-spotlight","version":null,"source":"pnp","title":"Display Employee Spotlight JavaScript Client-Side Web Part","shortDescription":"Simple Web Part that demonstrates the use of SharePoint Framework for showcasing Employee Spotlight. The web part pulls data from a configured list and User Profile service. The properties pane for this web part has 5 cascading dropdowns.","longDescription":["Simple Web Part that demonstrates the use of SharePoint Framework for showcasing Employee Spotlight. The web part pulls data from a configured list and User Profile service. The properties pane for this web part has 5 cascading dropdowns."],"products":["SharePoint","Office"],"categories":[""],"metadata":[{"key":"CLIENT-SIDE-DEV","value":"Javascript"},{"key":"SPFX-VERSION","value":"GA"}],"thumbnails":[{"type":"image","order":100,"url":"https://github.com/pnp/sp-dev-fx-webparts/raw/master/samples/js-employee-spotlight/assets/Employee-spotlight-priview.png","alt":"Display Employee Spotlight JavaScript Client-Side Web Part","slides":null}],"authors":[{"gitHubAccount":"brk114","company":"","pictureUrl":"https://github.com/brk114.png"}],"references":[]}

1
samples/js-extend-gulp/assets/sample.json Normal file
View File

@ -0,0 +1 @@
{"name":"pnp-sp-dev-spfx-web-parts-js-extend-gulp","version":null,"source":"pnp","title":"Integrating custom gulp tasks to SharePoint Framwork toolchain","shortDescription":"SharePoint client-side development tools use gulp as the build process task runner to...","longDescription":["SharePoint client-side development tools use gulp as the build process task runner to..."],"products":["SharePoint","Office"],"categories":[""],"metadata":[{"key":"CLIENT-SIDE-DEV","value":"Javascript"},{"key":"SPFX-VERSION","value":"rc0"}],"thumbnails":[{"type":"image","order":100,"url":"https://avatars3.githubusercontent.com/u/7882052?s=460\u0026v=4","alt":"Integrating custom gulp tasks to SharePoint Framwork toolchain","slides":null}],"authors":[{"gitHubAccount":"chakkaradeep","company":"","pictureUrl":"https://github.com/chakkaradeep.png"}],"references":[]}

1
samples/js-extend-webpack/assets/sample.json Normal file
View File

@ -0,0 +1 @@
{"name":"pnp-sp-dev-spfx-web-parts-js-extend-webpack","version":null,"source":"pnp","title":"Extending webpack in the SharePoint Framework toolchain","shortDescription":"This sample shows how to use the webpack markdown-loader to preprocess markdown files to HTML string.","longDescription":["This sample shows how to use the webpack markdown-loader to preprocess markdown files to HTML string."],"products":["SharePoint","Office"],"categories":[""],"metadata":[{"key":"CLIENT-SIDE-DEV","value":"Javascript"},{"key":"SPFX-VERSION","value":"GA"}],"thumbnails":[{"type":"image","order":100,"url":"https://github.com/pnp/media/raw/master/parker/pnp/300w/parker.png","alt":"Extending webpack in the SharePoint Framework toolchain","slides":null}],"authors":[{"gitHubAccount":"VelinGeorgiev","company":"","pictureUrl":"https://github.com/VelinGeorgiev.png"},{"gitHubAccount":"chakkaradeep","company":"","pictureUrl":"https://github.com/chakkaradeep.png"}],"references":[]}

4
samples/js-extend-webpack/yarn.lock
View File

@ -4348,8 +4348,8 @@ inherits@^2.0.3:
resolved "https://registry.yarnpkg.com/inherits/-/inherits-2.0.4.tgz#0fa2c64f932917c3433a0ded55363aae37416b7c"
ini@^1.3.4, ini@~1.3.0:
version "1.3.4"
resolved "https://registry.yarnpkg.com/ini/-/ini-1.3.4.tgz#0537cb79daf59b59a1a517dff706c86ec039162e"
version "1.3.7"
resolved "https://registry.yarnpkg.com/ini/-/ini-1.3.7.tgz#a09363e1911972ea16d7a8851005d84cf09a9a84"
inline-style-prefixer@^3.0.6:
version "3.0.8"

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

@ -1,11 +1,11 @@
# GitHub Badge
# GitHub Badge (JavaScript version)
## Summary
Displays information from GitHub for a specified user.
![drop](./assets/1.png)
## Used SharePoint Framework Version
![drop](https://img.shields.io/badge/version-GA-green.svg)
![SPFx 1.8.0](https://img.shields.io/badge/version-1.8.0-green.svg)
## Applies to
@ -50,4 +50,4 @@ Future samples will refactor this into something more professional that follows
Ultimately, this sample along with its yet-to-be-created future samples could be a useful teaching tool to developers new to SPFx as well as developers who aren't well-versed in SPFx coding patterns or the various frameworks available.
<img src="https://telemetry.sharepointpnp.com/sp-dev-fx-webparts/samples/js-gitHubBadge" />
<img src="https://telemetry.sharepointpnp.com/sp-dev-fx-webparts/samples/js-gitHubBadge" />

1
samples/js-gitHubBadge/assets/sample.json Normal file
View File

@ -0,0 +1 @@
{"name":"pnp-sp-dev-spfx-web-parts-js-gitHubBadge","version":null,"source":"pnp","title":"GitHub Badge","shortDescription":"","longDescription":[""],"products":["SharePoint","Office"],"categories":[""],"metadata":[{"key":"CLIENT-SIDE-DEV","value":"Javascript"},{"key":"SPFX-VERSION","value":"1.8.0"}],"thumbnails":[{"type":"image","order":100,"url":"https://github.com/pnp/sp-dev-fx-webparts/raw/master/samples/js-gitHubBadge/assets/1.png","alt":"GitHub Badge","slides":null}],"authors":[{"gitHubAccount":"skaggej","company":"","pictureUrl":"https://github.com/skaggej.png"}],"references":[]}

17
samples/js-modern-calendar/README.md
View File

@ -14,14 +14,22 @@ extensions:
# Modern Calendar
## Summary
This is a modern webpart built on the GA version of the [SharePoint Framework](https://dev.office.com/sharepoint/docs/spfx/sharepoint-framework-overview) demonstrating how to build a custom web part with a calendar capabilities in it.
This is a modern web part built on the GA version of the [SharePoint Framework](https://dev.office.com/sharepoint/docs/spfx/sharepoint-framework-overview) demonstrating how to build a custom web part with a calendar capabilities in it.
![SS1](https://cloud.githubusercontent.com/assets/13068139/23584809/14c4333e-0121-11e7-9bf1-3117651222d3.png)
![SS2](https://cloud.githubusercontent.com/assets/13068139/23584808/14c3ec26-0121-11e7-8be8-65fbcca32b62.png)
![SS3](https://cloud.githubusercontent.com/assets/13068139/23584807/14b88f34-0121-11e7-8c91-56ecff9343e1.png)
## Used SharePoint Framework Version
![drop](https://img.shields.io/badge/version-1.6.0-green.svg)
## Compatibility
![SPFx 1.11](https://img.shields.io/badge/SPFx-1.11.0-green.svg)
![Node.js LTS 10.x](https://img.shields.io/badge/Node.js-LTS%2010.x-green.svg)
![SharePoint Online](https://img.shields.io/badge/SharePoint-Online-yellow.svg)
![Teams N/A: Untested with Microsoft Teams](https://img.shields.io/badge/Teams-N%2FA-lightgrey.svg "Untested with Microsoft Teams")
![Workbench Hosted: Does not work with local workbench](https://img.shields.io/badge/Workbench-Hosted-yellow.svg "Does not work with local workbench")
## Applies to
@ -38,6 +46,7 @@ Solution|Author(s)
--------|---------
js-modern-calendar | Jeremy Coleman (MCP, PC Professional, Inc.)
js-modern-calendar | Nanddeep Nachan ([@NanddeepNachan](twitter.com/NanddeepNachan))
js-modern-calendar | Ravi Chandra ([Ravikadri](https://github.com/Ravikadri))
## Version history
@ -45,8 +54,10 @@ Version|Date|Comments
-------|----|--------
1.0.0.0|February 11, 2017|Initial release
1.0.0.1|June 05, 2020|Updated the external CDN references to public CDN references
1.0.2.0|February 9, 2021|Upgraded to SPFx 1.11 and fixed issues with missing dependencies
## 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.**
---

1
samples/js-modern-calendar/assets/sample.json Normal file
View File

@ -0,0 +1 @@
{"name":"pnp-sp-dev-spfx-web-parts-js-modern-calendar","version":null,"source":"pnp","title":"Modern Calendar","shortDescription":"This is a modern web part built on the GA version of the SharePoint Framework demonstrating how to build a custom web part with a calendar capabilities in it.","longDescription":["This is a modern web part built on the GA version of the SharePoint Framework demonstrating how to build a custom web part with a calendar capabilities in it."],"products":["SharePoint","Office"],"categories":[""],"metadata":[{"key":"CLIENT-SIDE-DEV","value":"Javascript"},{"key":"SPFX-VERSION","value":"1.6.0"}],"thumbnails":[{"type":"image","order":100,"url":"https://cloud.githubusercontent.com/assets/13068139/23584808/14c3ec26-0121-11e7-8be8-65fbcca32b62.png","alt":"Modern Calendar","slides":null}],"authors":[{"gitHubAccount":"jcoleman-pcprofessional","company":"","pictureUrl":"https://github.com/jcoleman-pcprofessional.png"},{"gitHubAccount":"nanddeepn","company":"","pictureUrl":"https://github.com/nanddeepn.png"}],"references":[]}

11
samples/js-modern-calendar/config/package-solution.json
View File

@ -2,8 +2,15 @@
"solution": {
"name": "SPFx Modern Calendar",
"id": "3d593a2f-73f1-486f-9dae-555c6f6b584d",
"version": "1.0.0.1",
"includeClientSideAssets": true
"version": "1.0.2.0",
"includeClientSideAssets": true,
"developer": {
"name": "",
"websiteUrl": "",
"privacyUrl": "",
"termsOfUseUrl": "",
"mpnId": ""
}
},
"paths": {
"zippedPackage": "solution/modern-calendar.sppkg"

15336
samples/js-modern-calendar/package-lock.json generated
View File

File diff suppressed because it is too large Load Diff

23
samples/js-modern-calendar/package.json
View File

@ -1,26 +1,31 @@
{
"name": "modern-calendar",
"version": "0.0.1",
"version": "1.0.2",
"private": true,
"main": "lib/index.js",
"engines": {
"node": ">=0.10.0"
},
"dependencies": {
"@microsoft/sp-core-library": "1.6.0",
"@microsoft/sp-webpart-base": "1.6.0",
"@microsoft/sp-core-library": "1.11.0",
"@microsoft/sp-property-pane": "1.11.0",
"@microsoft/sp-webpart-base": "1.11.0",
"@types/fullcalendar": "^2.7.38",
"@types/moment": "^2.13.0",
"@types/webpack-env": ">=1.12.1 <1.14.0",
"fullcalendar": "3.9.0",
"sweetalert2": "^6.4.2"
},
"devDependencies": {
"@microsoft/sp-build-web": "1.6.0",
"@microsoft/sp-module-interfaces": "1.6.0",
"@microsoft/sp-webpart-workbench": "1.6.0",
"gulp": "~3.9.1",
"@microsoft/rush-stack-compiler-3.3": "0.3.5",
"@microsoft/sp-build-web": "1.11.0",
"@microsoft/sp-module-interfaces": "1.11.0",
"@microsoft/sp-tslint-rules": "1.11.0",
"@microsoft/sp-webpart-workbench": "1.11.0",
"@types/chai": ">=3.4.34 <3.6.0",
"@types/mocha": ">=2.2.33 <2.6.0"
"@types/es6-promise": "0.0.33",
"@types/mocha": ">=2.2.33 <2.6.0",
"@types/webpack-env": "1.13.1",
"gulp": "~3.9.1"
},
"scripts": {
"build": "gulp bundle",

119
samples/js-modern-calendar/src/webparts/modernCalendar/CalendarTemplate.ts
View File

@ -1,8 +1,6 @@
import {
IPropertyPaneDropdownOption
} from '@microsoft/sp-webpart-base';
import styles from './CalendarTemplate.module.scss';
import { escape } from '@microsoft/sp-lodash-subset';
import styles from "./CalendarTemplate.module.scss";
import { escape } from "@microsoft/sp-lodash-subset";
import { IPropertyPaneDropdownOption } from "@microsoft/sp-property-pane";
export interface ISPLists {
value: ISPList[];
@ -13,12 +11,12 @@ export interface ISPList {
Id: string;
}
export default class CalendarTemplate {
public static templateHtml: string = `
public static templateHtml: string = `
<div class='spfxcalendar'></div>
`;
public static emptyHtml(title: string): string {
return `<div class="${styles.EmptyCalendar}">
public static emptyHtml(title: string): string {
return `<div class="${styles.EmptyCalendar}">
<div class="${styles.container}">
<div class="ms-Grid-row ms-bgColor-themeDark ms-fontColor-white ${styles.row}">
<div class="ms-Grid-col ms-u-lg10 ms-u-xl8 ms-u-xlPush2 ms-u-lgPush1">
@ -32,51 +30,68 @@ export default class CalendarTemplate {
</div>
</div>
`;
}
}
public static themeBase: string = `https://code.jquery.com/ui/1.12.1/themes/`;
public static themeBase: string = `https://code.jquery.com/ui/1.12.1/themes/`;
public static themeNames: Array<string> = [
'default',
'black-tie',
'blitzer',
'cupertino',
'dark-hive',
'dot-luv',
'eggplant',
'excite-bike',
'flick',
'hot-sneaks',
'humanity',
'le-frog',
'mint-choc',
'overcast',
'pcpro',
'pepper-grinder',
'redmond',
'smoothness',
'south-street',
'start',
'sunny',
'swanky-purse',
'trontastic',
'ui-darkness',
'ui-lightness',
'vader'
];
public static themeNames: Array<string> = [
"default",
"black-tie",
"blitzer",
"cupertino",
"dark-hive",
"dot-luv",
"eggplant",
"excite-bike",
"flick",
"hot-sneaks",
"humanity",
"le-frog",
"mint-choc",
"overcast",
"pcpro",
"pepper-grinder",
"redmond",
"smoothness",
"south-street",
"start",
"sunny",
"swanky-purse",
"trontastic",
"ui-darkness",
"ui-lightness",
"vader",
];
public static theme(): IPropertyPaneDropdownOption[] {
var themes: IPropertyPaneDropdownOption[] = [];
CalendarTemplate.themeNames.forEach(function(name,index) {
themes.push({key: CalendarTemplate.themeBase + name + '/jquery-ui.min.css', text: name.toLocaleUpperCase()});
});
return themes;
}
public static theme(): IPropertyPaneDropdownOption[] {
var themes: IPropertyPaneDropdownOption[] = [];
CalendarTemplate.themeNames.forEach(function (name, index) {
themes.push({
key: CalendarTemplate.themeBase + name + "/jquery-ui.min.css",
text: name.toLocaleUpperCase(),
});
});
return themes;
}
public static themes: IPropertyPaneDropdownOption[] = [
{ key: CalendarTemplate.themeBase + 'jquery-ui.theme.min.css', text: 'Default' },
{ key: CalendarTemplate.themeBase + 'ui-lightness/jquery-ui.min.css', text: 'Light' },
{ key: '//cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/themes/redmond/jquery-ui.min.css', text: 'Redmond' },
{ key: '//cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/themes/overcast/jquery-ui.min.css', text: 'Overcast' }
];
}
public static themes: IPropertyPaneDropdownOption[] = [
{
key: CalendarTemplate.themeBase + "jquery-ui.theme.min.css",
text: "Default",
},
{
key: CalendarTemplate.themeBase + "ui-lightness/jquery-ui.min.css",
text: "Light",
},
{
key:
"//cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/themes/redmond/jquery-ui.min.css",
text: "Redmond",
},
{
key:
"//cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/themes/overcast/jquery-ui.min.css",
text: "Overcast",
},
];
}

2
samples/js-modern-calendar/src/webparts/modernCalendar/ModernCalendarWebPart.manifest.json
View File

@ -6,7 +6,7 @@
"componentType": "WebPart",
"version": "*",
"manifestVersion": 2,
"supportedHosts": ["SharePointWebPart"],
"preconfiguredEntries": [{
"groupId": "c2a397d3-8c8f-47ab-b731-897178313c15",
"group": { "default": "Modern Web Parts" },

517
samples/js-modern-calendar/src/webparts/modernCalendar/ModernCalendarWebPart.ts
View File

@ -1,33 +1,29 @@
import { Version } from '@microsoft/sp-core-library';
import { BaseClientSideWebPart } from "@microsoft/sp-webpart-base";
import {
BaseClientSideWebPart,
IPropertyPaneConfiguration,
IPropertyPaneDropdownOption,
IPropertyPaneTextFieldProps,
IWebPartContext,
PropertyPaneTextField,
PropertyPaneDropdown,
IPropertyPaneDropdownProps
} from '@microsoft/sp-webpart-base';
import { escape } from '@microsoft/sp-lodash-subset';
import styles from './ModernCalendar.module.scss';
import * as strings from 'modernCalendarStrings';
import { IModernCalendarWebPartProps } from './IModernCalendarWebPartProps';
import CalendarTemplate from './CalendarTemplate';
import * as jQuery from 'jquery';
import 'fullcalendar';
import * as moment from 'moment';
import * as swal2 from 'sweetalert2';
import { SPComponentLoader } from '@microsoft/sp-loader';
import {
SPHttpClient, SPHttpClientResponse
} from '@microsoft/sp-http';
import {
Environment,
EnvironmentType
} from '@microsoft/sp-core-library';
import { EventObjectInput, OptionsInput } from 'fullcalendar';
import { Default as View } from 'fullcalendar/View';
IPropertyPaneDropdownProps,
} from "@microsoft/sp-property-pane";
import { Version } from "@microsoft/sp-core-library";
import { escape } from "@microsoft/sp-lodash-subset";
import styles from "./ModernCalendar.module.scss";
import * as strings from "modernCalendarStrings";
import { IModernCalendarWebPartProps } from "./IModernCalendarWebPartProps";
import CalendarTemplate from "./CalendarTemplate";
import * as jQuery from "jquery";
import "fullcalendar";
import * as moment from "moment";
import * as swal2 from "sweetalert2";
import { SPComponentLoader } from "@microsoft/sp-loader";
import { SPHttpClient, SPHttpClientResponse } from "@microsoft/sp-http";
import { Environment, EnvironmentType } from "@microsoft/sp-core-library";
import { EventObjectInput, OptionsInput } from "fullcalendar";
import { Default as View } from "fullcalendar/View";
export interface ISPLists {
value: ISPList[];
@ -43,12 +39,15 @@ export interface EventObjects {
}
export default class ModernCalendarWebPart extends BaseClientSideWebPart<IModernCalendarWebPartProps> {
public constructor() {
super();
// Modify with your a CDN or local path
SPComponentLoader.loadCss('https://cdnjs.cloudflare.com/ajax/libs/limonte-sweetalert2/8.11.8/sweetalert2.min.css');
SPComponentLoader.loadCss('https://cdnjs.cloudflare.com/ajax/libs/fullcalendar/3.9.0/fullcalendar.min.css');
SPComponentLoader.loadCss(
"https://cdnjs.cloudflare.com/ajax/libs/limonte-sweetalert2/8.11.8/sweetalert2.min.css"
);
SPComponentLoader.loadCss(
"https://cdnjs.cloudflare.com/ajax/libs/fullcalendar/3.9.0/fullcalendar.min.css"
);
}
public render(): void {
@ -57,12 +56,20 @@ export default class ModernCalendarWebPart extends BaseClientSideWebPart<IModern
}
if (!this.properties.other) {
jQuery('input[aria-label=hide-col]').parent().hide();
jQuery("input[aria-label=hide-col]").parent().hide();
}
//Check required properties before rendering list
if (this.properties.listTitle == null || this.properties.start == null || this.properties.end == null || this.properties.title == null || this.properties.detail == null) {
this.domElement.innerHTML = CalendarTemplate.emptyHtml(this.properties.description);
if (
this.properties.listTitle == null ||
this.properties.start == null ||
this.properties.end == null ||
this.properties.title == null ||
this.properties.detail == null
) {
this.domElement.innerHTML = CalendarTemplate.emptyHtml(
this.properties.description
);
} else {
this.domElement.innerHTML = CalendarTemplate.templateHtml;
this._renderListAsync();
@ -70,7 +77,7 @@ export default class ModernCalendarWebPart extends BaseClientSideWebPart<IModern
}
protected get dataVersion(): Version {
return Version.parse('1.0');
return Version.parse("1.0");
}
protected onPropertyPaneConfigurationStart(): void {
@ -82,109 +89,156 @@ export default class ModernCalendarWebPart extends BaseClientSideWebPart<IModern
if (this.properties.site) {
this.listDisabled = false;
}
if (this.properties.listTitle && (!this.properties.start || !this.properties.end || !this.properties.title || !this.properties.detail)) {
if (
this.properties.listTitle &&
(!this.properties.start ||
!this.properties.end ||
!this.properties.title ||
!this.properties.detail)
) {
//this._getColumnsAsync();
}
if (!this.properties.other) {
jQuery('input[aria-label=hide-col]').parent().hide();
jQuery("input[aria-label=hide-col]").parent().hide();
}
if (this.properties.site && this.properties.listTitle && this.properties.start && this.properties.start && this.properties.end && this.properties.title && this.properties.detail) {
this.context.statusRenderer.displayLoadingIndicator(this.domElement, 'Configuration');
this._getSiteRootWeb()
.then((response0) => {
this._getSites(response0['Url'])
.then((response) => {
var sites: IPropertyPaneDropdownOption[] = [];
sites.push({ key: this.context.pageContext.web.absoluteUrl, text: 'This Site' });
sites.push({ key: 'other', text: 'Other Site (Specify Url)' });
for (var _key in response.value) {
if (this.context.pageContext.web.absoluteUrl != response.value[_key]['Url']) {
sites.push({ key: response.value[_key]['Url'], text: response.value[_key]['Title'] });
}
}
this._siteOptions = sites;
if (this.properties.site) {
this._getListTitles(this.properties.site)
.then((response2) => {
this._dropdownOptions = response2.value.map((list: ISPList) => {
return {
key: list.Title,
text: list.Title
};
});
this._getListColumns(this.properties.listTitle, this.properties.site)
.then((response3) => {
var col: IPropertyPaneDropdownOption[] = [];
for (var _key in response3.value) {
col.push({ key: response3.value[_key]['InternalName'], text: response3.value[_key]['Title'] });
}
this._columnOptions = col;
this.colsDisabled = false;
this.listDisabled = false;
this.context.propertyPane.refresh();
this.context.statusRenderer.clearLoadingIndicator(this.domElement);
this.render();
});
if (
this.properties.site &&
this.properties.listTitle &&
this.properties.start &&
this.properties.start &&
this.properties.end &&
this.properties.title &&
this.properties.detail
) {
this.context.statusRenderer.displayLoadingIndicator(
this.domElement,
"Configuration"
);
this._getSiteRootWeb().then((response0) => {
this._getSites(response0["Url"]).then((response) => {
var sites: IPropertyPaneDropdownOption[] = [];
sites.push({
key: this.context.pageContext.web.absoluteUrl,
text: "This Site",
});
sites.push({ key: "other", text: "Other Site (Specify Url)" });
for (var _key in response.value) {
if (
this.context.pageContext.web.absoluteUrl !=
response.value[_key]["Url"]
) {
sites.push({
key: response.value[_key]["Url"],
text: response.value[_key]["Title"],
});
}
}
this._siteOptions = sites;
if (this.properties.site) {
this._getListTitles(this.properties.site).then((response2) => {
this._dropdownOptions = response2.value.map((list: ISPList) => {
return {
key: list.Title,
text: list.Title,
};
});
this._getListColumns(
this.properties.listTitle,
this.properties.site
).then((response3) => {
var col: IPropertyPaneDropdownOption[] = [];
for (var _key in response3.value) {
col.push({
key: response3.value[_key]["InternalName"],
text: response3.value[_key]["Title"],
});
}
}
this._columnOptions = col;
this.colsDisabled = false;
this.listDisabled = false;
this.context.propertyPane.refresh();
this.context.statusRenderer.clearLoadingIndicator(
this.domElement
);
this.render();
});
});
}
});
});
} else {
this._getSitesAsync();
}
}
protected onPropertyPaneFieldChanged(propertyPath: string, oldValue: any, newValue: any): void {
if (newValue == 'other') {
protected onPropertyPaneFieldChanged(
propertyPath: string,
oldValue: any,
newValue: any
): void {
if (newValue == "other") {
this.properties.other = true;
this.properties.listTitle = null;
jQuery('input[aria-label=hide-col]').parent().show();
} else if (oldValue === 'other' && newValue != 'other') {
jQuery("input[aria-label=hide-col]").parent().show();
} else if (oldValue === "other" && newValue != "other") {
this.properties.other = false;
this.properties.siteOther = null;
this.properties.listTitle = null;
jQuery('input[aria-label=hide-col]').parent().hide();
jQuery("input[aria-label=hide-col]").parent().hide();
}
this.context.statusRenderer.displayLoadingIndicator(this.domElement, 'Configuration');
if ((propertyPath === 'site' || propertyPath === 'siteOther') && newValue) {
this.context.statusRenderer.displayLoadingIndicator(
this.domElement,
"Configuration"
);
if ((propertyPath === "site" || propertyPath === "siteOther") && newValue) {
this.colsDisabled = true;
this.listDisabled = true;
var siteUrl = newValue;
if (this.properties.other) { siteUrl = this.properties.siteOther; } else { jQuery('input[aria-label=hide-col]').parent().hide(); }
if ((this.properties.other && this.properties.siteOther.length > 25) || !this.properties.other) {
this._getListTitles(siteUrl)
.then((response) => {
this._dropdownOptions = response.value.map((list: ISPList) => {
return {
key: list.Title,
text: list.Title
};
});
this.listDisabled = false;
this.context.propertyPane.refresh();
this.context.statusRenderer.clearLoadingIndicator(this.domElement);
this.render();
});
if (this.properties.other) {
siteUrl = this.properties.siteOther;
} else {
jQuery("input[aria-label=hide-col]").parent().hide();
}
} else if (propertyPath === 'listTitle' && newValue) {
// tslint:disable-next-line:no-duplicate-variable
var siteUrl = newValue;
if (this.properties.other) { siteUrl = this.properties.siteOther; }
this._getListColumns(newValue, siteUrl)
.then((response) => {
var col: IPropertyPaneDropdownOption[] = [];
for (var _key in response.value) {
col.push({ key: response.value[_key]['InternalName'], text: response.value[_key]['Title'] });
}
this._columnOptions = col;
this.colsDisabled = false;
if (
(this.properties.other && this.properties.siteOther.length > 25) ||
!this.properties.other
) {
this._getListTitles(siteUrl).then((response) => {
this._dropdownOptions = response.value.map((list: ISPList) => {
return {
key: list.Title,
text: list.Title,
};
});
this.listDisabled = false;
this.context.propertyPane.refresh();
this.context.statusRenderer.clearLoadingIndicator(this.domElement);
this.render();
});
}
} else if (propertyPath === "listTitle" && newValue) {
// tslint:disable-next-line:no-duplicate-variable
var siteUrl = newValue;
if (this.properties.other) {
siteUrl = this.properties.siteOther;
}
this._getListColumns(newValue, siteUrl).then((response) => {
var col: IPropertyPaneDropdownOption[] = [];
for (var _key in response.value) {
col.push({
key: response.value[_key]["InternalName"],
text: response.value[_key]["Title"],
});
}
this._columnOptions = col;
this.colsDisabled = false;
this.context.propertyPane.refresh();
this.context.statusRenderer.clearLoadingIndicator(this.domElement);
this.render();
});
} else {
//Handle other fields here
this.render();
@ -195,63 +249,66 @@ export default class ModernCalendarWebPart extends BaseClientSideWebPart<IModern
private listDisabled: boolean = true;
protected getPropertyPaneConfiguration(): IPropertyPaneConfiguration {
var otherSiteAria = 'hide-col';
if (this.properties.other) { otherSiteAria = ''; }
var otherSiteAria = "hide-col";
if (this.properties.other) {
otherSiteAria = "";
}
return {
pages: [
{
header: {
description: strings.PropertyPaneDescription
description: strings.PropertyPaneDescription,
},
groups: [
{
groupName: strings.BasicGroupName,
groupFields: [
PropertyPaneTextField('description', {
label: strings.DescriptionFieldLabel
PropertyPaneTextField("description", {
label: strings.DescriptionFieldLabel,
}),
PropertyPaneDropdown('theme', {
label: 'Theme',
options: CalendarTemplate.theme()
PropertyPaneDropdown("theme", {
label: "Theme",
options: CalendarTemplate.theme(),
}),
PropertyPaneDropdown('site', {
label: 'Site',
options: this._siteOptions
PropertyPaneDropdown("site", {
label: "Site",
options: this._siteOptions,
}),
PropertyPaneTextField('siteOther', {
label: 'Other Site Url (i.e. https://contoso.sharepoint.com/path)',
ariaLabel: otherSiteAria
PropertyPaneTextField("siteOther", {
label:
"Other Site Url (i.e. https://contoso.sharepoint.com/path)",
ariaLabel: otherSiteAria,
}),
PropertyPaneDropdown('listTitle', {
label: 'List Title',
PropertyPaneDropdown("listTitle", {
label: "List Title",
options: this._dropdownOptions,
disabled: this.listDisabled
disabled: this.listDisabled,
}),
PropertyPaneDropdown('start', {
label: 'Start Date Field',
PropertyPaneDropdown("start", {
label: "Start Date Field",
options: this._columnOptions,
disabled: this.colsDisabled
disabled: this.colsDisabled,
}),
PropertyPaneDropdown('end', {
label: 'End Date Field',
PropertyPaneDropdown("end", {
label: "End Date Field",
options: this._columnOptions,
disabled: this.colsDisabled
disabled: this.colsDisabled,
}),
PropertyPaneDropdown('title', {
label: 'Event Title Field',
PropertyPaneDropdown("title", {
label: "Event Title Field",
options: this._columnOptions,
disabled: this.colsDisabled
disabled: this.colsDisabled,
}),
PropertyPaneDropdown('detail', {
label: 'Event Details',
PropertyPaneDropdown("detail", {
label: "Event Details",
options: this._columnOptions,
disabled: this.colsDisabled
})
]
}
]
}
]
disabled: this.colsDisabled,
}),
],
},
],
},
],
};
}
@ -265,35 +322,67 @@ export default class ModernCalendarWebPart extends BaseClientSideWebPart<IModern
}
private _getSiteRootWeb(): Promise<ISPLists> {
return this.context.spHttpClient.get(this.context.pageContext.web.absoluteUrl + `/_api/Site/RootWeb?$select=Title,Url`, SPHttpClient.configurations.v1)
return this.context.spHttpClient
.get(
this.context.pageContext.web.absoluteUrl +
`/_api/Site/RootWeb?$select=Title,Url`,
SPHttpClient.configurations.v1
)
.then((response: SPHttpClientResponse) => {
return response.json();
});
}
private _getSites(rootWebUrl: string): Promise<ISPLists> {
return this.context.spHttpClient.get(rootWebUrl + `/_api/web/webs?$select=Title,Url`, SPHttpClient.configurations.v1)
return this.context.spHttpClient
.get(
rootWebUrl + `/_api/web/webs?$select=Title,Url`,
SPHttpClient.configurations.v1
)
.then((response: SPHttpClientResponse) => {
return response.json();
});
}
private _getListTitles(site: string): Promise<ISPLists> {
return this.context.spHttpClient.get(site + `/_api/web/lists?$filter=Hidden eq false and BaseType eq 0`, SPHttpClient.configurations.v1)
return this.context.spHttpClient
.get(
site + `/_api/web/lists?$filter=Hidden eq false and BaseType eq 0`,
SPHttpClient.configurations.v1
)
.then((response: SPHttpClientResponse) => {
return response.json();
});
}
private _getListColumns(listNameColumns: string, listsite: string): Promise<any> {
return this.context.spHttpClient.get(listsite + `/_api/web/lists/GetByTitle('${listNameColumns}')/Fields?$filter=Hidden eq false and ReadOnlyField eq false`, SPHttpClient.configurations.v1)
private _getListColumns(
listNameColumns: string,
listsite: string
): Promise<any> {
return this.context.spHttpClient
.get(
listsite +
`/_api/web/lists/GetByTitle('${listNameColumns}')/Fields?$filter=Hidden eq false and ReadOnlyField eq false`,
SPHttpClient.configurations.v1
)
.then((response: SPHttpClientResponse) => {
return response.json();
});
}
private _getListData(listName: string, site: string): Promise<any> {
return this.context.spHttpClient.get(site + `/_api/web/lists/GetByTitle('${listName}')/items?$select=${encodeURIComponent(this.properties.title)},${encodeURIComponent(this.properties.start)},${encodeURIComponent(this.properties.end)},${encodeURIComponent(this.properties.detail)},Created,Author/ID,Author/Title&$expand=Author/ID,Author/Title&$orderby=Id desc&$limit=500`, SPHttpClient.configurations.v1)
return this.context.spHttpClient
.get(
site +
`/_api/web/lists/GetByTitle('${listName}')/items?$select=${encodeURIComponent(
this.properties.title
)},${encodeURIComponent(this.properties.start)},${encodeURIComponent(
this.properties.end
)},${encodeURIComponent(
this.properties.detail
)},Created,Author/ID,Author/Title&$expand=Author/ID,Author/Title&$orderby=Id desc&$limit=500`,
SPHttpClient.configurations.v1
)
.then((response: SPHttpClientResponse) => {
return response.json();
});
@ -305,8 +394,8 @@ export default class ModernCalendarWebPart extends BaseClientSideWebPart<IModern
title: list[this.properties.title],
start: list[this.properties.start],
end: list[this.properties.end],
id: list['Id'],
detail: list[this.properties.detail]
id: list["Id"],
detail: list[this.properties.detail],
};
});
this.context.statusRenderer.clearLoadingIndicator(this.domElement);
@ -315,67 +404,89 @@ export default class ModernCalendarWebPart extends BaseClientSideWebPart<IModern
theme: true,
events: calItems,
eventClick: (_event) => {
var eventDetail = moment(_event['start']).format('MM/DD/YYYY hh:mm') + ' - ' + moment(_event['end']).format('MM/DD/YYYY hh:mm') + '<br>' + _event['detail'];
swal2.default(_event.title, eventDetail, 'info');
}
var eventDetail =
moment(_event["start"]).format("MM/DD/YYYY hh:mm") +
" - " +
moment(_event["end"]).format("MM/DD/YYYY hh:mm") +
"<br>" +
_event["detail"];
swal2.default(_event.title, eventDetail, "info");
},
};
jQuery('.spfxcalendar', this.domElement).fullCalendar(calendarOptions);
jQuery(".spfxcalendar", this.domElement).fullCalendar(calendarOptions);
}
private _getSitesAsync(): void {
this._getSiteRootWeb()
.then((response) => {
this._getSites(response['Url'])
.then((response1) => {
var sites: IPropertyPaneDropdownOption[] = [];
sites.push({ key: this.context.pageContext.web.absoluteUrl, text: 'This Site' });
sites.push({ key: 'other', text: 'Other Site (Specify Url)' });
for (var _key in response1.value) {
sites.push({ key: response1.value[_key]['Url'], text: response1.value[_key]['Title'] });
}
this._siteOptions = sites;
this.context.propertyPane.refresh();
var siteUrl = this.properties.site;
if (this.properties.other) { siteUrl = this.properties.siteOther; }
this._getListTitles(siteUrl)
.then((response2) => {
this._dropdownOptions = response2.value.map((list: ISPList) => {
return {
key: list.Title,
text: list.Title
};
});
this.context.propertyPane.refresh();
if (this.properties.listTitle) {
this._getListColumns(this.properties.listTitle, this.properties.site)
.then((response3) => {
var col: IPropertyPaneDropdownOption[] = [];
for (var _key in response3.value) {
col.push({ key: response3.value[_key]['InternalName'], text: response3.value[_key]['Title'] });
}
this._columnOptions = col;
this.colsDisabled = false;
this.listDisabled = false;
this.context.propertyPane.refresh();
this.context.statusRenderer.clearLoadingIndicator(this.domElement);
this.render();
});
}
});
this._getSiteRootWeb().then((response) => {
this._getSites(response["Url"]).then((response1) => {
var sites: IPropertyPaneDropdownOption[] = [];
sites.push({
key: this.context.pageContext.web.absoluteUrl,
text: "This Site",
});
sites.push({ key: "other", text: "Other Site (Specify Url)" });
for (var _key in response1.value) {
sites.push({
key: response1.value[_key]["Url"],
text: response1.value[_key]["Title"],
});
}
this._siteOptions = sites;
this.context.propertyPane.refresh();
var siteUrl = this.properties.site;
if (this.properties.other) {
siteUrl = this.properties.siteOther;
}
this._getListTitles(siteUrl).then((response2) => {
this._dropdownOptions = response2.value.map((list: ISPList) => {
return {
key: list.Title,
text: list.Title,
};
});
this.context.propertyPane.refresh();
if (this.properties.listTitle) {
this._getListColumns(
this.properties.listTitle,
this.properties.site
).then((response3) => {
var col: IPropertyPaneDropdownOption[] = [];
for (var _key in response3.value) {
col.push({
key: response3.value[_key]["InternalName"],
text: response3.value[_key]["Title"],
});
}
this._columnOptions = col;
this.colsDisabled = false;
this.listDisabled = false;
this.context.propertyPane.refresh();
this.context.statusRenderer.clearLoadingIndicator(
this.domElement
);
this.render();
});
}
});
});
}
private _renderListAsync(): void {
var siteUrl = this.properties.site;
if (this.properties.other) { siteUrl = this.properties.siteOther; }
this._getListData(this.properties.listTitle, siteUrl).then((response) => {
this._renderList(response.value);
}).catch((err) => {
this.context.statusRenderer.clearLoadingIndicator(this.domElement);
this.context.statusRenderer.renderError(this.domElement, "There was an error loading your list, please verify the selected list has Calendar Events or choose a new list.");
});
}
private _renderListAsync(): void {
var siteUrl = this.properties.site;
if (this.properties.other) {
siteUrl = this.properties.siteOther;
}
this._getListData(this.properties.listTitle, siteUrl)
.then((response) => {
this._renderList(response.value);
})
.catch((err) => {
this.context.statusRenderer.clearLoadingIndicator(this.domElement);
this.context.statusRenderer.renderError(
this.domElement,
"There was an error loading your list, please verify the selected list has Calendar Events or choose a new list."
);
});
}
}

7
samples/js-modern-calendar/tsconfig.json
View File

@ -1,4 +1,5 @@
{
"extends": "./node_modules/@microsoft/rush-stack-compiler-3.3/includes/tsconfig-web.json",
"compilerOptions": {
"target": "es5",
"forceConsistentCasingInFileNames": true,
@ -8,8 +9,11 @@
"declaration": true,
"sourceMap": true,
"experimentalDecorators": true,
"inlineSources": false,
"skipLibCheck": true,
"outDir": "lib",
"strictNullChecks": false,
"noUnusedLocals": false,
"typeRoots": [
"./node_modules/@types",
"./node_modules/@microsoft"
@ -25,7 +29,8 @@
]
},
"include": [
"src/**/*.ts"
"src/**/*.ts",
"src/**/*.tsx"
],
"exclude": [
"node_modules",

1
samples/js-msgraph-thumbnail/assets/sample.json Normal file
View File

@ -0,0 +1 @@
{"name":"pnp-sp-dev-spfx-web-parts-js-msgraph-thumbnail","version":null,"source":"pnp","title":"Thumbnail/preview of pages and files","shortDescription":"A web part showcasing how to call the Microsoft Graph Thumbnails API to generate a preview image for files and pages in SharePoint. The sample illustrates how to craft the preview URL both from a search result as well as from a SharePoint item object.","longDescription":["A web part showcasing how to call the Microsoft Graph Thumbnails API to generate a preview image for files and pages in SharePoint. The sample illustrates how to craft the preview URL both from a search result as well as from a SharePoint item object."],"products":["SharePoint","Office"],"categories":[""],"metadata":[{"key":"CLIENT-SIDE-DEV","value":"React"},{"key":"SPFX-VERSION","value":"1.10.0"}],"thumbnails":[{"type":"image","order":100,"url":"https://github.com/pnp/sp-dev-fx-webparts/raw/master/samples/js-msgraph-thumbnail/preview.gif","alt":"Thumbnail/preview of pages and files","slides":null}],"authors":[{"gitHubAccount":"wobba","company":"","pictureUrl":"https://github.com/wobba.png"}],"references":[]}

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

@ -1,4 +1,4 @@
# SPFx My Flows Web Part
# My Flows
## Summary

1
samples/js-myflows/assets/sample.json Normal file
View File

@ -0,0 +1 @@
{"name":"pnp-sp-dev-spfx-web-parts-js-myflows","version":null,"source":"pnp","title":"My Flows Web Part","shortDescription":"Manage current user flows in SharePoint or Teams Tab, this web part use the msflowsdk-1.1.js","longDescription":["Manage current user flows in SharePoint or Teams Tab, this web part use the msflowsdk-1.1.js"],"products":["SharePoint","Office"],"categories":[""],"metadata":[{"key":"CLIENT-SIDE-DEV","value":"Javascript"},{"key":"SPFX-VERSION","value":"1.8.2"}],"thumbnails":[{"type":"image","order":100,"url":"https://github.com/pnp/sp-dev-fx-webparts/raw/master/samples/js-myflows/assets/Screenshot4.png","alt":"My Flows Web Part","slides":null}],"authors":[{"gitHubAccount":"joaojmendes","company":"","pictureUrl":"https://github.com/joaojmendes.png"}],"references":[]}

102
samples/js-powerbi-embedded/README.md
View File

@ -14,54 +14,54 @@ extensions:
- JQuery
createdDate: 1/1/2016 12:00:00 AM
---
# Embed a PowerBI report in a Client-Side Web Part
## Summary
This sample SharePoint Framework client-side web part embedding a PowerBI report using PowerBI Embedded without any server-side code.
![PowerBI Embedded Client-SideWeb Part in the SharePoint Workbench](./assets/screenshot_powerbi_embedded_spfx.png)
## Used SharePoint Framework Version
![drop](https://img.shields.io/badge/drop-drop2-red.svg)
## Solution
Solution|Author(s)
--------|---------
powerbi-embedded|Roland Oldengarm (Provoke Solutions, @rolandoldengarm)
## Version history
Version|Date|Comments
-------|----|--------
1.0|September 13, 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.**
---
## Prerequisites
- Created a Workspace and a Workspace collection in Azure
- PowerBI report saved as PBIX
- PBIX uploaded to the Workspace
- Report Access Token generated
Please refer to [this blog post](http://rolandoldengarm.com/index.php/2016/09/13/part-3-how-to-embed-a-power-bi-report-in-sharepoint-with-the-sharepoint-framework/) for detailed instructions how to do this.
## Minimal Path to Awesome
- clone this repo
- `$ npm i`
- `$ gulp serve`
## Features
The _PowerBI Embedded_ Client-Side Web Part is built on the SharePoint Framework using React and uses [PowerBI Embedded](https://azure.microsoft.com/en-us/services/power-bi-embedded/) to securely display a report.
All authentication and rendering happens client-side, there is no server-side component required.
It uses the [PowerBI Client](https://www.npmjs.com/package/powerbi-client) for rendering the PowerBI report.
<img src="https://telemetry.sharepointpnp.com/sp-dev-fx-webparts/samples/js-powerbi-embedded" />
# Embed a PowerBI Report
## Summary
This sample SharePoint Framework client-side web part embedding a PowerBI report using PowerBI Embedded without any server-side code.
![PowerBI Embedded Client-SideWeb Part in the SharePoint Workbench](./assets/screenshot_powerbi_embedded_spfx.png)
## Used SharePoint Framework Version
![drop](https://img.shields.io/badge/drop-drop2-red.svg)
## Solution
Solution|Author(s)
--------|---------
powerbi-embedded|Roland Oldengarm (Provoke Solutions, @rolandoldengarm)
## Version history
Version|Date|Comments
-------|----|--------
1.0|September 13, 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.**
---
## Prerequisites
- Created a Workspace and a Workspace collection in Azure
- PowerBI report saved as PBIX
- PBIX uploaded to the Workspace
- Report Access Token generated
Please refer to [this blog post](http://rolandoldengarm.com/index.php/2016/09/13/part-3-how-to-embed-a-power-bi-report-in-sharepoint-with-the-sharepoint-framework/) for detailed instructions how to do this.
## Minimal Path to Awesome
- clone this repo
- `$ npm i`
- `$ gulp serve`
## Features
The _PowerBI Embedded_ Client-Side Web Part is built on the SharePoint Framework using React and uses [PowerBI Embedded](https://azure.microsoft.com/en-us/services/power-bi-embedded/) to securely display a report.
All authentication and rendering happens client-side, there is no server-side component required.
It uses the [PowerBI Client](https://www.npmjs.com/package/powerbi-client) for rendering the PowerBI report.
<img src="https://telemetry.sharepointpnp.com/sp-dev-fx-webparts/samples/js-powerbi-embedded" />

1
samples/js-powerbi-embedded/assets/sample.json Normal file
View File

@ -0,0 +1 @@
{"name":"pnp-sp-dev-spfx-web-parts-js-powerbi-embedded","version":null,"source":"pnp","title":"Embed a PowerBI report in a Client-Side Web Part","shortDescription":"This sample SharePoint Framework client-side web part embedding a PowerBI report using PowerBI Embedded without any server-side code.","longDescription":["This sample SharePoint Framework client-side web part embedding a PowerBI report using PowerBI Embedded without any server-side code."],"products":["SharePoint","Office"],"categories":[""],"metadata":[{"key":"CLIENT-SIDE-DEV","value":"Javascript"},{"key":"SPFX-VERSION","value":"drop2"}],"thumbnails":[{"type":"image","order":100,"url":"https://github.com/pnp/sp-dev-fx-webparts/raw/master/samples/js-powerbi-embedded/assets/screenshot_powerbi_embedded_spfx.png","alt":"Embed a PowerBI report in a Client-Side Web Part","slides":null}],"authors":[{"gitHubAccount":"roldengarm","company":"","pictureUrl":"https://github.com/roldengarm.png"}],"references":[]}

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

@ -1,4 +1,4 @@
# JS Property Controls SVG
# 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.
@ -54,4 +54,4 @@ This Web Part illustrates the following concepts on top of the SharePoint Framew
![Screenshot](./assets/js-propertycontrols-svg.png)
<img src="https://telemetry.sharepointpnp.com/sp-dev-fx-webparts/samples/js-propertycontrols-svg" />
<img src="https://telemetry.sharepointpnp.com/sp-dev-fx-webparts/samples/js-propertycontrols-svg" />

1
samples/js-propertycontrols-svg/assets/sample.json Normal file
View File

@ -0,0 +1 @@
{"name":"pnp-sp-dev-spfx-web-parts-js-propertycontrols-svg","version":null,"source":"pnp","title":"JS Property Controls SVG","shortDescription":"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.","longDescription":["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."],"products":["SharePoint","Office"],"categories":[""],"metadata":[{"key":"CLIENT-SIDE-DEV","value":"Javascript"},{"key":"SPFX-VERSION","value":"1.3.4"}],"thumbnails":[{"type":"image","order":100,"url":"https://github.com/pnp/sp-dev-fx-webparts/raw/master/samples/js-propertycontrols-svg/assets/js-propertycontrols-svg.gif","alt":"JS Property Controls SVG","slides":null}],"authors":[{"gitHubAccount":"thechriskent","company":"","pictureUrl":"https://github.com/thechriskent.png"}],"references":[]}

1
samples/js-public-unjoined-teams/assets/sample.json Normal file
View File

@ -0,0 +1 @@
{"name":"pnp-sp-dev-spfx-web-parts-js-public-unjoined-teams","version":null,"source":"pnp","title":"Public teams I\u0027m not a member of","shortDescription":"This web part lists all the public teams the current user is not yet a member of. They can then join any of those teams by clicking the button right next to the team name. This web part can also be added to Teams as a tab (built with the 1.7.1 plusbeta/preview version).","longDescription":["This web part lists all the public teams the current user is not yet a member of. They can then join any of those teams by clicking the button right next to the team name. This web part can also be added to Teams as a tab (built with the 1.7.1 plusbeta/preview version)."],"products":["SharePoint","Office"],"categories":[""],"metadata":[{"key":"CLIENT-SIDE-DEV","value":"Javascript"},{"key":"SPFX-VERSION","value":"1.7.1"}],"thumbnails":[{"type":"image","order":100,"url":"https://github.com/pnp/sp-dev-fx-webparts/raw/master/samples/js-public-unjoined-teams/assets/js-public-unjoined-teams.gif","alt":"Public teams I\u0027m not a member of","slides":null}],"authors":[{"gitHubAccount":"LauraKokkarinen","company":"","pictureUrl":"https://github.com/LauraKokkarinen.png"}],"references":[]}

1
samples/js-skype-status/assets/sample.json Normal file
View File

@ -0,0 +1 @@
{"name":"pnp-sp-dev-spfx-web-parts-js-skype-status","version":null,"source":"pnp","title":"JavaScript Skype Status Web Part","shortDescription":"This sample demonstrates how to use the UCWA JS Sdk for skype in the SharePoint Framework. It shows how to subscribe to status change of the different people of the organization but you can get much more information, checkout the documentation","longDescription":["This sample demonstrates how to use the UCWA JS Sdk for skype in the SharePoint Framework. It shows how to subscribe to status change of the different people of the organization but you can get much more information, checkout the documentation"],"products":["SharePoint","Office"],"categories":[""],"metadata":[{"key":"CLIENT-SIDE-DEV","value":"Javascript"},{"key":"SPFX-VERSION","value":"1.8.0"}],"thumbnails":[{"type":"image","order":100,"url":"https://github.com/pnp/sp-dev-fx-webparts/raw/master/samples/js-skype-status/images/demo.gif","alt":"JavaScript Skype Status Web Part","slides":null}],"authors":[{"gitHubAccount":"baywet","company":"","pictureUrl":"https://github.com/baywet.png"}],"references":[]}

1
samples/js-solution-editions/assets/sample.json Normal file
View File

@ -0,0 +1 @@
{"name":"pnp-sp-dev-spfx-web-parts-js-solution-editions","version":null,"source":"pnp","title":"Handling Multiple Editions of SPFx Solution","shortDescription":"This sample shows possible approach of handling multiple editions (e.g. trial, lite, full) of SharePoint Framework solution.","longDescription":["This sample shows possible approach of handling multiple editions (e.g. trial, lite, full) of SharePoint Framework solution."],"products":["SharePoint","Office"],"categories":[""],"metadata":[{"key":"CLIENT-SIDE-DEV","value":"Javascript"},{"key":"SPFX-VERSION","value":"GA"}],"thumbnails":[{"type":"image","order":100,"url":"https://avatars3.githubusercontent.com/u/17036219?s=460\u0026v=4","alt":"Handling Multiple Editions of SPFx Solution","slides":null}],"authors":[{"gitHubAccount":"AJIXuMuK","company":"","pictureUrl":"https://github.com/AJIXuMuK.png"}],"references":[]}

1
samples/js-theme-manager-2019/assets/sample.json Normal file
View File

@ -0,0 +1 @@
{"name":"pnp-sp-dev-spfx-web-parts-js-theme-manager-2019","version":null,"source":"pnp","title":"Modern Experience Theme Manager 2019","shortDescription":"This sample web part provides a user interface for applying a Modern Experience theme in SharePoint 2019 on-premises.","longDescription":["This sample web part provides a user interface for applying a Modern Experience theme in SharePoint 2019 on-premises."],"products":["SharePoint","Office"],"categories":[""],"metadata":[{"key":"CLIENT-SIDE-DEV","value":"Javascript"},{"key":"SPFX-VERSION","value":"1.8.2"}],"thumbnails":[{"type":"image","order":100,"url":"https://github.com/pnp/sp-dev-fx-webparts/raw/master/samples/js-theme-manager-2019/assets/apply-a-theme.png","alt":"Modern Experience Theme Manager 2019","slides":null}],"authors":[{"gitHubAccount":"PopWarner","company":"","pictureUrl":"https://github.com/PopWarner.png"},{"gitHubAccount":"bcameron1231","company":"","pictureUrl":"https://github.com/bcameron1231.png"},{"gitHubAccount":null,"company":"","pictureUrl":"https://github.com/.png"},{"gitHubAccount":"skaggej","company":"","pictureUrl":"https://github.com/skaggej.png"}],"references":[]}

1
samples/js-theme-manager/assets/sample.json Normal file
View File

@ -0,0 +1 @@
{"name":"pnp-sp-dev-spfx-web-parts-js-theme-manager","version":null,"source":"pnp","title":"Modern Experience Theme Manager","shortDescription":"This sample web part provides a user interface for creating, updating, deleting and applying a Modern Experience SharePoint theme in SharePoint Online.","longDescription":["This sample web part provides a user interface for creating, updating, deleting and applying a Modern Experience SharePoint theme in SharePoint Online."],"products":["SharePoint","Office"],"categories":[""],"metadata":[{"key":"CLIENT-SIDE-DEV","value":"Javascript"},{"key":"SPFX-VERSION","value":"1.10.0"}],"thumbnails":[{"type":"image","order":100,"url":"https://github.com/pnp/sp-dev-fx-webparts/raw/master/samples/js-theme-manager/assets/create-a-theme.png","alt":"Modern Experience Theme Manager","slides":null}],"authors":[{"gitHubAccount":"PopWarner","company":"","pictureUrl":"https://github.com/PopWarner.png"},{"gitHubAccount":"bcameron1231","company":"","pictureUrl":"https://github.com/bcameron1231.png"},{"gitHubAccount":"hugoabernier","company":"","pictureUrl":"https://github.com/hugoabernier.png"}],"references":[]}

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

@ -26,7 +26,7 @@ Note: This approach will not "pollute" your solution with additional resources o
## Used SharePoint Framework Version
![1.10.0](https://img.shields.io/badge/drop-1.10.0-green.svg)
![1.11.0](https://img.shields.io/badge/drop-1.11.0-green.svg)
## Applies to

1
samples/js-workbench-customizer/assets/sample.json Normal file
View File

@ -0,0 +1 @@
{"name":"pnp-sp-dev-spfx-web-parts-js-workbench-customizer","version":null,"source":"pnp","title":"Workbench customizer","shortDescription":"This sample shows how the Workbench page can be customized to display in a way that better mimics a modern SharePoint page.","longDescription":["This sample shows how the Workbench page can be customized to display in a way that better mimics a modern SharePoint page."],"products":["SharePoint","Office"],"categories":[""],"metadata":[{"key":"CLIENT-SIDE-DEV","value":"Javascript"},{"key":"SPFX-VERSION","value":"1.11.0"}],"thumbnails":[{"type":"image","order":100,"url":"https://github.com/pnp/sp-dev-fx-webparts/raw/master/samples/js-workbench-customizer/assets/Preview.png","alt":"Workbench customizer","slides":null}],"authors":[{"gitHubAccount":"joelfmrodrigues","company":"","pictureUrl":"https://github.com/joelfmrodrigues.png"}],"references":[]}

9
samples/js-workbench-customizer/config/package-solution.json
View File

@ -5,7 +5,14 @@
"id": "5d6f4a5a-9d2b-4a93-a283-16b8f5ea75d6",
"version": "1.5.0.0",
"includeClientSideAssets": true,
"skipFeatureDeployment": true
"skipFeatureDeployment": true,
"developer": {
"name": "Contoso",
"privacyUrl": "https://contoso.com/privacy",
"termsOfUseUrl": "https://contoso.com/terms-of-use",
"websiteUrl": "https://contoso.com/my-app",
"mpnId": "m365pnp"
}
},
"paths": {
"zippedPackage": "solution/workbench-customizer.sppkg"

2
samples/js-workbench-customizer/package-lock.json generated
View File

@ -1,6 +1,6 @@
{
"name": "workbench-customizer",
"version": "1.4.0",
"version": "1.5.0",
"lockfileVersion": 1,
"requires": true,
"dependencies": {

338
samples/js-workbench-customizer/upgrade-report.md
View File

@ -1,338 +0,0 @@
# Upgrade project C:\Users\joelf\dev\GitHub\sp-dev-fx-webparts\samples\js-workbench-customizer to v1.10.0
Date: 1/21/2020
## Findings
Following is the list of steps required to upgrade your project to SharePoint Framework version 1.10.0. [Summary](#Summary) of the modifications is included at the end of the report.
### FN001001 @microsoft/sp-core-library | Required
Upgrade SharePoint Framework dependency package @microsoft/sp-core-library
Execute the following command:
```sh
pnpm i -E @microsoft/sp-core-library@1.10.0
```
File: [./package.json](./package.json)
### FN001002 @microsoft/sp-lodash-subset | Required
Upgrade SharePoint Framework dependency package @microsoft/sp-lodash-subset
Execute the following command:
```sh
pnpm i -E @microsoft/sp-lodash-subset@1.10.0
```
File: [./package.json](./package.json)
### FN001003 @microsoft/sp-office-ui-fabric-core | Required
Upgrade SharePoint Framework dependency package @microsoft/sp-office-ui-fabric-core
Execute the following command:
```sh
pnpm i -E @microsoft/sp-office-ui-fabric-core@1.10.0
```
File: [./package.json](./package.json)
### FN001004 @microsoft/sp-webpart-base | Required
Upgrade SharePoint Framework dependency package @microsoft/sp-webpart-base
Execute the following command:
```sh
pnpm i -E @microsoft/sp-webpart-base@1.10.0
```
File: [./package.json](./package.json)
### FN001021 @microsoft/sp-property-pane | Required
Install SharePoint Framework dependency package @microsoft/sp-property-pane
Execute the following command:
```sh
pnpm i -E @microsoft/sp-property-pane@1.10.0
```
File: [./package.json](./package.json)
### FN002001 @microsoft/sp-build-web | Required
Upgrade SharePoint Framework dev dependency package @microsoft/sp-build-web
Execute the following command:
```sh
pnpm i -DE @microsoft/sp-build-web@1.10.0
```
File: [./package.json](./package.json)
### FN002002 @microsoft/sp-module-interfaces | Required
Upgrade SharePoint Framework dev dependency package @microsoft/sp-module-interfaces
Execute the following command:
```sh
pnpm i -DE @microsoft/sp-module-interfaces@1.10.0
```
File: [./package.json](./package.json)
### FN002003 @microsoft/sp-webpart-workbench | Required
Upgrade SharePoint Framework dev dependency package @microsoft/sp-webpart-workbench
Execute the following command:
```sh
pnpm i -DE @microsoft/sp-webpart-workbench@1.10.0
```
File: [./package.json](./package.json)
### FN002009 @microsoft/sp-tslint-rules | Required
Upgrade SharePoint Framework dev dependency package @microsoft/sp-tslint-rules
Execute the following command:
```sh
pnpm i -DE @microsoft/sp-tslint-rules@1.10.0
```
File: [./package.json](./package.json)
### FN002012 @microsoft/rush-stack-compiler-3.3 | Required
Install SharePoint Framework dev dependency package @microsoft/rush-stack-compiler-3.3
Execute the following command:
```sh
pnpm i -DE @microsoft/rush-stack-compiler-3.3@0.3.5
```
File: [./package.json](./package.json)
### FN010001 .yo-rc.json version | Recommended
Update version in .yo-rc.json
In file [./.yo-rc.json](./.yo-rc.json) update the code as follows:
```json
{
"@microsoft/generator-sharepoint": {
"version": "1.10.0"
}
}
```
File: [./.yo-rc.json](./.yo-rc.json)
### FN012017 tsconfig.json extends property | Required
Update tsconfig.json extends property
In file [./tsconfig.json](./tsconfig.json) update the code as follows:
```json
{
"extends": "./node_modules/@microsoft/rush-stack-compiler-3.3/includes/tsconfig-web.json"
}
```
File: [./tsconfig.json](./tsconfig.json)
### FN016004 Property pane property import change to @microsoft/sp-property-pane | Required
Refactor the code to import property pane property from the @microsoft/sp-property-pane npm package instead of the @microsoft/sp-webpart-base package
In file [src\webparts\workbenchCustomizer\WorkbenchCustomizerWebPart.ts](src\webparts\workbenchCustomizer\WorkbenchCustomizerWebPart.ts) update the code as follows:
```ts
import { BaseClientSideWebPart } from "@microsoft/sp-webpart-base";
import { IPropertyPaneConfiguration, PropertyPaneToggle } from "@microsoft/sp-property-pane";
```
File: [src\webparts\workbenchCustomizer\WorkbenchCustomizerWebPart.ts:2:1](src\webparts\workbenchCustomizer\WorkbenchCustomizerWebPart.ts)
### FN021001 main | Required
Add package.json property
In file [./package.json](./package.json) update the code as follows:
```json
{
"main": "lib/index.js"
}
```
File: [./package.json](./package.json)
### FN011011 Web part manifest supportedHosts | Required
Update the supportedHosts property in the manifest
In file [src\webparts\workbenchCustomizer\WorkbenchCustomizerWebPart.manifest.json](src\webparts\workbenchCustomizer\WorkbenchCustomizerWebPart.manifest.json) update the code as follows:
```json
{
"supportedHosts": ["SharePointWebPart"]
}
```
File: [src\webparts\workbenchCustomizer\WorkbenchCustomizerWebPart.manifest.json](src\webparts\workbenchCustomizer\WorkbenchCustomizerWebPart.manifest.json)
### FN012014 tsconfig.json compiler options inlineSources | Required
Update tsconfig.json inlineSources value
In file [./tsconfig.json](./tsconfig.json) update the code as follows:
```json
{
"compilerOptions": {
"inlineSources": false
}
}
```
File: [./tsconfig.json](./tsconfig.json)
### FN012015 tsconfig.json compiler options strictNullChecks | Required
Update tsconfig.json strictNullChecks value
In file [./tsconfig.json](./tsconfig.json) update the code as follows:
```json
{
"compilerOptions": {
"strictNullChecks": false
}
}
```
File: [./tsconfig.json](./tsconfig.json)
### FN012016 tsconfig.json compiler options noUnusedLocals | Required
Update tsconfig.json noUnusedLocals value
In file [./tsconfig.json](./tsconfig.json) update the code as follows:
```json
{
"compilerOptions": {
"noUnusedLocals": false
}
}
```
File: [./tsconfig.json](./tsconfig.json)
## Summary
### Execute script
```sh
pnpm i -E @microsoft/sp-core-library@1.10.0 @microsoft/sp-lodash-subset@1.10.0 @microsoft/sp-office-ui-fabric-core@1.10.0 @microsoft/sp-webpart-base@1.10.0 @microsoft/sp-property-pane@1.10.0
pnpm i -DE @microsoft/sp-build-web@1.10.0 @microsoft/sp-module-interfaces@1.10.0 @microsoft/sp-webpart-workbench@1.10.0 @microsoft/sp-tslint-rules@1.10.0 @microsoft/rush-stack-compiler-3.3@0.3.5
```
### Modify files
#### [./.yo-rc.json](./.yo-rc.json)
Update version in .yo-rc.json:
```json
{
"@microsoft/generator-sharepoint": {
"version": "1.10.0"
}
}
```
#### [./tsconfig.json](./tsconfig.json)
Update tsconfig.json extends property:
```json
{
"extends": "./node_modules/@microsoft/rush-stack-compiler-3.3/includes/tsconfig-web.json"
}
```
Update tsconfig.json inlineSources value:
```json
{
"compilerOptions": {
"inlineSources": false
}
}
```
Update tsconfig.json strictNullChecks value:
```json
{
"compilerOptions": {
"strictNullChecks": false
}
}
```
Update tsconfig.json noUnusedLocals value:
```json
{
"compilerOptions": {
"noUnusedLocals": false
}
}
```
#### [src\webparts\workbenchCustomizer\WorkbenchCustomizerWebPart.ts](src\webparts\workbenchCustomizer\WorkbenchCustomizerWebPart.ts)
Refactor the code to import property pane property from the @microsoft/sp-property-pane npm package instead of the @microsoft/sp-webpart-base package:
```ts
import { BaseClientSideWebPart } from "@microsoft/sp-webpart-base";
import { IPropertyPaneConfiguration, PropertyPaneToggle } from "@microsoft/sp-property-pane";
```
#### [./package.json](./package.json)
Add package.json property:
```json
{
"main": "lib/index.js"
}
```
#### [src\webparts\workbenchCustomizer\WorkbenchCustomizerWebPart.manifest.json](src\webparts\workbenchCustomizer\WorkbenchCustomizerWebPart.manifest.json)
Update the supportedHosts property in the manifest:
```json
{
"supportedHosts": ["SharePointWebPart"]
}
```

2
samples/knockout-dependent-properties/README.md
View File

@ -13,7 +13,7 @@ extensions:
- Knockout
createdDate: 1/1/2016 12:00:00 AM
---
# Sample Web Part implementing dependent properties in Property Pane
# Dependent Property Pane Properties
## Summary
Sample Web Part illustrating

1
samples/knockout-dependent-properties/assets/sample.json Normal file
View File

@ -0,0 +1 @@
{"name":"pnp-sp-dev-spfx-web-parts-knockout-dependent-properties","version":null,"source":"pnp","title":"Knockout Dependent Properties","shortDescription":"Sample Web Part illustrating...","longDescription":["Sample Web Part illustrating..."],"products":["SharePoint","Office"],"categories":[""],"metadata":[{"key":"CLIENT-SIDE-DEV","value":"Knockout"},{"key":"SPFX-VERSION","value":"GA"}],"thumbnails":[{"type":"image","order":100,"url":"https://github.com/pnp/sp-dev-fx-webparts/raw/master/samples/knockout-dependent-properties/assets/dep-props.png","alt":"Knockout Dependent Properties","slides":null}],"authors":[{"gitHubAccount":"AJIXuMuK","company":"","pictureUrl":"https://github.com/AJIXuMuK.png"}],"references":[]}

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

@ -13,7 +13,7 @@ extensions:
- Knockout
createdDate: 3/1/2017 12:00:00 AM
---
# Sample showing the use of @pnp/sp library with Knockoutjs
# Using @pnp/sp with Knockoutjs
## Summary
@ -62,4 +62,4 @@ Version|Date|Comments
Demonstrates integration of @pnp/sp js with the SharePoint Framework GA release. Also shows the use of mock data in the local workbench.
<img src="https://telemetry.sharepointpnp.com/sp-dev-fx-webparts/samples/knockout-sp-pnp-js" />
<img src="https://telemetry.sharepointpnp.com/sp-dev-fx-webparts/samples/knockout-sp-pnp-js" />

1
samples/knockout-sp-pnp-js/assets/sample.json Normal file
View File

@ -0,0 +1 @@
{"name":"pnp-sp-dev-spfx-web-parts-knockout-sp-pnp-js","version":null,"source":"pnp","title":"Sample showing the use of @pnp/sp library with Knockoutjs","shortDescription":"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.","longDescription":["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."],"products":["SharePoint","Office"],"categories":[""],"metadata":[{"key":"CLIENT-SIDE-DEV","value":"Knockout"},{"key":"SPFX-VERSION","value":"1.7.0"}],"thumbnails":[{"type":"image","order":100,"url":"https://github.com/pnp/sp-dev-fx-webparts/raw/master/samples/knockout-sp-pnp-js/assets/screenshot.png","alt":"Sample showing the use of @pnp/sp library with Knockoutjs","slides":null}],"authors":[{"gitHubAccount":"patrick-rodgers","company":"","pictureUrl":"https://github.com/patrick-rodgers.png"}],"references":[]}

12
samples/knockout-sp-pnp-js/package-lock.json generated
View File

@ -6342,12 +6342,6 @@
"dev": true,
"optional": true
},
"ini": {
"version": "1.3.5",
"bundled": true,
"dev": true,
"optional": true
},
"is-fullwidth-code-point": {
"version": "1.0.0",
"bundled": true,
@ -8083,9 +8077,9 @@
"dev": true
},
"ini": {
"version": "1.3.5",
"resolved": "https://registry.npmjs.org/ini/-/ini-1.3.5.tgz",
"integrity": "sha512-RZY5huIKCMRWDUqZlEi72f/lmXKMvuszcMBduliQ3nnWbx9X/ZBQO7DijMEYS9EhHBb2qacRUMtC7svLwe0lcw==",
"version": "1.3.8",
"resolved": "https://registry.npmjs.org/ini/-/ini-1.3.8.tgz",
"integrity": "sha512-JV/yugV2uzW5iMRSiZAyDtQd+nxtUnjeLt0acNdw98kKLrvuRVyB80tsREOE7yvGVgalhZ6RNXCmEHkUKBKxew==",
"dev": true
},
"inpath": {

2
samples/knockout-taxonomy/README.md
View File

@ -13,7 +13,7 @@ extensions:
- knockout
createdDate: 1/1/2016 12:00:00 AM
---
# Taxonomy Web Part
# Taxonomy
## Summary
Sample Web Part illustrating

1
samples/knockout-taxonomy/assets/sample.json Normal file
View File

@ -0,0 +1 @@
{"name":"pnp-sp-dev-spfx-web-parts-knockout-taxonomy","version":null,"source":"pnp","title":"Taxonomy Web Part","shortDescription":"Sample Web Part illustrating Reading taxonomy term stores\u0027 hierarchy from SharePoint, Loading JavaScript Object Model scripts, creating Knockout components","longDescription":["Sample Web Part illustrating Reading taxonomy term stores\u0027 hierarchy from SharePoint, Loading JavaScript Object Model scripts, creating Knockout components"],"products":["SharePoint","Office"],"categories":[""],"metadata":[{"key":"CLIENT-SIDE-DEV","value":"Knockout"},{"key":"SPFX-VERSION","value":"GA"}],"thumbnails":[{"type":"image","order":100,"url":"https://github.com/pnp/sp-dev-fx-webparts/raw/master/samples/knockout-taxonomy/assets/Taxonomy.png","alt":"Taxonomy Web Part","slides":null}],"authors":[{"gitHubAccount":"AJIXuMuK","company":"","pictureUrl":"https://github.com/AJIXuMuK.png"}],"references":[]}

8
samples/pnp-controls/.yo-rc.json
View File

@ -1,8 +1,12 @@
{
"@microsoft/generator-sharepoint": {
"version": "1.2.0",
"version": "1.11.0",
"libraryName": "component-test",
"libraryId": "7d4d5b98-cea3-4361-8e3d-5143d5c86334",
"environment": "spo"
"environment": "spo",
"isDomainIsolated": false,
"isCreatingSolution": true,
"packageManager": "npm",
"componentType": "webpart"
}
}

28
samples/pnp-controls/README.md
View File

@ -24,16 +24,25 @@ This is a sample project that contains a web part which makes use of the PnP SPF
![Web part outcome](./assets/webpart-outcome.gif)
## Used SharePoint Framework Version
![drop](https://img.shields.io/badge/drop-1.4.1-green.svg)
## Compatibility
![SPFx 1.11](https://img.shields.io/badge/spfx-1.11.0-green.svg)
![Node.js LTS 10.x](https://img.shields.io/badge/Node.js-LTS%2010.x-green.svg)
![SharePoint Online](https://img.shields.io/badge/SharePoint-Online-red.svg)
![Teams Incompatible](https://img.shields.io/badge/Teams-Incompatible-lightgrey.svg)
![Workbench Local (Partially) | Hosted](https://img.shields.io/badge/Workbench-Local%20(Partial)%20%7C%20Hosted-yellow.svg)
## Which PnP SPFx controls are being used in this sample?
The sample makes use of the following controls:
- PropertyFieldListPicker
- PropertyFieldTermPicker
- Placeholder
- ListView (which also uses the FileTypeIcon control)
- `PropertyFieldListPicker`
- `PropertyFieldTermPicker`
- `Placeholder`
- `ListView` (which also uses the `FileTypeIcon` control)
## Applies to
@ -44,15 +53,18 @@ The sample makes use of the following controls:
Solution|Author(s)
--------|---------
pnp-controls|Elio Struyf (MVP, U2U, [@eliostruyf](https://twitter.com/eliostruyf))
pnp-controls|Swaminathan Sriram ([@SwaminathanSri3](https://twitter.com/SwaminathanSri3))
## Version history
Version|Date|Comments
-------|----|--------
0.0.1|September 20, 2017|Initial release
0.0.2|March 03, 2018|Update to 1.4.1
1.0.1|September 20, 2017|Initial release
1.0.2|March 03, 2018|Update to 1.4.1
1.0.3|December 16, 2020|Update to 1.11.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.**
---

1
samples/pnp-controls/assets/sample.json Normal file
View File

@ -0,0 +1 @@
{"name":"pnp-sp-dev-spfx-web-parts-pnp-controls","version":null,"source":"pnp","title":"SharePoint Framework PnP Controls Sample","shortDescription":"This is a sample project that contains a web part which makes use of the PnP SPFx Controls","longDescription":["This is a sample project that contains a web part which makes use of the PnP SPFx Controls"],"products":["SharePoint","Office"],"categories":[""],"metadata":[{"key":"CLIENT-SIDE-DEV","value":"React"},{"key":"SPFX-VERSION","value":"1.11.0"}],"thumbnails":[{"type":"image","order":100,"url":"https://github.com/pnp/sp-dev-fx-webparts/raw/master/samples/pnp-controls/assets/webpart-outcome.gif","alt":"SharePoint Framework PnP Controls Sample","slides":null}],"authors":[{"gitHubAccount":"estruyf","company":"","pictureUrl":"https://github.com/estruyf.png"},{"gitHubAccount":"Swaminathan-Sriram","company":"","pictureUrl":"https://github.com/Swaminathan-Sriram.png"}],"references":[]}

2
samples/pnp-controls/config/config.json
View File

@ -1,5 +1,5 @@
{
"$schema": "https://dev.office.com/json-schemas/spfx-build/config.2.0.schema.json",
"$schema": "https://developer.microsoft.com/json-schemas/spfx-build/config.2.0.schema.json",
"version": "2.0",
"bundles": {
"pnp-controls-web-part": {

2
samples/pnp-controls/config/copy-assets.json
View File

@ -1,4 +1,4 @@
{
"$schema": "https://dev.office.com/json-schemas/spfx-build/copy-assets.schema.json",
"$schema": "https://developer.microsoft.com/json-schemas/spfx-build/copy-assets.schema.json",
"deployCdnPath": "temp/deploy"
}

2
samples/pnp-controls/config/deploy-azure-storage.json
View File

@ -1,5 +1,5 @@
{
"$schema": "https://dev.office.com/json-schemas/spfx-build/deploy-azure-storage.schema.json",
"$schema": "https://developer.microsoft.com/json-schemas/spfx-build/deploy-azure-storage.schema.json",
"workingDir": "./temp/deploy/",
"account": "<!-- STORAGE ACCOUNT NAME -->",
"container": "component-test",

33
samples/pnp-controls/config/package-solution.json
View File

@ -1,12 +1,21 @@
{
"$schema": "https://dev.office.com/json-schemas/spfx-build/package-solution.schema.json",
"solution": {
"name": "component-test-client-side-solution",
"id": "7d4d5b98-cea3-4361-8e3d-5143d5c86334",
"version": "1.0.0.0",
"skipFeatureDeployment": false
},
"paths": {
"zippedPackage": "solution/component-test.sppkg"
}
}
{
"$schema": "https://developer.microsoft.com/json-schemas/spfx-build/package-solution.schema.json",
"solution": {
"name": "component-test-client-side-solution",
"id": "7d4d5b98-cea3-4361-8e3d-5143d5c86334",
"version": "1.0.3.0",
"includeClientSideAssets": true,
"skipFeatureDeployment": false,
"isDomainIsolated": false,
"developer": {
"name": "",
"privacyUrl": "",
"termsOfUseUrl": "",
"websiteUrl": "",
"mpnId": "m365pnp"
}
},
"paths": {
"zippedPackage": "solution/component-test.sppkg"
}
}

2
samples/pnp-controls/config/serve.json
View File

@ -1,5 +1,5 @@
{
"$schema": "https://dev.office.com/json-schemas/core-build/serve.schema.json",
"$schema": "https://developer.microsoft.com/json-schemas/core-build/serve.schema.json",
"port": 4321,
"initialPage": "https://localhost:5432/workbench",
"https": true,

45
samples/pnp-controls/config/tslint.json
View File

@ -1,45 +0,0 @@
{
"$schema": "https://dev.office.com/json-schemas/core-build/tslint.schema.json",
// Display errors as warnings
"displayAsWarning": true,
// The TSLint task may have been configured with several custom lint rules
// before this config file is read (for example lint rules from the tslint-microsoft-contrib
// project). If true, this flag will deactivate any of these rules.
"removeExistingRules": true,
// When true, the TSLint task is configured with some default TSLint "rules.":
"useDefaultConfigAsBase": false,
// Since removeExistingRules=true and useDefaultConfigAsBase=false, there will be no lint rules
// which are active, other than the list of rules below.
"lintConfig": {
// Opt-in to Lint rules which help to eliminate bugs in JavaScript
"rules": {
"class-name": false,
"export-name": false,
"forin": false,
"label-position": false,
"member-access": true,
"no-arg": false,
"no-console": false,
"no-construct": false,
"no-duplicate-case": true,
"no-duplicate-variable": true,
"no-eval": false,
"no-function-expression": true,
"no-internal-module": true,
"no-shadowed-variable": true,
"no-switch-case-fall-through": true,
"no-unnecessary-semicolons": true,
"no-unused-expression": true,
"no-use-before-declare": true,
"no-with-statement": true,
"semicolon": true,
"trailing-comma": false,
"typedef": false,
"typedef-whitespace": false,
"use-named-parameter": true,
"valid-typeof": true,
"variable-name": false,
"whitespace": false
}
}
}

2
samples/pnp-controls/config/write-manifests.json
View File

@ -1,4 +1,4 @@
{
"$schema": "https://dev.office.com/json-schemas/spfx-build/write-manifests.schema.json",
"$schema": "https://developer.microsoft.com/json-schemas/spfx-build/write-manifests.schema.json",
"cdnBasePath": "<!-- PATH TO CDN -->"
}

2
samples/pnp-controls/gulpfile.js
View File

@ -2,5 +2,5 @@
const gulp = require('gulp');
const build = require('@microsoft/sp-build-web');
build.addSuppression(`Warning - [sass] The local CSS class 'ms-Grid' is not camelCase and will not be type-safe.`);
build.initialize(gulp);

17804
samples/pnp-controls/package-lock.json generated
View File

File diff suppressed because it is too large Load Diff

45
samples/pnp-controls/package.json
View File

@ -1,7 +1,8 @@
{
"name": "component-test",
"version": "0.0.2",
"version": "1.0.3",
"private": true,
"main": "lib/index.js",
"engines": {
"node": ">=0.10.0"
},
@ -11,26 +12,32 @@
"test": "gulp test"
},
"dependencies": {
"@microsoft/sp-core-library": "^1.4.1",
"@microsoft/sp-webpart-base": "^1.4.1",
"@pnp/spfx-controls-react": "^1.2.2",
"@pnp/spfx-property-controls": "^1.4.1",
"@types/react": "15.0.38",
"@types/react-addons-shallow-compare": "0.14.17",
"@types/react-addons-test-utils": "0.14.15",
"@types/react-addons-update": "0.14.14",
"@types/react-dom": "0.14.18",
"@types/webpack-env": ">=1.12.1 <1.14.0",
"@microsoft/sp-core-library": "1.11.0",
"@microsoft/sp-property-pane": "1.11.0",
"@microsoft/sp-webpart-base": "1.11.0",
"@pnp/spfx-controls-react": "2.3.0",
"@pnp/spfx-property-controls": "2.2.0",
"@types/react": "16.8.8",
"moment": "2.18.1",
"react": "15.4.2",
"react-dom": "15.4.2"
"natives": "^1.1.6",
"office-ui-fabric-react": "6.214.0",
"react": "16.8.5",
"react-dom": "16.8.5"
},
"devDependencies": {
"@microsoft/sp-build-web": "^1.4.1",
"@microsoft/sp-module-interfaces": "^1.4.1",
"@microsoft/sp-webpart-workbench": "^1.4.1",
"@types/chai": ">=3.4.34 <3.6.0",
"@types/mocha": ">=2.2.33 <2.6.0",
"gulp": "~3.9.1"
"@microsoft/rush-stack-compiler-3.3": "0.3.5",
"@microsoft/sp-build-web": "1.11.0",
"@microsoft/sp-module-interfaces": "1.11.0",
"@microsoft/sp-tslint-rules": "1.11.0",
"@microsoft/sp-webpart-workbench": "1.11.0",
"@types/chai": "3.4.34",
"@types/es6-promise": "0.0.33",
"@types/mocha": "2.2.38",
"@types/react": "16.8.8",
"@types/react-dom": "16.8.3",
"@types/webpack-env": "1.13.1",
"ajv": "5.2.2",
"gulp": "~3.9.1",
"tslint-microsoft-contrib": "5.0.0"
}
}

0
samples/react-office-add-in-save-email-to-sharepoint/src/index.ts → samples/pnp-controls/src/index.ts
View File

4
samples/pnp-controls/src/webparts/pnpControls/IPnPControlsWebPartProps.ts
View File

@ -1,7 +1,7 @@
import { ICheckedTerms } from "@pnp/spfx-property-controls/lib/PropertyFieldTermPicker";
import { IPickerTerms } from "@pnp/spfx-property-controls/lib/PropertyFieldTermPicker";
export interface IPnPControlsWebPartProps {
lists: string | string[]; // Stores the list ID(s)
terms: ICheckedTerms; // Keeps hold of the selected terms
terms: IPickerTerms; // Keeps hold of the selected terms
description: string;
}

5
samples/pnp-controls/src/webparts/pnpControls/PnPControlsWebPart.manifest.json
View File

@ -1,5 +1,5 @@
{
"$schema": "https://dev.office.com/json-schemas/spfx/client-side-web-part-manifest.schema.json",
"$schema": "https://developer.microsoft.com/json-schemas/spfx/client-side-web-part-manifest.schema.json",
"id": "8909dae1-5562-4f0f-be6c-aa14eac34c66",
"alias": "PnPControlsWebPart",
"componentType": "WebPart",
@ -12,11 +12,12 @@
// Components that allow authors to embed arbitrary script code should set this to true.
// https://support.office.com/en-us/article/Turn-scripting-capabilities-on-or-off-1f2c515f-5d7e-448a-9fd7-835da935584f
"requiresCustomScript": false,
"supportedHosts": ["SharePointWebPart"],
"preconfiguredEntries": [{
"groupId": "8909dae1-5562-4f0f-be6c-aa14eac34c66",
"group": {
"default": "Under Development"
"default": "Other"
},
"title": {
"default": "PnPControls"

5
samples/pnp-controls/src/webparts/pnpControls/PnPControlsWebPart.ts
View File

@ -2,10 +2,9 @@ import * as React from 'react';
import * as ReactDom from 'react-dom';
import { Version } from '@microsoft/sp-core-library';
import {
BaseClientSideWebPart,
IPropertyPaneConfiguration,
PropertyPaneTextField
BaseClientSideWebPart
} from '@microsoft/sp-webpart-base';
import { IPropertyPaneConfiguration, PropertyPaneTextField } from "@microsoft/sp-property-pane";
import * as strings from 'PnPControlsWebPartStrings';
import PnPControls from './components/PnPControls';

4
samples/pnp-controls/src/webparts/pnpControls/components/IPnPControlsProps.ts
View File

@ -1,11 +1,11 @@
import { ICheckedTerms } from '@pnp/spfx-property-controls/lib/PropertyFieldTermPicker';
import { IPickerTerms } from '@pnp/spfx-property-controls/lib/PropertyFieldTermPicker';
import { WebPartContext } from "@microsoft/sp-webpart-base";
export interface IPnPControlsProps {
context: WebPartContext;
description: string;
list: string | string[];
terms: ICheckedTerms;
terms: IPickerTerms;
}
export interface IPnpControlsState {

12
samples/pnp-controls/src/webparts/pnpControls/components/PnPControls.tsx
View File

@ -3,7 +3,7 @@ import * as moment from 'moment';
import { IPnPControlsProps, IPnpControlsState } from './IPnPControlsProps';
import { Spinner, SpinnerSize } from 'office-ui-fabric-react/lib/components/Spinner';
import { Placeholder } from '@pnp/spfx-controls-react/lib/Placeholder';
import { ListView } from '@pnp/spfx-controls-react/lib/ListView';
import { ListView, SelectionMode } from '@pnp/spfx-controls-react/lib/ListView';
import { SPHttpClient } from '@microsoft/sp-http';
import { IViewField } from '@pnp/spfx-controls-react/lib/controls/listView';
@ -148,7 +148,12 @@ export default class PnPControls extends React.Component<IPnPControlsProps, IPnp
) : (
<div>
<p className="ms-font-xl">{this.props.description}</p>
<ListView items={this.state.items} viewFields={this._viewFields} iconFieldName="File.ServerRelativeUrl" />
<ListView items={this.state.items}
viewFields={this._viewFields}
iconFieldName="File.ServerRelativeUrl"
selectionMode={SelectionMode.multiple}
selection={this._getSelection}
/>
</div>
)
)
@ -156,5 +161,8 @@ export default class PnPControls extends React.Component<IPnPControlsProps, IPnp
</div>
);
}
private _getSelection(items: any[]) {
console.log('Selected items:', items);
}
}

BIN
samples/pnp-controls/teams/8909dae1-5562-4f0f-be6c-aa14eac34c66_color.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 1.2 KiB

BIN
samples/pnp-controls/teams/8909dae1-5562-4f0f-be6c-aa14eac34c66_outline.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 383 B

20
samples/pnp-controls/tsconfig.json
View File

@ -1,8 +1,9 @@
{
"extends": "./node_modules/@microsoft/rush-stack-compiler-3.3/includes/tsconfig-web.json",
"compilerOptions": {
"target": "es5",
"forceConsistentCasingInFileNames": true,
"module": "commonjs",
"module": "esnext",
"jsx": "react",
"declaration": true,
"sourceMap": true,
@ -20,6 +21,19 @@
"es5",
"dom",
"es2015.collection"
]
}
],
"inlineSources": false,
"strictNullChecks": false,
"noUnusedLocals": false,
"outDir": "lib",
"moduleResolution": "node"
},
"include": [
"src/**/*.ts",
"src/**/*.tsx"
],
"exclude": [
"node_modules",
"lib"
]
}

29
samples/pnp-controls/tslint.json
View File

@ -1,3 +1,30 @@
{
"rulesDirectory": "./config"
"extends": "@microsoft/sp-tslint-rules/base-tslint.json",
"rules": {
"class-name": false,
"export-name": false,
"forin": false,
"label-position": false,
"member-access": true,
"no-arg": false,
"no-console": false,
"no-construct": false,
"no-duplicate-variable": true,
"no-eval": false,
"no-function-expression": true,
"no-internal-module": true,
"no-shadowed-variable": true,
"no-switch-case-fall-through": true,
"no-unnecessary-semicolons": true,
"no-unused-expression": true,
"no-use-before-declare": true,
"no-with-statement": true,
"semicolon": true,
"trailing-comma": false,
"typedef": false,
"typedef-whitespace": false,
"use-named-parameter": true,
"variable-name": false,
"whitespace": false
}
}

1
samples/react-3rd-party-api/assets/sample.json Normal file
View File

@ -0,0 +1 @@
{"name":"pnp-sp-dev-spfx-web-parts-react-3rd-party-api","version":null,"source":"pnp","title":"Consuming Third Party APIs secured with Azure Active Directory within SharePoint Framework","shortDescription":"This sub folders contains a client-side project that shows how to consume a 3rd party API within SharePoint Framework.","longDescription":["This sub folders contains a client-side project that shows how to consume a 3rd party API within SharePoint Framework."],"products":["SharePoint","Office"],"categories":[""],"metadata":[{"key":"CLIENT-SIDE-DEV","value":"React"},{"key":"SPFX-VERSION","value":"1.4.1"}],"thumbnails":[{"type":"image","order":100,"url":"https://github.com/pnp/sp-dev-fx-webparts/raw/master/samples/react-3rd-party-api/images/react-3rd-party-api-ui-sample.gif","alt":"Consuming Third Party APIs secured with Azure Active Directory within SharePoint Framework","slides":null}],"authors":[{"gitHubAccount":"PaoloPia","company":"","pictureUrl":"https://github.com/PaoloPia.png"}],"references":[]}

Some files were not shown because too many files have changed in this diff Show More