Merge pull request #2226 from AJIXuMuK/react-pp-dropdown
react-custompropertypanecontrols updates
This commit is contained in:
Hugo Bernier
GitHub
commit
2794a8c868
|
|
@ -1,25 +0,0 @@
|
||||||
# EditorConfig helps developers define and maintain consistent
|
|
||||||
# coding styles between different editors and IDEs
|
|
||||||
# editorconfig.org
|
|
||||||
|
|
||||||
root = true
|
|
||||||
|
|
||||||
|
|
||||||
[*]
|
|
||||||
|
|
||||||
# change these settings to your own preference
|
|
||||||
indent_style = space
|
|
||||||
indent_size = 2
|
|
||||||
|
|
||||||
# we recommend you to keep these unchanged
|
|
||||||
end_of_line = lf
|
|
||||||
charset = utf-8
|
|
||||||
trim_trailing_whitespace = true
|
|
||||||
insert_final_newline = true
|
|
||||||
|
|
||||||
[*.md]
|
|
||||||
trim_trailing_whitespace = false
|
|
||||||
|
|
||||||
[{package,bower}.json]
|
|
||||||
indent_style = space
|
|
||||||
indent_size = 2
|
|
||||||
|
|
@ -7,6 +7,7 @@ npm-debug.log*
|
||||||
node_modules
|
node_modules
|
||||||
|
|
||||||
# Build generated files
|
# Build generated files
|
||||||
|
release
|
||||||
dist
|
dist
|
||||||
lib
|
lib
|
||||||
solution
|
solution
|
||||||
|
|
|
||||||
|
|
@ -1,31 +1,41 @@
|
||||||
{
|
{
|
||||||
// See http://go.microsoft.com/fwlink/?LinkId=733558
|
// See http://go.microsoft.com/fwlink/?LinkId=733558
|
||||||
// for the documentation about the tasks.json format
|
// for the documentation about the tasks.json format
|
||||||
"version": "0.1.0",
|
"version": "2.0.0",
|
||||||
"command": "gulp",
|
"command": "gulp",
|
||||||
"isShellCommand": true,
|
|
||||||
"showOutput": "always",
|
|
||||||
"args": [
|
"args": [
|
||||||
"--no-color"
|
"--no-color"
|
||||||
],
|
],
|
||||||
"tasks": [
|
"tasks": [
|
||||||
{
|
{
|
||||||
"taskName": "bundle",
|
"label": "bundle",
|
||||||
"isBuildCommand": true,
|
"type": "gulp",
|
||||||
|
"task": "--no-color",
|
||||||
"problemMatcher": [
|
"problemMatcher": [
|
||||||
"$tsc"
|
"$tsc"
|
||||||
]
|
],
|
||||||
|
"group": {
|
||||||
|
"_id": "build",
|
||||||
|
"isDefault": false
|
||||||
|
}
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
"taskName": "test",
|
"label": "test",
|
||||||
"isTestCommand": true,
|
"type": "gulp",
|
||||||
|
"task": "--no-color",
|
||||||
"problemMatcher": [
|
"problemMatcher": [
|
||||||
"$tsc"
|
"$tsc"
|
||||||
]
|
],
|
||||||
|
"group": {
|
||||||
|
"_id": "test",
|
||||||
|
"isDefault": false
|
||||||
|
}
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
"taskName": "serve",
|
"label": "serve",
|
||||||
"isWatching": true,
|
"type": "gulp",
|
||||||
|
"task": "--no-color",
|
||||||
|
"isBackground": true,
|
||||||
"problemMatcher": [
|
"problemMatcher": [
|
||||||
"$tsc"
|
"$tsc"
|
||||||
]
|
]
|
||||||
|
|
|
||||||
|
|
@ -35,12 +35,12 @@ Cascading drop-downs in the property pane both using external data.
|
||||||
|
|
||||||
## Compatibility
|
## Compatibility
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
-Incompatible-red.svg "SharePoint Server 2016 Feature Pack 2 requires SPFx 1.1")
|
-Incompatible-red.svg "SharePoint Server 2016 Feature Pack 2 requires SPFx 1.1")
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
@ -53,16 +53,19 @@ Cascading drop-downs in the property pane both using external data.
|
||||||
|
|
||||||
Solution|Author(s)
|
Solution|Author(s)
|
||||||
--------|---------
|
--------|---------
|
||||||
react-custompropertypanecontrols|[Waldek Mastykarz](https://github.com/waldekmastykarz) (MVP, Rencore, @waldekm)
|
react-custompropertypanecontrols|Waldek Mastykarz (MVP, Rencore, @waldekm)
|
||||||
|
react-custompropertypanecontrols|[Alex Terentiev](https://github.com/AJIXuMuK) ([@alexaterentiev](https://twitter.com/alexaterentiev))
|
||||||
|
|
||||||
## Version history
|
## Version history
|
||||||
|
|
||||||
Version|Date|Comments
|
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.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))
|
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
|
1.0.0|October 17, 2016|Initial release
|
||||||
|
|
||||||
|
|
||||||
## Minimal Path to Awesome
|
## Minimal Path to Awesome
|
||||||
|
|
||||||
- clone this repo
|
- clone this repo
|
||||||
|
|
@ -71,11 +74,11 @@ Version|Date|Comments
|
||||||
|
|
||||||
### Asynchronous drop-down
|
### 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
|
### 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
|
## Features
|
||||||
|
|
||||||
|
|
@ -92,21 +95,22 @@ Sample web parts in this solution illustrate the following concepts on top of th
|
||||||
- updating properties of web part property pane controls
|
- updating properties of web part property pane controls
|
||||||
- refreshing the web part property pane from the web part
|
- refreshing the web part property pane from the web part
|
||||||
|
|
||||||
|
|
||||||
## Help
|
## 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.
|
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.
|
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%3A%22sample%3A%20react-custompropertypanecontrols%22) to see if anybody else is having the same issues.
|
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=react-custompropertypanecontrols) and see what the community is saying.
|
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%2Csample%3A%20react-custompropertypanecontrols&template=bug-report.yml&sample=react-custompropertypanecontrols&authors=@waldekmastykarz&title=react-custompropertypanecontrols%20-%20).
|
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%3Aquestion%2Csample%3A%20react-custompropertypanecontrols&template=question.yml&sample=react-custompropertypanecontrols&authors=@waldekmastykarz&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%3Aenhancement%2Csample%3A%20react-custompropertypanecontrols&template=suggestion.yml&sample=react-custompropertypanecontrols&authors=@waldekmastykarz&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
|
## Disclaimer
|
||||||
|
|
|
||||||
|
|
@ -9,7 +9,7 @@
|
||||||
"Sample custom property pane controls built in React for use with SharePoint Framework client-side web parts."
|
"Sample custom property pane controls built in React for use with SharePoint Framework client-side web parts."
|
||||||
],
|
],
|
||||||
"creationDateTime": "2017-05-01",
|
"creationDateTime": "2017-05-01",
|
||||||
"updateDateTime": "2017-05-01",
|
"updateDateTime": "2026-01-22",
|
||||||
"products": [
|
"products": [
|
||||||
"SharePoint"
|
"SharePoint"
|
||||||
],
|
],
|
||||||
|
|
@ -20,7 +20,7 @@
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
"key": "SPFX-VERSION",
|
"key": "SPFX-VERSION",
|
||||||
"value": "drop4"
|
"value": "1.14.0"
|
||||||
}
|
}
|
||||||
],
|
],
|
||||||
"thumbnails": [
|
"thumbnails": [
|
||||||
|
|
@ -44,6 +44,12 @@
|
||||||
"pictureUrl": "https://github.com/waldekmastykarz.png",
|
"pictureUrl": "https://github.com/waldekmastykarz.png",
|
||||||
"name": "Waldek Mastykarz",
|
"name": "Waldek Mastykarz",
|
||||||
"twitter": "waldekm"
|
"twitter": "waldekm"
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"gitHubAccount": "AJIXuMuK",
|
||||||
|
"company": "Microsoft",
|
||||||
|
"pictureUrl": "https://github.com/AJIXuMuK.png",
|
||||||
|
"name": "Alex Terentiev"
|
||||||
}
|
}
|
||||||
],
|
],
|
||||||
"references": [
|
"references": [
|
||||||
|
|
|
||||||
|
|
@ -1,4 +0,0 @@
|
||||||
{
|
|
||||||
"$schema": "https://developer.microsoft.com/json-schemas/spfx-build/copy-assets.schema.json",
|
|
||||||
"deployCdnPath": "temp/deploy"
|
|
||||||
}
|
|
||||||
|
|
@ -1,6 +1,6 @@
|
||||||
{
|
{
|
||||||
"$schema": "https://developer.microsoft.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/",
|
"workingDir": "./release/assets/",
|
||||||
"account": "<!-- STORAGE ACCOUNT NAME -->",
|
"account": "<!-- STORAGE ACCOUNT NAME -->",
|
||||||
"container": "react-custompropertypanecontrols",
|
"container": "react-custompropertypanecontrols",
|
||||||
"accessKey": "<!-- ACCESS KEY -->"
|
"accessKey": "<!-- ACCESS KEY -->"
|
||||||
|
|
|
||||||
|
|
@ -5,7 +5,14 @@
|
||||||
"id": "21ba0db9-71ef-4f6b-8463-ce29e77e19f4",
|
"id": "21ba0db9-71ef-4f6b-8463-ce29e77e19f4",
|
||||||
"version": "2.0.1.0",
|
"version": "2.0.1.0",
|
||||||
"includeClientSideAssets": true,
|
"includeClientSideAssets": true,
|
||||||
"isDomainIsolated": false
|
"isDomainIsolated": false,
|
||||||
|
"developer": {
|
||||||
|
"name": "",
|
||||||
|
"privacyUrl": "",
|
||||||
|
"termsOfUseUrl": "",
|
||||||
|
"websiteUrl": "",
|
||||||
|
"mpnId": "Undefined-1.13.1"
|
||||||
|
}
|
||||||
},
|
},
|
||||||
"paths": {
|
"paths": {
|
||||||
"zippedPackage": "solution/react-custompropertypanecontrols.sppkg"
|
"zippedPackage": "solution/react-custompropertypanecontrols.sppkg"
|
||||||
|
|
|
||||||
|
|
@ -1,10 +1,6 @@
|
||||||
{
|
{
|
||||||
"$schema": "https://developer.microsoft.com/json-schemas/core-build/serve.schema.json",
|
"$schema": "https://developer.microsoft.com/json-schemas/core-build/serve.schema.json",
|
||||||
"port": 4321,
|
"port": 4321,
|
||||||
"initialPage": "https://localhost:5432/workbench",
|
"initialPage": "https://enter-your-SharePoint-site/_layouts/workbench.aspx",
|
||||||
"https": true,
|
"https": true
|
||||||
"api": {
|
|
||||||
"port": 5432,
|
|
||||||
"entryPath": "node_modules/@microsoft/sp-webpart-workbench/lib/api/"
|
|
||||||
}
|
|
||||||
}
|
}
|
||||||
|
|
|
||||||
|
|
@ -1,8 +1,16 @@
|
||||||
'use strict';
|
'use strict';
|
||||||
|
|
||||||
const gulp = require('gulp');
|
|
||||||
const build = require('@microsoft/sp-build-web');
|
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.addSuppression(`Warning - [sass] The local CSS class 'ms-Grid' is not camelCase and will not be type-safe.`);
|
||||||
|
|
||||||
build.initialize(gulp);
|
var getTasks = build.rig.getTasks;
|
||||||
|
build.rig.getTasks = function () {
|
||||||
|
var result = getTasks.call(build.rig);
|
||||||
|
|
||||||
|
result.set('serve', result.get('serve-deprecated'));
|
||||||
|
|
||||||
|
return result;
|
||||||
|
};
|
||||||
|
|
||||||
|
build.initialize(require('gulp'));
|
||||||
|
|
|
||||||
File diff suppressed because it is too large
Load Diff
|
|
@ -2,39 +2,30 @@
|
||||||
"name": "react-custompropertypanecontrols",
|
"name": "react-custompropertypanecontrols",
|
||||||
"version": "2.0.1",
|
"version": "2.0.1",
|
||||||
"private": true,
|
"private": true,
|
||||||
"engines": {
|
"engines": "undefined",
|
||||||
"node": ">=0.10.0"
|
"main": "lib/index.js",
|
||||||
},
|
|
||||||
"dependencies": {
|
"dependencies": {
|
||||||
"@microsoft/sp-core-library": "1.8.1",
|
"@microsoft/sp-core-library": "1.14.0-beta.5",
|
||||||
"@microsoft/sp-http": "1.8.1",
|
"@microsoft/sp-http": "1.14.0-beta.5",
|
||||||
"@microsoft/sp-lodash-subset": "1.8.1",
|
"@microsoft/sp-lodash-subset": "1.14.0-beta.5",
|
||||||
"@microsoft/sp-property-pane": "1.8.1",
|
"@microsoft/sp-property-pane": "1.14.0-beta.5",
|
||||||
"@microsoft/sp-webpart-base": "1.8.1",
|
"@microsoft/sp-webpart-base": "1.14.0-beta.5",
|
||||||
"@pnp/spfx-controls-react": "1.12.0",
|
"@pnp/spfx-controls-react": "3.5.0",
|
||||||
"@types/es6-promise": "0.0.33",
|
"office-ui-fabric-react": "7.174.1",
|
||||||
"@types/react": "16.4.2",
|
"react": "16.13.1",
|
||||||
"@types/react-dom": "16.0.5",
|
"react-addons-update": "15.6.3",
|
||||||
"@types/webpack-env": "1.13.1",
|
"react-dom": "16.13.1"
|
||||||
"office-ui-fabric-react": "5.132.0",
|
|
||||||
"react": "16.7.0",
|
|
||||||
"react-addons-update": "^15.5.2",
|
|
||||||
"react-dom": "16.7.0"
|
|
||||||
},
|
},
|
||||||
"devDependencies": {
|
"devDependencies": {
|
||||||
"@microsoft/rush-stack-compiler-2.7": "0.4.0",
|
"@microsoft/rush-stack-compiler-3.9": "0.4.47",
|
||||||
"@microsoft/sp-build-web": "1.8.1",
|
"@microsoft/sp-build-web": "1.14.0-beta.5",
|
||||||
"@microsoft/sp-module-interfaces": "1.8.1",
|
"@microsoft/sp-module-interfaces": "1.14.0-beta.5",
|
||||||
"@microsoft/sp-tslint-rules": "1.8.1",
|
"@microsoft/sp-tslint-rules": "1.14.0-beta.5",
|
||||||
"@microsoft/sp-webpart-workbench": "1.8.1",
|
"@types/react": "16.9.51",
|
||||||
"@types/chai": "3.4.34",
|
"@types/react-dom": "16.9.8",
|
||||||
"@types/mocha": "2.2.38",
|
"@types/webpack-env": "1.13.1",
|
||||||
"ajv": "5.2.2",
|
"ajv": "~5.2.2",
|
||||||
"assert": "1.4.1",
|
"gulp": "~4.0.2"
|
||||||
"gulp": "~3.9.1",
|
|
||||||
"tslint": "5.0.0",
|
|
||||||
"tslint-microsoft-contrib": "5.0.0",
|
|
||||||
"typescript": "2.4.2"
|
|
||||||
},
|
},
|
||||||
"scripts": {
|
"scripts": {
|
||||||
"build": "gulp bundle",
|
"build": "gulp bundle",
|
||||||
|
|
|
||||||
File diff suppressed because it is too large
Load Diff
|
|
@ -0,0 +1 @@
|
||||||
|
// A file is required to be in the root of the /src directory by the TypeScript compiler
|
||||||
|
|
@ -106,7 +106,7 @@ export default class DropdownWithRemoteDataWebPart extends BaseClientSideWebPart
|
||||||
});
|
});
|
||||||
}
|
}
|
||||||
|
|
||||||
private loadItems(): Promise<IDropdownOption[]> {
|
private loadItems(): Promise<IDropdownOption[] | void> {
|
||||||
if (!this.properties.list) {
|
if (!this.properties.list) {
|
||||||
// resolve to empty options since no list has been selected
|
// resolve to empty options since no list has been selected
|
||||||
return Promise.resolve();
|
return Promise.resolve();
|
||||||
|
|
|
||||||
|
|
@ -1,9 +0,0 @@
|
||||||
/// <reference types="mocha" />
|
|
||||||
|
|
||||||
import * as assert from 'assert';
|
|
||||||
|
|
||||||
describe('DropdownWithRemoteDataWebPart', () => {
|
|
||||||
it('should do something', () => {
|
|
||||||
assert.ok(true);
|
|
||||||
});
|
|
||||||
});
|
|
||||||
|
|
@ -39,29 +39,29 @@ export default class DropdownWithRemoteDataWithoutCustomControlsWebPart extends
|
||||||
return;
|
return;
|
||||||
}
|
}
|
||||||
|
|
||||||
this.context.statusRenderer.displayLoadingIndicator(this.domElement, 'lists');
|
this.context.statusRenderer.displayLoadingIndicator(this.domElement, 'lists', undefined, this.clearDomNode);
|
||||||
|
|
||||||
this.loadLists().then((listOptions: IDropdownOption[]) => {
|
this.loadLists().then((listOptions: IDropdownOption[]) => {
|
||||||
this.lists = listOptions;
|
this.lists = listOptions;
|
||||||
this.listsDropdownDisabled = false;
|
this.listsDropdownDisabled = false;
|
||||||
|
|
||||||
//if the list was already selected, then get columns
|
//if the list was already selected, then get columns
|
||||||
if (this.properties.list) {
|
if (this.properties.list) {
|
||||||
//go and load up dynamic column data
|
//go and load up dynamic column data
|
||||||
this.loadItems().then((itemOptions: IDropdownOption[]): void => {
|
this.loadItems().then((itemOptions: IDropdownOption[]): void => {
|
||||||
this.items = itemOptions;
|
this.items = itemOptions;
|
||||||
this.context.propertyPane.refresh();
|
|
||||||
this.context.statusRenderer.clearLoadingIndicator(this.domElement);
|
|
||||||
this.render();
|
|
||||||
});
|
|
||||||
}
|
|
||||||
else {
|
|
||||||
//else no list pre selected, so we can continue
|
|
||||||
this.context.propertyPane.refresh();
|
this.context.propertyPane.refresh();
|
||||||
this.context.statusRenderer.clearLoadingIndicator(this.domElement);
|
this.context.statusRenderer.clearLoadingIndicator(this.domElement);
|
||||||
this.render();
|
this.render();
|
||||||
}
|
});
|
||||||
});
|
}
|
||||||
|
else {
|
||||||
|
//else no list pre selected, so we can continue
|
||||||
|
this.context.propertyPane.refresh();
|
||||||
|
this.context.statusRenderer.clearLoadingIndicator(this.domElement);
|
||||||
|
this.render();
|
||||||
|
}
|
||||||
|
});
|
||||||
}
|
}
|
||||||
|
|
||||||
protected onPropertyPaneFieldChanged(propertyPath: string, oldValue: any, newValue: any): void {
|
protected onPropertyPaneFieldChanged(propertyPath: string, oldValue: any, newValue: any): void {
|
||||||
|
|
@ -79,7 +79,7 @@ export default class DropdownWithRemoteDataWithoutCustomControlsWebPart extends
|
||||||
// refresh the item selector control by repainting the property pane
|
// refresh the item selector control by repainting the property pane
|
||||||
this.context.propertyPane.refresh();
|
this.context.propertyPane.refresh();
|
||||||
// communicate loading items
|
// communicate loading items
|
||||||
this.context.statusRenderer.displayLoadingIndicator(this.domElement, 'items');
|
this.context.statusRenderer.displayLoadingIndicator(this.domElement, 'items', undefined, this.clearDomNode);
|
||||||
|
|
||||||
this.loadItems()
|
this.loadItems()
|
||||||
.then((itemOptions: IDropdownOption[]): void => {
|
.then((itemOptions: IDropdownOption[]): void => {
|
||||||
|
|
@ -87,12 +87,14 @@ export default class DropdownWithRemoteDataWithoutCustomControlsWebPart extends
|
||||||
this.items = itemOptions;
|
this.items = itemOptions;
|
||||||
// enable item selector
|
// enable item selector
|
||||||
this.itemsDropdownDisabled = false;
|
this.itemsDropdownDisabled = false;
|
||||||
// clear status indicator
|
setTimeout(() => {
|
||||||
this.context.statusRenderer.clearLoadingIndicator(this.domElement);
|
// clear status indicator
|
||||||
// re-render the web part as clearing the loading indicator removes the web part body
|
this.context.statusRenderer.clearLoadingIndicator(this.domElement);
|
||||||
this.render();
|
// re-render the web part as clearing the loading indicator removes the web part body
|
||||||
// refresh the item selector control by repainting the property pane
|
this.render();
|
||||||
this.context.propertyPane.refresh();
|
// refresh the item selector control by repainting the property pane
|
||||||
|
this.context.propertyPane.refresh();
|
||||||
|
}, 5000);
|
||||||
});
|
});
|
||||||
}
|
}
|
||||||
else {
|
else {
|
||||||
|
|
@ -143,44 +145,46 @@ export default class DropdownWithRemoteDataWithoutCustomControlsWebPart extends
|
||||||
|
|
||||||
private loadLists(): Promise<IDropdownOption[]> {
|
private loadLists(): Promise<IDropdownOption[]> {
|
||||||
const dataService = (Environment.type === EnvironmentType.Test || Environment.type === EnvironmentType.Local) ?
|
const dataService = (Environment.type === EnvironmentType.Test || Environment.type === EnvironmentType.Local) ?
|
||||||
new MockListService() :
|
new MockListService() :
|
||||||
new ListService(this.context);
|
new ListService(this.context);
|
||||||
|
|
||||||
return new Promise<IDropdownOption[]>(resolve => {
|
return new Promise<IDropdownOption[]>(resolve => {
|
||||||
dataService.getLists()
|
dataService.getLists()
|
||||||
.then((response: IList[]) => {
|
.then((response: IList[]) => {
|
||||||
var options : IDropdownOption[] = [];
|
var options: IDropdownOption[] = [];
|
||||||
|
|
||||||
response.forEach((item: IList) => {
|
response.forEach((item: IList) => {
|
||||||
options.push({"key": item.Id, "text": item.Title});
|
options.push({ "key": item.Id, "text": item.Title });
|
||||||
});
|
});
|
||||||
|
|
||||||
resolve(options);
|
resolve(options);
|
||||||
});
|
});
|
||||||
});
|
});
|
||||||
}
|
}
|
||||||
|
|
||||||
private loadItems(): Promise<IDropdownOption[]> {
|
private loadItems(): Promise<IDropdownOption[] | void> {
|
||||||
if (!this.properties.list) {
|
if (!this.properties.list) {
|
||||||
// resolve to empty options since no list has been selected
|
// resolve to empty options since no list has been selected
|
||||||
return Promise.resolve();
|
return Promise.resolve();
|
||||||
}
|
}
|
||||||
|
|
||||||
const dataService = (Environment.type === EnvironmentType.Test || Environment.type === EnvironmentType.Local) ?
|
const dataService = (Environment.type === EnvironmentType.Test || Environment.type === EnvironmentType.Local) ?
|
||||||
new MockListService() :
|
new MockListService() :
|
||||||
new ListService(this.context);
|
new ListService(this.context);
|
||||||
|
|
||||||
return new Promise<IDropdownOption[]>(resolve => {
|
return new Promise<IDropdownOption[]>(resolve => {
|
||||||
dataService.getList(this.properties.list)
|
dataService.getList(this.properties.list)
|
||||||
.then((response) => {
|
.then((response) => {
|
||||||
var options : IDropdownOption[] = [];
|
var options: IDropdownOption[] = [];
|
||||||
|
|
||||||
response.forEach((item: IListItem) => {
|
if (response && response.length) {
|
||||||
options.push({"key": item.Id, "text": item.Title});
|
response.forEach((item: IListItem) => {
|
||||||
});
|
options.push({ "key": item.Id, "text": item.Title });
|
||||||
|
});
|
||||||
|
}
|
||||||
|
|
||||||
resolve(options);
|
resolve(options);
|
||||||
});
|
});
|
||||||
});
|
});
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
@ -196,4 +200,8 @@ export default class DropdownWithRemoteDataWithoutCustomControlsWebPart extends
|
||||||
private configureWebPart(): void {
|
private configureWebPart(): void {
|
||||||
this.context.propertyPane.open();
|
this.context.propertyPane.open();
|
||||||
}
|
}
|
||||||
|
|
||||||
|
private clearDomNode = (domNode: HTMLElement): void => {
|
||||||
|
ReactDom.unmountComponentAtNode(domNode);
|
||||||
|
}
|
||||||
}
|
}
|
||||||
|
|
|
||||||
|
|
@ -1,9 +0,0 @@
|
||||||
/// <reference types="mocha" />
|
|
||||||
|
|
||||||
import * as assert from 'assert';
|
|
||||||
|
|
||||||
describe('DropdownWithRemoteDataWithoutCustomControlsWebPart', () => {
|
|
||||||
it('should do something', () => {
|
|
||||||
assert.ok(true);
|
|
||||||
});
|
|
||||||
});
|
|
||||||
|
|
@ -16,23 +16,21 @@
|
||||||
"lib": [
|
"lib": [
|
||||||
"es5",
|
"es5",
|
||||||
"dom",
|
"dom",
|
||||||
"es2015.collection"
|
"es2015.collection",
|
||||||
|
"es2015.promise"
|
||||||
],
|
],
|
||||||
"typeRoots": [
|
"typeRoots": [
|
||||||
"./node_modules/@types",
|
"./node_modules/@types",
|
||||||
"./node_modules/@microsoft"
|
"./node_modules/@microsoft"
|
||||||
],
|
],
|
||||||
"types": [
|
"types": [
|
||||||
"es6-promise",
|
|
||||||
"webpack-env"
|
"webpack-env"
|
||||||
]
|
]
|
||||||
},
|
},
|
||||||
"include": [
|
"include": [
|
||||||
"src/**/*.ts"
|
"src/**/*.ts",
|
||||||
|
"src/**/*.tsx"
|
||||||
],
|
],
|
||||||
"exclude": [
|
"exclude": [],
|
||||||
"node_modules",
|
"extends": "./node_modules/@microsoft/rush-stack-compiler-3.9/includes/tsconfig-web.json"
|
||||||
"lib"
|
|
||||||
],
|
|
||||||
"extends": "./node_modules/@microsoft/rush-stack-compiler-2.7/includes/tsconfig-web.json"
|
|
||||||
}
|
}
|
||||||
|
|
|
||||||
|
|
@ -1,5 +1,5 @@
|
||||||
{
|
{
|
||||||
"extends": "@microsoft/sp-tslint-rules/base-tslint.json",
|
"extends": "./node_modules/@microsoft/sp-tslint-rules/base-tslint.json",
|
||||||
"rules": {
|
"rules": {
|
||||||
"class-name": false,
|
"class-name": false,
|
||||||
"export-name": false,
|
"export-name": false,
|
||||||
|
|
@ -17,7 +17,6 @@
|
||||||
"no-switch-case-fall-through": true,
|
"no-switch-case-fall-through": true,
|
||||||
"no-unnecessary-semicolons": true,
|
"no-unnecessary-semicolons": true,
|
||||||
"no-unused-expression": true,
|
"no-unused-expression": true,
|
||||||
"no-use-before-declare": true,
|
|
||||||
"no-with-statement": true,
|
"no-with-statement": true,
|
||||||
"semicolon": true,
|
"semicolon": true,
|
||||||
"trailing-comma": false,
|
"trailing-comma": false,
|
||||||
|
|
|
||||||
|
|
@ -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
Loading…
Reference in New Issue