Updated readme and sample.json

This commit is contained in:
Hugo Bernier 2022-01-27 04:50:28 -05:00
parent 9fd10c6df6
commit e885f3dd79
5 changed files with 744293 additions and 715 deletions

View File

@ -35,12 +35,12 @@ Cascading drop-downs in the property pane both using external data.
## Compatibility
![SPFx 1.8.1](https://img.shields.io/badge/SPFx-1.8.1-green.svg)
![Node.js v8](https://img.shields.io/badge/Node.js-v8-green.svg)
![SPFx 1.14.0](https://img.shields.io/badge/SPFx-1.14-green.svg)
![Node.js v14 | v12 | v10](https://img.shields.io/badge/Node.js-v14%20%7C%20v12%20%7C%20v10-green.svg)
![Compatible with SharePoint Online](https://img.shields.io/badge/SharePoint%20Online-Compatible-green.svg)
![Does not work with SharePoint 2019](https://img.shields.io/badge/SharePoint%20Server%202019-Incompatible-red.svg "SharePoint Server 2019 requires SPFx 1.4.1 or lower")
![Does not work with SharePoint 2016 (Feature Pack 2)](https://img.shields.io/badge/SharePoint%20Server%202016%20(Feature%20Pack%202)-Incompatible-red.svg "SharePoint Server 2016 Feature Pack 2 requires SPFx 1.1")
![Local Workbench Compatible](https://img.shields.io/badge/Local%20Workbench-Compatible-green.svg)
![Local Workbench Unsupported](https://img.shields.io/badge/Local%20Workbench-Unsupported-red.svg "Local workbench is no longer available as of SPFx 1.13 and above")
![Hosted Workbench Compatible](https://img.shields.io/badge/Hosted%20Workbench-Compatible-green.svg)
@ -54,19 +54,17 @@ Cascading drop-downs in the property pane both using external data.
Solution|Author(s)
--------|---------
react-custompropertypanecontrols|Waldek Mastykarz (MVP, Rencore, @waldekm)
react-custompropertypanecontrols|[Alex Terentiev](https://github.com/AJIXuMuK) ([@alexaterentiev](https://twitter.com/alexaterentiev))
## Version history
Version|Date|Comments
-------|----|--------
2.0.2|Jan 26, 2022|Upgraded to SPFx 1.14.0-beta.5. This new version contains updated API for `showLoadingIndicator`
2.0.1|May 1, 2017|Updated to SPFx GA
2.0.0|November 22, 2016|Added new sample web part (Dropdown with remote data (without custom controls))
1.0.0|October 17, 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.**
---
## Minimal Path to Awesome
@ -76,11 +74,11 @@ Version|Date|Comments
### Asynchronous drop-down
By default the control uses mock data. If you want to test the control with SharePoint, change the commented sections in the **DropdownWithRemoteDataWebPart.ts** file inside the **loadLists** and **loadItems** functions and deploy the sample web part to your SharePoint developer tenant.
By default the control uses mock data. If you want to test the control with SharePoint, change the commented sections in the `DropdownWithRemoteDataWebPart.ts` file inside the `loadLists` and `loadItems` functions and deploy the sample web part to your SharePoint developer tenant.
### Drop-down with external data without using a custom control
By default the web part uses mock data. If you want to test it with SharePoint, change the commented sections in the **DropdownWithRemoteDataWithoutCustomControlsWebPart.ts** file inside the **loadLists** and **loadItems** methods and deploy the sample web part to your SharePoint tenant.
By default the web part uses mock data. If you want to test it with SharePoint, change the commented sections in the `DropdownWithRemoteDataWithoutCustomControlsWebPart.ts` file inside the `loadLists` and `loadItems` methods and deploy the sample web part to your SharePoint tenant.
## Features
@ -97,4 +95,27 @@ Sample web parts in this solution illustrate the following concepts on top of th
- updating properties of web part property pane controls
- refreshing the web part property pane from the web part
## Help
We do not support samples, but this community is always willing to help, and we want to improve these samples. We use GitHub to track issues, which makes it easy for community members to volunteer their time and help resolve issues.
If you're having issues building the solution, please run [spfx doctor](https://pnp.github.io/cli-microsoft365/cmd/spfx/spfx-doctor/) from within the solution folder to diagnose incompatibility issues with your environment.
You can try looking at [issues related to this sample](https://github.com/pnp/sp-dev-fx-webparts/issues?q=label%3Areact-custompropertypanecontrols) to see if anybody else is having the same issues.
You can also try looking at [discussions related to this sample](https://github.com/pnp/sp-dev-fx-webparts/discussions?discussions_q=label%3Areact-custompropertypanecontrols) and see what the community is saying.
If you encounter any issues while using this sample, [create a new issue](https://github.com/pnp/sp-dev-fx-webparts/issues/new?assignees=&labels=Needs%3A+Triage+%3Amag%3A%2Ctype%3Abug-suspected&template=bug-report.yml&sample=react-custompropertypanecontrols&authors=@AJIXuMuK&title=react-custompropertypanecontrols%20-%20).
For questions regarding this sample, [create a new question](https://github.com/pnp/sp-dev-fx-webparts/issues/new?assignees=&labels=Needs%3A+Triage+%3Amag%3A%2Ctype%3Abug-suspected&template=question.yml&sample=react-custompropertypanecontrols&authors=@AJIXuMuK&title=react-custompropertypanecontrols%20-%20).
Finally, if you have an idea for improvement, [make a suggestion](https://github.com/pnp/sp-dev-fx-webparts/issues/new?assignees=&labels=Needs%3A+Triage+%3Amag%3A%2Ctype%3Abug-suspected&template=suggestion.yml&sample=react-custompropertypanecontrols&authors=@AJIXuMuK&title=react-custompropertypanecontrols%20-%20).
## 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.**
![](https://telemetry.sharepointpnp.com/sp-dev-fx-webparts/samples/react-custompropertypanecontrols)

View File

@ -9,7 +9,7 @@
"Sample custom property pane controls built in React for use with SharePoint Framework client-side web parts."
],
"creationDateTime": "2017-05-01",
"updateDateTime": "2017-05-01",
"updateDateTime": "2026-01-22",
"products": [
"SharePoint",
"Office"
@ -21,7 +21,7 @@
},
{
"key": "SPFX-VERSION",
"value": "drop4"
"value": "1.14.0"
}
],
"thumbnails": [
@ -45,6 +45,12 @@
"pictureUrl": "https://github.com/waldekmastykarz.png",
"name": "Waldek Mastykarz",
"twitter": "waldekm"
},
{
"gitHubAccount": "AJIXuMuK",
"company": "Microsoft",
"pictureUrl": "https://github.com/AJIXuMuK.png",
"name": "Alex Terentiev"
}
],
"references": [

View File

@ -1,704 +0,0 @@
# Upgrade project react-custompropertypanecontrols to v1.13.1
Date: 12/30/2021
## Findings
Following is the list of steps required to upgrade your project to SharePoint Framework version 1.13.1. [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
npm i -SE @microsoft/sp-core-library@1.13.1
```
File: [./package.json:9:5](./package.json)
### FN001002 @microsoft/sp-lodash-subset | Required
Upgrade SharePoint Framework dependency package @microsoft/sp-lodash-subset
Execute the following command:
```sh
npm i -SE @microsoft/sp-lodash-subset@1.13.1
```
File: [./package.json:11:5](./package.json)
### FN001004 @microsoft/sp-webpart-base | Required
Upgrade SharePoint Framework dependency package @microsoft/sp-webpart-base
Execute the following command:
```sh
npm i -SE @microsoft/sp-webpart-base@1.13.1
```
File: [./package.json:13:5](./package.json)
### FN001021 @microsoft/sp-property-pane | Required
Upgrade SharePoint Framework dependency package @microsoft/sp-property-pane
Execute the following command:
```sh
npm i -SE @microsoft/sp-property-pane@1.13.1
```
File: [./package.json:12:5](./package.json)
### FN001027 @microsoft/sp-http | Required
Upgrade SharePoint Framework dependency package @microsoft/sp-http
Execute the following command:
```sh
npm i -SE @microsoft/sp-http@1.13.1
```
File: [./package.json:10:5](./package.json)
### FN002001 @microsoft/sp-build-web | Required
Upgrade SharePoint Framework dev dependency package @microsoft/sp-build-web
Execute the following command:
```sh
npm i -DE @microsoft/sp-build-web@1.13.1
```
File: [./package.json:26:5](./package.json)
### FN002002 @microsoft/sp-module-interfaces | Required
Upgrade SharePoint Framework dev dependency package @microsoft/sp-module-interfaces
Execute the following command:
```sh
npm i -DE @microsoft/sp-module-interfaces@1.13.1
```
File: [./package.json:27:5](./package.json)
### FN002009 @microsoft/sp-tslint-rules | Required
Upgrade SharePoint Framework dev dependency package @microsoft/sp-tslint-rules
Execute the following command:
```sh
npm i -DE @microsoft/sp-tslint-rules@1.13.1
```
File: [./package.json:28:5](./package.json)
### FN006004 package-solution.json developer | Optional
In package-solution.json add developer section
```json
{
"solution": {
"developer": {
"name": "",
"privacyUrl": "",
"termsOfUseUrl": "",
"websiteUrl": "",
"mpnId": "Undefined-1.13.1"
}
}
}
```
File: [./config/package-solution.json:3:3](./config/package-solution.json)
### FN001008 react | Required
Upgrade SharePoint Framework dependency package react
Execute the following command:
```sh
npm i -SE react@16.13.1
```
File: [./package.json:20:5](./package.json)
### FN001009 react-dom | Required
Upgrade SharePoint Framework dependency package react-dom
Execute the following command:
```sh
npm i -SE react-dom@16.13.1
```
File: [./package.json:22:5](./package.json)
### FN001022 office-ui-fabric-react | Required
Upgrade SharePoint Framework dependency package office-ui-fabric-react
Execute the following command:
```sh
npm i -SE office-ui-fabric-react@7.174.1
```
File: [./package.json:19:5](./package.json)
### FN002003 @microsoft/sp-webpart-workbench | Required
Remove SharePoint Framework dev dependency package @microsoft/sp-webpart-workbench
Execute the following command:
```sh
npm un -D @microsoft/sp-webpart-workbench
```
File: [./package.json:29:5](./package.json)
### FN002015 @types/react | Required
Install SharePoint Framework dev dependency package @types/react
Execute the following command:
```sh
npm i -DE @types/react@16.9.51
```
File: [./package.json:24:3](./package.json)
### FN002018 @microsoft/rush-stack-compiler-3.9 | Required
Install SharePoint Framework dev dependency package @microsoft/rush-stack-compiler-3.9
Execute the following command:
```sh
npm i -DE @microsoft/rush-stack-compiler-3.9@0.4.47
```
File: [./package.json:24:3](./package.json)
### FN007002 serve.json initialPage | Required
Update serve.json initialPage URL
```json
{
"initialPage": "https://enter-your-SharePoint-site/_layouts/workbench.aspx"
}
```
File: [./config/serve.json:4:3](./config/serve.json)
### FN007003 serve.json api | Required
From serve.json remove the api property
```json
```
File: [./config/serve.json:6:3](./config/serve.json)
### FN012017 tsconfig.json extends property | Required
Update tsconfig.json extends property
```json
{
"extends": "./node_modules/@microsoft/rush-stack-compiler-3.9/includes/tsconfig-web.json"
}
```
File: [./tsconfig.json:37:3](./tsconfig.json)
### FN015007 config\copy-assets.json | Required
Remove file config\copy-assets.json
Execute the following command:
```sh
rm "config\copy-assets.json"
```
File: [config\copy-assets.json](config\copy-assets.json)
### FN005002 deploy-azure-storage.json workingDir | Required
Update deploy-azure-storage.json workingDir
```json
{
"workingDir": "./release/assets/"
}
```
File: [./config/deploy-azure-storage.json:3:3](./config/deploy-azure-storage.json)
### FN023001 .gitignore 'release' folder | Required
To .gitignore add the 'release' folder
File: [./.gitignore](./.gitignore)
### FN002004 gulp | Required
Upgrade SharePoint Framework dev dependency package gulp
Execute the following command:
```sh
npm i -DE gulp@4.0.2
```
File: [./package.json:34:5](./package.json)
### FN002005 @types/chai | Required
Remove SharePoint Framework dev dependency package @types/chai
Execute the following command:
```sh
npm un -D @types/chai
```
File: [./package.json:30:5](./package.json)
### FN002006 @types/mocha | Required
Remove SharePoint Framework dev dependency package @types/mocha
Execute the following command:
```sh
npm un -D @types/mocha
```
File: [./package.json:31:5](./package.json)
### FN002016 @types/react-dom | Required
Install SharePoint Framework dev dependency package @types/react-dom
Execute the following command:
```sh
npm i -DE @types/react-dom@16.9.8
```
File: [./package.json:24:3](./package.json)
### FN012013 tsconfig.json exclude property | Required
Remove tsconfig.json exclude property
```json
{
"exclude": []
}
```
File: [./tsconfig.json:33:3](./tsconfig.json)
### FN012018 tsconfig.json es2015.promise lib | Required
Add es2015.promise lib in tsconfig.json
```json
{
"compilerOptions": {
"lib": [
"es2015.promise"
]
}
}
```
File: [./tsconfig.json:16:5](./tsconfig.json)
### FN012019 tsconfig.json es6-promise types | Required
Remove es6-promise type in tsconfig.json
```json
{
"compilerOptions": {
"types": [
"es6-promise"
]
}
}
```
File: [./tsconfig.json:26:7](./tsconfig.json)
### FN013002 gulpfile.js serve task | Required
Before 'build.initialize(require('gulp'));' add the serve task
```js
var getTasks = build.rig.getTasks;
build.rig.getTasks = function () {
var result = getTasks.call(build.rig);
result.set('serve', result.get('serve-deprecated'));
return result;
};
```
File: [./gulpfile.js](./gulpfile.js)
### FN015006 .editorconfig | Required
Remove file .editorconfig
Execute the following command:
```sh
rm ".editorconfig"
```
File: [.editorconfig](.editorconfig)
### FN019002 tslint.json extends | Required
Update tslint.json extends property
```json
{
"extends": "./node_modules/@microsoft/sp-tslint-rules/base-tslint.json"
}
```
File: [./tslint.json:2:3](./tslint.json)
### FN021002 engines | Required
Remove package.json property
```json
{
"engines": "undefined"
}
```
File: [./package.json:5:3](./package.json)
### FN001005 @types/react | Required
Remove SharePoint Framework dependency package @types/react
Execute the following command:
```sh
npm un -S @types/react
```
File: [./package.json:16:5](./package.json)
### FN001006 @types/react-dom | Required
Remove SharePoint Framework dependency package @types/react-dom
Execute the following command:
```sh
npm un -S @types/react-dom
```
File: [./package.json:17:5](./package.json)
### FN001007 @types/webpack-env | Required
Remove SharePoint Framework dependency package @types/webpack-env
Execute the following command:
```sh
npm un -S @types/webpack-env
```
File: [./package.json:18:5](./package.json)
### FN001010 @types/es6-promise | Required
Remove SharePoint Framework dependency package @types/es6-promise
Execute the following command:
```sh
npm un -S @types/es6-promise
```
File: [./package.json:15:5](./package.json)
### FN002013 @types/webpack-env | Required
Install SharePoint Framework dev dependency package @types/webpack-env
Execute the following command:
```sh
npm i -DE @types/webpack-env@1.13.1
```
File: [./package.json:24:3](./package.json)
### FN002014 @types/es6-promise | Required
Install SharePoint Framework dev dependency package @types/es6-promise
Execute the following command:
```sh
npm i -DE @types/es6-promise@0.0.33
```
File: [./package.json:24:3](./package.json)
### FN012012 tsconfig.json include property | Required
Add to the tsconfig.json include property
```json
{
"include": [
"src/**/*.tsx"
]
}
```
File: [./tsconfig.json:30:3](./tsconfig.json)
### FN020001 @types/react | Required
Add resolution for package @types/react
```json
{
"resolutions": {
"@types/react": "16.8.8"
}
}
```
File: [./package.json:1:1](./package.json)
### FN021001 main | Required
Add package.json property
```json
{
"main": "lib/index.js"
}
```
File: [./package.json:1:1](./package.json)
### FN017001 Run npm dedupe | Optional
If, after upgrading npm packages, when building the project you have errors similar to: "error TS2345: Argument of type 'SPHttpClientConfiguration' is not assignable to parameter of type 'SPHttpClientConfiguration'", try running 'npm dedupe' to cleanup npm packages.
Execute the following command:
```sh
npm dedupe
```
File: [./package.json](./package.json)
## Summary
### Execute script
```sh
npm un -S @types/react @types/react-dom @types/webpack-env @types/es6-promise
npm un -D @microsoft/sp-webpart-workbench @types/chai @types/mocha
npm i -SE @microsoft/sp-core-library@1.13.1 @microsoft/sp-lodash-subset@1.13.1 @microsoft/sp-webpart-base@1.13.1 @microsoft/sp-property-pane@1.13.1 @microsoft/sp-http@1.13.1 react@16.13.1 react-dom@16.13.1 office-ui-fabric-react@7.174.1
npm i -DE @microsoft/sp-build-web@1.13.1 @microsoft/sp-module-interfaces@1.13.1 @microsoft/sp-tslint-rules@1.13.1 @types/react@16.9.51 @microsoft/rush-stack-compiler-3.9@0.4.47 gulp@4.0.2 @types/react-dom@16.9.8 @types/webpack-env@1.13.1 @types/es6-promise@0.0.33
npm dedupe
rm "config\copy-assets.json"
rm ".editorconfig"
```
### Modify files
#### [./config/package-solution.json](./config/package-solution.json)
In package-solution.json add developer section:
```json
{
"solution": {
"developer": {
"name": "",
"privacyUrl": "",
"termsOfUseUrl": "",
"websiteUrl": "",
"mpnId": "Undefined-1.13.1"
}
}
}
```
#### [./config/serve.json](./config/serve.json)
Update serve.json initialPage URL:
```json
{
"initialPage": "https://enter-your-SharePoint-site/_layouts/workbench.aspx"
}
```
From serve.json remove the api property:
```json
```
#### [./tsconfig.json](./tsconfig.json)
Update tsconfig.json extends property:
```json
{
"extends": "./node_modules/@microsoft/rush-stack-compiler-3.9/includes/tsconfig-web.json"
}
```
Remove tsconfig.json exclude property:
```json
{
"exclude": []
}
```
Add es2015.promise lib in tsconfig.json:
```json
{
"compilerOptions": {
"lib": [
"es2015.promise"
]
}
}
```
Remove es6-promise type in tsconfig.json:
```json
{
"compilerOptions": {
"types": [
"es6-promise"
]
}
}
```
Add to the tsconfig.json include property:
```json
{
"include": [
"src/**/*.tsx"
]
}
```
#### [./config/deploy-azure-storage.json](./config/deploy-azure-storage.json)
Update deploy-azure-storage.json workingDir:
```json
{
"workingDir": "./release/assets/"
}
```
#### [./.gitignore](./.gitignore)
To .gitignore add the 'release' folder:
```text
release
```
#### [./gulpfile.js](./gulpfile.js)
Before 'build.initialize(require('gulp'));' add the serve task:
```js
var getTasks = build.rig.getTasks;
build.rig.getTasks = function () {
var result = getTasks.call(build.rig);
result.set('serve', result.get('serve-deprecated'));
return result;
};
```
#### [./tslint.json](./tslint.json)
Update tslint.json extends property:
```json
{
"extends": "./node_modules/@microsoft/sp-tslint-rules/base-tslint.json"
}
```
#### [./package.json](./package.json)
Remove package.json property:
```json
{
"engines": "undefined"
}
```
Add resolution for package @types/react:
```json
{
"resolutions": {
"@types/react": "16.8.8"
}
}
```
Add package.json property:
```json
{
"main": "lib/index.js"
}
```

View File

@ -0,0 +1,104 @@
{
"bundles": {
"my-approvals-web-part": {
"dependencies": [
{
"componentId": "f9e737b7-f0df-4597-ba8c-3060f82380db",
"componentName": "@microsoft/sp-property-pane",
"componentVersion": "1.13.1",
"isDirectDependency": true
},
{
"componentId": "1c6c9123-7aac-41f3-a376-3caea41ed83f",
"componentName": "@microsoft/sp-loader",
"componentVersion": "1.13.1",
"isDirectDependency": false
},
{
"componentId": "8217e442-8ed3-41fd-957d-b112e841286a",
"componentName": "@ms/sp-telemetry",
"componentVersion": "0.19.42",
"isDirectDependency": false
},
{
"componentId": "e40f8203-b39d-425a-a957-714852e33b79",
"componentName": "@microsoft/sp-dynamic-data",
"componentVersion": "1.13.1",
"isDirectDependency": false
},
{
"componentId": "73e1dc6c-8441-42cc-ad47-4bd3659f8a3a",
"componentName": "@microsoft/sp-lodash-subset",
"componentVersion": "1.13.1",
"isDirectDependency": false
},
{
"componentId": "7263c7d0-1d6a-45ec-8d85-d4d1d234171b",
"componentName": "@microsoft/sp-core-library",
"componentVersion": "1.13.1",
"isDirectDependency": false
},
{
"componentId": "01c4df03-e775-48cb-aa14-171ee5199a15",
"componentName": "tslib",
"componentVersion": "1.10.0",
"isDirectDependency": false
},
{
"componentId": "2e09fb9b-13bb-48f2-859f-97d6fff71176",
"componentName": "@ms/odsp-core-bundle",
"componentVersion": "1.1.192",
"isDirectDependency": false
},
{
"componentId": "78359e4b-07c2-43c6-8d0b-d060b4d577e8",
"componentName": "@microsoft/sp-diagnostics",
"componentVersion": "1.13.1",
"isDirectDependency": false
},
{
"componentId": "1c4541f7-5c31-41aa-9fa8-fbc9dc14c0a8",
"componentName": "@microsoft/sp-page-context",
"componentVersion": "1.13.1",
"isDirectDependency": false
},
{
"componentId": "229b8d08-79f3-438b-8c21-4613fc877abd",
"componentName": "@microsoft/load-themed-styles",
"componentVersion": "0.1.2",
"isDirectDependency": false
},
{
"componentId": "c07208f0-ea3b-4c1a-9965-ac1b825211a6",
"componentName": "@microsoft/sp-http",
"componentVersion": "1.13.1",
"isDirectDependency": false
},
{
"componentId": "0d910c1c-13b9-4e1c-9aa4-b008c5e42d7d",
"componentName": "react",
"componentVersion": "16.13.1",
"isDirectDependency": false
},
{
"componentId": "aa0a46ec-1505-43cd-a44a-93f3a5aa460a",
"componentName": "react-dom",
"componentVersion": "16.13.1",
"isDirectDependency": false
},
{
"componentId": "974a7777-0990-4136-8fa6-95d80114c2e0",
"componentName": "@microsoft/sp-webpart-base",
"componentVersion": "1.13.1",
"isDirectDependency": true
},
{
"componentId": "467dc675-7cc5-4709-8aac-78e3b71bd2f6",
"componentName": "@microsoft/sp-component-base",
"componentVersion": "1.13.1",
"isDirectDependency": false
}
]
}
}
}

File diff suppressed because one or more lines are too long