Peter Paul Kirschner
GitHub
commit
145180b26d
|
|
@ -29,8 +29,7 @@ Please use following logic on submitting your questions or issues to right locat
|
|||
|
||||
* [Overview of the SharePoint Framework](https://docs.microsoft.com/sharepoint/dev/spfx/sharepoint-framework-overview)
|
||||
* [SharePoint Framework development tools and libraries](https://docs.microsoft.com/sharepoint/dev/spfx/tools-and-libraries)
|
||||
* [SharePoint Framework Reference](http://aka.ms/spfx-reference)
|
||||
* [Visual Studio Extension for SharePoint Framework projects](https://github.com/SharePoint/sp-dev-fx-vs-extension)
|
||||
* [Getting Started](https://docs.microsoft.com/en-us/sharepoint/dev/spfx/set-up-your-developer-tenant)
|
||||
|
||||
## Using the samples
|
||||
|
||||
|
|
@ -39,7 +38,7 @@ To build and start using these projects, you'll need to clone and build the proj
|
|||
Clone this repository by executing the following command in your console:
|
||||
|
||||
```shell
|
||||
git clone https://github.com/SharePoint/sp-dev-fx-webparts.git
|
||||
git clone https://github.com/pnp/sp-dev-fx-webparts.git
|
||||
```
|
||||
|
||||
Navigate to the cloned repository folder which should be the same as the repository name:
|
||||
|
|
@ -77,8 +76,8 @@ gulp serve
|
|||
|
||||
## Contributions
|
||||
|
||||
These samples are direct from the feature teams, SharePoint PnP core team (http://aka.ms/SharePointPnP) or shared by the community. We welcome your input on issues and suggestions for new samples. We do also welcome community contributions around the client-side web parts. If there's any questions around that, just let us know.
|
||||
These samples are direct from the feature teams, SharePoint PnP core team (http://aka.ms/m365pnp) or shared by the community. We welcome your input on issues and suggestions for new samples. We do also welcome community contributions around the client-side web parts. If there's any questions around that, just let us know.
|
||||
|
||||
Please have a look on our [Contribution Guidance](./.github/CONTRIBUTING.md) before submitting your pull requests, so that we can get your contribution processed as fast as possible. Thx.
|
||||
|
||||
> Sharing is caring!
|
||||
> Sharing is caring!
|
||||
|
|
|
|||
|
|
@ -27,7 +27,7 @@ This sample shows how to integrate custom gulp tasks using the [gulp-image-resiz
|
|||
|
||||
Read the following documentation for detailed information on integrating gulp tasks in SharePoint Framework:
|
||||
|
||||
- [Integrate custom gulp tasks in the SharePoint Framework toolchain](https://aka.ms/spfx-extend-gulp)
|
||||
- [Integrate custom gulp tasks in the SharePoint Framework toolchain](https://docs.microsoft.com/sharepoint/dev/spfx/toolchain/integrate-gulp-tasks-in-build-pipeline)
|
||||
|
||||
## Used SharePoint Framework Version
|
||||
|
||||
|
|
@ -86,4 +86,4 @@ Version|Date|Comments
|
|||
- `npm install`
|
||||
- `gulp serve`
|
||||
|
||||
<img src="https://telemetry.sharepointpnp.com/sp-dev-fx-webparts/samples/js-extend-gulp" />
|
||||
<img src="https://telemetry.sharepointpnp.com/sp-dev-fx-webparts/samples/js-extend-gulp" />
|
||||
|
|
|
|||
|
|
@ -22,7 +22,7 @@ This sample shows how to use the webpack [markdown-loader](https://www.npmjs.com
|
|||
|
||||
Read the following documentation for detailed information on working with webpack loaders in SharePoint Framework:
|
||||
|
||||
- [Extending webpack in the SharePoint Framework toolchain](https://aka.ms/spfx-extend-webpack)
|
||||
- [Extending webpack in the SharePoint Framework toolchain](https://docs.microsoft.com/en-us/sharepoint/dev/spfx/toolchain/extending-webpack-in-build-pipeline)
|
||||
|
||||
## Used SharePoint Framework Version
|
||||
|
||||
|
|
@ -58,4 +58,4 @@ Version|Date|Comments
|
|||
- `npm install`
|
||||
- `gulp serve`
|
||||
|
||||
<img src="https://telemetry.sharepointpnp.com/sp-dev-fx-webparts/samples/js-extend-webpack" />
|
||||
<img src="https://telemetry.sharepointpnp.com/sp-dev-fx-webparts/samples/js-extend-webpack" />
|
||||
|
|
|
|||
|
|
@ -79,11 +79,15 @@ Version|Date|Comments
|
|||
|
||||
## Minimal Path to Awesome
|
||||
|
||||
- Clone this repo
|
||||
- Clone this repository.
|
||||
- On the command prompt, navigate to the web part folder and execute:
|
||||
- `npm i`
|
||||
- `gulp serve --nobrowser`
|
||||
- Open workbench on your tenant, i.e. https://contoso.sharepoint.com/sites/salesteam/_layouts/15/workbench.aspx
|
||||
- Search and add web part "Adaptive Cards Image Gallery"
|
||||
- `gulp bundle --ship`
|
||||
- `gulp package-solution --ship`
|
||||
- The package can be found at `\react-adaptive-cards-image-gallery\sharepoint\solution\react-adaptive-cards-image-gallery.sppkg`
|
||||
- [Deploy the package](https://docs.microsoft.com/en-us/sharepoint/dev/spfx/web-parts/get-started/serve-your-web-part-in-a-sharepoint-page#deploy-the-helloworld-package-to-app-catalog) to the app catalog.
|
||||
- [Install the client-side solution](https://docs.microsoft.com/en-us/sharepoint/dev/spfx/web-parts/get-started/serve-your-web-part-in-a-sharepoint-page#install-the-client-side-solution-on-your-site) to your SharePoint site.
|
||||
- [Add web part to your SharePoint page](https://docs.microsoft.com/en-us/sharepoint/dev/spfx/web-parts/get-started/serve-your-web-part-in-a-sharepoint-page#add-the-helloworld-web-part-to-modern-page) named "Adaptive Cards Image Gallery".
|
||||
|
||||
## Features
|
||||
|
||||
|
|
|
|||
|
|
@ -13,6 +13,7 @@
|
|||
},
|
||||
"externals": {},
|
||||
"localizedResources": {
|
||||
"AdaptiveCardsImageGalleryWebPartStrings": "lib/webparts/adaptiveCardsImageGallery/loc/{locale}.js"
|
||||
"AdaptiveCardsImageGalleryWebPartStrings": "lib/webparts/adaptiveCardsImageGallery/loc/{locale}.js",
|
||||
"ControlStrings": "node_modules/@pnp/spfx-controls-react/lib/loc/{locale}.js"
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
@ -1516,11 +1516,6 @@
|
|||
"isomorphic-fetch": "^2.2.1"
|
||||
}
|
||||
},
|
||||
"@microsoft/microsoft-graph-types": {
|
||||
"version": "1.1.0",
|
||||
"resolved": "https://registry.npmjs.org/@microsoft/microsoft-graph-types/-/microsoft-graph-types-1.1.0.tgz",
|
||||
"integrity": "sha1-CGRuRpJHpBRMcVFhoQgTh63nzTs="
|
||||
},
|
||||
"@microsoft/node-core-library": {
|
||||
"version": "3.15.1",
|
||||
"resolved": "https://registry.npmjs.org/@microsoft/node-core-library/-/node-core-library-3.15.1.tgz",
|
||||
|
|
@ -2518,6 +2513,200 @@
|
|||
"integrity": "sha512-518yewjSga1jLdiLrcmpMFlaba5P+50b0TWNFUpC+SL9Yzf0kMi57qw+bMl+rQ08cGqH1vLx4eg9YFUbZXgZ0Q==",
|
||||
"dev": true
|
||||
},
|
||||
"@pnp/common": {
|
||||
"version": "2.0.6",
|
||||
"resolved": "https://registry.npmjs.org/@pnp/common/-/common-2.0.6.tgz",
|
||||
"integrity": "sha512-/NghaEt1Q03+f1iAniRpxlciXmnTqvMFIdtjcA4HX80xVOtTiZT0Gz1GAjH7ebzBO1YtSiHri013/bhZM7beRQ==",
|
||||
"requires": {
|
||||
"tslib": "1.10.0"
|
||||
},
|
||||
"dependencies": {
|
||||
"tslib": {
|
||||
"version": "1.10.0",
|
||||
"resolved": "https://registry.npmjs.org/tslib/-/tslib-1.10.0.tgz",
|
||||
"integrity": "sha512-qOebF53frne81cf0S9B41ByenJ3/IuH8yJKngAX35CmiZySA0khhkovshKK+jGCaMnVomla7gVlIcc3EvKPbTQ=="
|
||||
}
|
||||
}
|
||||
},
|
||||
"@pnp/logging": {
|
||||
"version": "2.0.6",
|
||||
"resolved": "https://registry.npmjs.org/@pnp/logging/-/logging-2.0.6.tgz",
|
||||
"integrity": "sha512-Jd63mqEarpuFsvy2EKNZpvsRHMaF1Ozo9/qHOZeKiSiZIvkNu4W41KgCD3BTS48saFY4870L5/gXzVo9Rkvqug==",
|
||||
"requires": {
|
||||
"tslib": "1.10.0"
|
||||
},
|
||||
"dependencies": {
|
||||
"tslib": {
|
||||
"version": "1.10.0",
|
||||
"resolved": "https://registry.npmjs.org/tslib/-/tslib-1.10.0.tgz",
|
||||
"integrity": "sha512-qOebF53frne81cf0S9B41ByenJ3/IuH8yJKngAX35CmiZySA0khhkovshKK+jGCaMnVomla7gVlIcc3EvKPbTQ=="
|
||||
}
|
||||
}
|
||||
},
|
||||
"@pnp/odata": {
|
||||
"version": "2.0.6",
|
||||
"resolved": "https://registry.npmjs.org/@pnp/odata/-/odata-2.0.6.tgz",
|
||||
"integrity": "sha512-opU8Ifwmb/wbHtfmbBhsd2CzJhtAppNd7fbnW8dFOouCWa/udvsAc5NMuiT5sL8G9DDLQsnxZCxi83e5cao3aA==",
|
||||
"requires": {
|
||||
"@pnp/common": "2.0.6",
|
||||
"@pnp/logging": "2.0.6",
|
||||
"tslib": "1.10.0"
|
||||
},
|
||||
"dependencies": {
|
||||
"tslib": {
|
||||
"version": "1.10.0",
|
||||
"resolved": "https://registry.npmjs.org/tslib/-/tslib-1.10.0.tgz",
|
||||
"integrity": "sha512-qOebF53frne81cf0S9B41ByenJ3/IuH8yJKngAX35CmiZySA0khhkovshKK+jGCaMnVomla7gVlIcc3EvKPbTQ=="
|
||||
}
|
||||
}
|
||||
},
|
||||
"@pnp/sp": {
|
||||
"version": "2.0.6",
|
||||
"resolved": "https://registry.npmjs.org/@pnp/sp/-/sp-2.0.6.tgz",
|
||||
"integrity": "sha512-AForkvQjGogym3z0bBS7XUZ7sNQDLuyE4CYAZBLUtsBS6BMr4r3QXpCSmFChgD6F8lG265Aw6IMnPzgiBDbQhQ==",
|
||||
"requires": {
|
||||
"@pnp/common": "2.0.6",
|
||||
"@pnp/logging": "2.0.6",
|
||||
"@pnp/odata": "2.0.6",
|
||||
"tslib": "1.10.0"
|
||||
},
|
||||
"dependencies": {
|
||||
"tslib": {
|
||||
"version": "1.10.0",
|
||||
"resolved": "https://registry.npmjs.org/tslib/-/tslib-1.10.0.tgz",
|
||||
"integrity": "sha512-qOebF53frne81cf0S9B41ByenJ3/IuH8yJKngAX35CmiZySA0khhkovshKK+jGCaMnVomla7gVlIcc3EvKPbTQ=="
|
||||
}
|
||||
}
|
||||
},
|
||||
"@pnp/spfx-controls-react": {
|
||||
"version": "1.19.0",
|
||||
"resolved": "https://registry.npmjs.org/@pnp/spfx-controls-react/-/spfx-controls-react-1.19.0.tgz",
|
||||
"integrity": "sha512-W3PS6I8NsdbOZjE9I9djloYutQW17QHd4nT7jFwPyJFoxnt1MDfWyN6nrPhaeGnnPde3t3TlUbWP4HKLXChFiw==",
|
||||
"requires": {
|
||||
"@pnp/common": "1.0.1",
|
||||
"@pnp/logging": "1.0.1",
|
||||
"@pnp/odata": "1.0.1",
|
||||
"@pnp/sp": "1.0.1",
|
||||
"@pnp/telemetry-js": "2.0.0",
|
||||
"@types/chart.js": "2.7.40",
|
||||
"chart.js": "2.7.3",
|
||||
"color": "^3.1.2",
|
||||
"lodash": "4.17.13",
|
||||
"office-ui-fabric-react": "5.131.0",
|
||||
"react-quill": "1.3.3"
|
||||
},
|
||||
"dependencies": {
|
||||
"@pnp/common": {
|
||||
"version": "1.0.1",
|
||||
"resolved": "https://registry.npmjs.org/@pnp/common/-/common-1.0.1.tgz",
|
||||
"integrity": "sha1-T+cuONHexjlQSvxxQclSEh5YqOk=",
|
||||
"requires": {
|
||||
"tslib": "1.8.1"
|
||||
}
|
||||
},
|
||||
"@pnp/logging": {
|
||||
"version": "1.0.1",
|
||||
"resolved": "https://registry.npmjs.org/@pnp/logging/-/logging-1.0.1.tgz",
|
||||
"integrity": "sha1-Nl1/dmiW943xIMgd9D3dlrCgojY=",
|
||||
"requires": {
|
||||
"tslib": "1.8.1"
|
||||
}
|
||||
},
|
||||
"@pnp/odata": {
|
||||
"version": "1.0.1",
|
||||
"resolved": "https://registry.npmjs.org/@pnp/odata/-/odata-1.0.1.tgz",
|
||||
"integrity": "sha1-yE5s/MV2VdZj2IEFlgGT8yiOwAI=",
|
||||
"requires": {
|
||||
"tslib": "1.8.1"
|
||||
}
|
||||
},
|
||||
"@pnp/sp": {
|
||||
"version": "1.0.1",
|
||||
"resolved": "https://registry.npmjs.org/@pnp/sp/-/sp-1.0.1.tgz",
|
||||
"integrity": "sha1-5XXJVqZWk9KRkI4yEdzWbc5KFWM=",
|
||||
"requires": {
|
||||
"tslib": "1.8.1"
|
||||
}
|
||||
},
|
||||
"@uifabric/icons": {
|
||||
"version": "5.8.0",
|
||||
"resolved": "https://registry.npmjs.org/@uifabric/icons/-/icons-5.8.0.tgz",
|
||||
"integrity": "sha512-EUhKxYlIPJshg4fQvCNTYSk0p7RhzEWeEAJBV4sao1SKmN0/pZBnkLbDqWjU5VUfdwZZYiIdaLRpM+pyzhniZw==",
|
||||
"requires": {
|
||||
"@uifabric/styling": ">=5.30.1 <6.0.0",
|
||||
"tslib": "^1.7.1"
|
||||
}
|
||||
},
|
||||
"@uifabric/merge-styles": {
|
||||
"version": "5.17.1",
|
||||
"resolved": "https://registry.npmjs.org/@uifabric/merge-styles/-/merge-styles-5.17.1.tgz",
|
||||
"integrity": "sha512-4/EtO6Ns7kNtKxC+6InShwVQeNQEDT5H8Ex7m/i4OrT9i7csje4YwBQPkkpm31qJwEZEyD7bbAwyLezI63sLhg==",
|
||||
"requires": {
|
||||
"tslib": "^1.7.1"
|
||||
}
|
||||
},
|
||||
"@uifabric/styling": {
|
||||
"version": "5.37.0",
|
||||
"resolved": "https://registry.npmjs.org/@uifabric/styling/-/styling-5.37.0.tgz",
|
||||
"integrity": "sha512-3hC0itW/hWSD5J4uANzUKk8XVGWUNkU+VLjEjWsQ6i5lvwFGaanR6Qy0bTkZdFGqFWMXe91CkBHV7HnvEx7tCA==",
|
||||
"requires": {
|
||||
"@microsoft/load-themed-styles": "^1.7.13",
|
||||
"@uifabric/merge-styles": ">=5.17.1 <6.0.0",
|
||||
"@uifabric/utilities": ">=5.34.2 <6.0.0",
|
||||
"tslib": "^1.7.1"
|
||||
}
|
||||
},
|
||||
"@uifabric/utilities": {
|
||||
"version": "5.34.3",
|
||||
"resolved": "https://registry.npmjs.org/@uifabric/utilities/-/utilities-5.34.3.tgz",
|
||||
"integrity": "sha512-6dERFkNNCUrPUuNG1nxlDDvt7DN5hxb41zp9AmKhK5cXZTYCblmlLBvb/qyielCnicfoagoA+lqH9NgnSE8u/A==",
|
||||
"requires": {
|
||||
"@uifabric/merge-styles": ">=5.17.1 <6.0.0",
|
||||
"prop-types": "^15.5.10",
|
||||
"tslib": "^1.7.1"
|
||||
}
|
||||
},
|
||||
"lodash": {
|
||||
"version": "4.17.13",
|
||||
"resolved": "https://registry.npmjs.org/lodash/-/lodash-4.17.13.tgz",
|
||||
"integrity": "sha512-vm3/XWXfWtRua0FkUyEHBZy8kCPjErNBT9fJx8Zvs+U6zjqPbTUOpkaoum3O5uiA8sm+yNMHXfYkTUHFoMxFNA=="
|
||||
},
|
||||
"office-ui-fabric-react": {
|
||||
"version": "5.131.0",
|
||||
"resolved": "https://registry.npmjs.org/office-ui-fabric-react/-/office-ui-fabric-react-5.131.0.tgz",
|
||||
"integrity": "sha512-QOYu1uf92qhTTIlBAj8teKvRpCmpliRZjynYtgeeUbDm4C4GtXdb/O1rPNFsfT0PNtPC8dCNeQ7/CXjQenUkyw==",
|
||||
"requires": {
|
||||
"@microsoft/load-themed-styles": "^1.7.13",
|
||||
"@uifabric/icons": ">=5.8.0 <6.0.0",
|
||||
"@uifabric/merge-styles": ">=5.17.1 <6.0.0",
|
||||
"@uifabric/styling": ">=5.36.0 <6.0.0",
|
||||
"@uifabric/utilities": ">=5.34.2 <6.0.0",
|
||||
"prop-types": "^15.5.10",
|
||||
"tslib": "^1.7.1"
|
||||
}
|
||||
},
|
||||
"tslib": {
|
||||
"version": "1.8.1",
|
||||
"resolved": "https://registry.npmjs.org/tslib/-/tslib-1.8.1.tgz",
|
||||
"integrity": "sha1-aUavLR1lGnsYY7Ux1uWvpBqkTqw="
|
||||
}
|
||||
}
|
||||
},
|
||||
"@pnp/telemetry-js": {
|
||||
"version": "2.0.0",
|
||||
"resolved": "https://registry.npmjs.org/@pnp/telemetry-js/-/telemetry-js-2.0.0.tgz",
|
||||
"integrity": "sha512-qFNm3mTerTnxgTR6c/4iMMt8EUKrQn5z0XG/IQtpNlp6m7KXRDFR87mQKeBVtSv2LhxGO0VNFndKJIibBw52zQ==",
|
||||
"requires": {
|
||||
"whatwg-fetch": "2.0.4"
|
||||
},
|
||||
"dependencies": {
|
||||
"whatwg-fetch": {
|
||||
"version": "2.0.4",
|
||||
"resolved": "https://registry.npmjs.org/whatwg-fetch/-/whatwg-fetch-2.0.4.tgz",
|
||||
"integrity": "sha512-dcQ1GWpOD/eEQ97k66aiEVpNnapVj90/+R+SXTPYGHpYBBypfKJEQjLrvMZ7YXbKm21gXd4NcuxUTjiv1YtLng=="
|
||||
}
|
||||
}
|
||||
},
|
||||
"@pnpm/link-bins": {
|
||||
"version": "1.0.4",
|
||||
"resolved": "https://registry.npmjs.org/@pnpm/link-bins/-/link-bins-1.0.4.tgz",
|
||||
|
|
@ -2629,6 +2818,11 @@
|
|||
"integrity": "sha1-ox10JBprHtu5c8822XooloNKUfk=",
|
||||
"dev": true
|
||||
},
|
||||
"@types/chart.js": {
|
||||
"version": "2.7.40",
|
||||
"resolved": "https://registry.npmjs.org/@types/chart.js/-/chart.js-2.7.40.tgz",
|
||||
"integrity": "sha512-yC8Ff5vsHFTClGCWXoAmNCh33cNYfP2/yFANBLjLiso4jTKsLfQ0KQuBEuKxOWTRoOSLyT6v+ZYcvz0uonvvsA=="
|
||||
},
|
||||
"@types/es6-promise": {
|
||||
"version": "0.0.33",
|
||||
"resolved": "https://registry.npmjs.org/@types/es6-promise/-/es6-promise-0.0.33.tgz",
|
||||
|
|
@ -2717,11 +2911,6 @@
|
|||
"@types/node": "*"
|
||||
}
|
||||
},
|
||||
"@types/microsoft-ajax": {
|
||||
"version": "0.0.35",
|
||||
"resolved": "https://registry.npmjs.org/@types/microsoft-ajax/-/microsoft-ajax-0.0.35.tgz",
|
||||
"integrity": "sha512-uM+VKi5q/EjhsCSfH/raPPB5qxuSuOIgmn03LEpDrvDKgsFxvTFeeaRIgib2imNAm7GOQ4MhgsNWiIRGK/YxcQ=="
|
||||
},
|
||||
"@types/mime": {
|
||||
"version": "2.0.2",
|
||||
"resolved": "https://registry.npmjs.org/@types/mime/-/mime-2.0.2.tgz",
|
||||
|
|
@ -2794,6 +2983,14 @@
|
|||
"integrity": "sha512-7s9EQWupR1fTc2pSMtXRQ9w9gLOcrJn+h7HOXw4evxyvVqMi4f+q7d2tnFe3ng3SNHjtK+0EzGMGFUQX4/AQRA==",
|
||||
"dev": true
|
||||
},
|
||||
"@types/quill": {
|
||||
"version": "1.3.10",
|
||||
"resolved": "https://registry.npmjs.org/@types/quill/-/quill-1.3.10.tgz",
|
||||
"integrity": "sha512-IhW3fPW+bkt9MLNlycw8u8fWb7oO7W5URC9MfZYHBlA24rex9rs23D5DETChu1zvgVdc5ka64ICjJOgQMr6Shw==",
|
||||
"requires": {
|
||||
"parchment": "^1.1.2"
|
||||
}
|
||||
},
|
||||
"@types/ramda": {
|
||||
"version": "0.25.51",
|
||||
"resolved": "https://registry.npmjs.org/@types/ramda/-/ramda-0.25.51.tgz",
|
||||
|
|
@ -2863,14 +3060,6 @@
|
|||
"@types/mime": "*"
|
||||
}
|
||||
},
|
||||
"@types/sharepoint": {
|
||||
"version": "2013.1.9",
|
||||
"resolved": "https://registry.npmjs.org/@types/sharepoint/-/sharepoint-2013.1.9.tgz",
|
||||
"integrity": "sha512-OP3D/vKnOnZcRwTu2jdt7gp8AGDKx3jFoBHudR7UUX4IIwDqOPEJdkfvIpz/KiQbbbyvWS0PtvDz3iQ1HH/rcw==",
|
||||
"requires": {
|
||||
"@types/microsoft-ajax": "*"
|
||||
}
|
||||
},
|
||||
"@types/source-list-map": {
|
||||
"version": "0.1.2",
|
||||
"resolved": "https://registry.npmjs.org/@types/source-list-map/-/source-list-map-0.1.2.tgz",
|
||||
|
|
@ -3854,8 +4043,7 @@
|
|||
"asap": {
|
||||
"version": "2.0.6",
|
||||
"resolved": "https://registry.npmjs.org/asap/-/asap-2.0.6.tgz",
|
||||
"integrity": "sha1-5QNHYR1+aQlDIIu9r+vLwvuGbUY=",
|
||||
"dev": true
|
||||
"integrity": "sha1-5QNHYR1+aQlDIIu9r+vLwvuGbUY="
|
||||
},
|
||||
"asn1": {
|
||||
"version": "0.2.4",
|
||||
|
|
@ -4952,6 +5140,32 @@
|
|||
"integrity": "sha512-mT8iDcrh03qDGRRmoA2hmBJnxpllMR+0/0qlzjqZES6NdiWDcZkCNAk4rPFZ9Q85r27unkiNNg8ZOiwZXBHwcA==",
|
||||
"dev": true
|
||||
},
|
||||
"chart.js": {
|
||||
"version": "2.7.3",
|
||||
"resolved": "https://registry.npmjs.org/chart.js/-/chart.js-2.7.3.tgz",
|
||||
"integrity": "sha512-3+7k/DbR92m6BsMUYP6M0dMsMVZpMnwkUyNSAbqolHKsbIzH2Q4LWVEHHYq7v0fmEV8whXE0DrjANulw9j2K5g==",
|
||||
"requires": {
|
||||
"chartjs-color": "^2.1.0",
|
||||
"moment": "^2.10.2"
|
||||
}
|
||||
},
|
||||
"chartjs-color": {
|
||||
"version": "2.4.1",
|
||||
"resolved": "https://registry.npmjs.org/chartjs-color/-/chartjs-color-2.4.1.tgz",
|
||||
"integrity": "sha512-haqOg1+Yebys/Ts/9bLo/BqUcONQOdr/hoEr2LLTRl6C5LXctUdHxsCYfvQVg5JIxITrfCNUDr4ntqmQk9+/0w==",
|
||||
"requires": {
|
||||
"chartjs-color-string": "^0.6.0",
|
||||
"color-convert": "^1.9.3"
|
||||
}
|
||||
},
|
||||
"chartjs-color-string": {
|
||||
"version": "0.6.0",
|
||||
"resolved": "https://registry.npmjs.org/chartjs-color-string/-/chartjs-color-string-0.6.0.tgz",
|
||||
"integrity": "sha512-TIB5OKn1hPJvO7JcteW4WY/63v6KwEdt6udfnDE9iCAZgy+V4SrbSxoIbTw/xkUIapjEI4ExGtD0+6D3KyFd7A==",
|
||||
"requires": {
|
||||
"color-name": "^1.0.0"
|
||||
}
|
||||
},
|
||||
"chokidar": {
|
||||
"version": "2.1.8",
|
||||
"resolved": "https://registry.npmjs.org/chokidar/-/chokidar-2.1.8.tgz",
|
||||
|
|
@ -5089,8 +5303,7 @@
|
|||
"clone": {
|
||||
"version": "2.1.2",
|
||||
"resolved": "https://registry.npmjs.org/clone/-/clone-2.1.2.tgz",
|
||||
"integrity": "sha1-G39Ln1kfHo+DZwQBYANFoCiHQ18=",
|
||||
"dev": true
|
||||
"integrity": "sha1-G39Ln1kfHo+DZwQBYANFoCiHQ18="
|
||||
},
|
||||
"clone-buffer": {
|
||||
"version": "1.0.0",
|
||||
|
|
@ -5163,7 +5376,6 @@
|
|||
"version": "3.1.2",
|
||||
"resolved": "https://registry.npmjs.org/color/-/color-3.1.2.tgz",
|
||||
"integrity": "sha512-vXTJhHebByxZn3lDvDJYw4lR5+uB3vuoHsuYA5AKuxRVn5wzzIfQKGLBmgdVRHKTJYeK5rvJcHnrd0Li49CFpg==",
|
||||
"dev": true,
|
||||
"requires": {
|
||||
"color-convert": "^1.9.1",
|
||||
"color-string": "^1.5.2"
|
||||
|
|
@ -5173,7 +5385,6 @@
|
|||
"version": "1.9.3",
|
||||
"resolved": "https://registry.npmjs.org/color-convert/-/color-convert-1.9.3.tgz",
|
||||
"integrity": "sha512-QfAUtd+vFdAtFQcC8CCyYt1fYWxSqAiK2cSD6zDB8N3cpsEBAvRxp9zOGg6G/SHHJYAT88/az/IuDGALsNVbGg==",
|
||||
"dev": true,
|
||||
"requires": {
|
||||
"color-name": "1.1.3"
|
||||
}
|
||||
|
|
@ -5181,14 +5392,12 @@
|
|||
"color-name": {
|
||||
"version": "1.1.3",
|
||||
"resolved": "https://registry.npmjs.org/color-name/-/color-name-1.1.3.tgz",
|
||||
"integrity": "sha1-p9BVi9icQveV3UIyj3QIMcpTvCU=",
|
||||
"dev": true
|
||||
"integrity": "sha1-p9BVi9icQveV3UIyj3QIMcpTvCU="
|
||||
},
|
||||
"color-string": {
|
||||
"version": "1.5.3",
|
||||
"resolved": "https://registry.npmjs.org/color-string/-/color-string-1.5.3.tgz",
|
||||
"integrity": "sha512-dC2C5qeWoYkxki5UAXapdjqO672AM4vZuPGRQfO8b5HKuKGBbKWpITyDYN7TOFKvRW7kOgAn3746clDBMDJyQw==",
|
||||
"dev": true,
|
||||
"requires": {
|
||||
"color-name": "^1.0.0",
|
||||
"simple-swizzle": "^0.2.2"
|
||||
|
|
@ -5453,6 +5662,16 @@
|
|||
"sha.js": "^2.4.8"
|
||||
}
|
||||
},
|
||||
"create-react-class": {
|
||||
"version": "15.6.3",
|
||||
"resolved": "https://registry.npmjs.org/create-react-class/-/create-react-class-15.6.3.tgz",
|
||||
"integrity": "sha512-M+/3Q6E6DLO6Yx3OwrWjwHBnvfXXYA7W+dFjt/ZDBemHO1DDZhsalX/NUtnTYclN6GfnBDRh4qRHjcDHmlJBJg==",
|
||||
"requires": {
|
||||
"fbjs": "^0.8.9",
|
||||
"loose-envify": "^1.3.1",
|
||||
"object-assign": "^4.1.1"
|
||||
}
|
||||
},
|
||||
"cross-spawn": {
|
||||
"version": "6.0.5",
|
||||
"resolved": "https://registry.npmjs.org/cross-spawn/-/cross-spawn-6.0.5.tgz",
|
||||
|
|
@ -5993,6 +6212,19 @@
|
|||
"esprima": "4.0.1"
|
||||
}
|
||||
},
|
||||
"deep-equal": {
|
||||
"version": "1.1.1",
|
||||
"resolved": "https://registry.npmjs.org/deep-equal/-/deep-equal-1.1.1.tgz",
|
||||
"integrity": "sha512-yd9c5AdiqVcR+JjcwUQb9DkhJc8ngNr0MahEBGvDiJw8puWab2yZlh+nkasOnZP+EGTAP6rRp2JzJhJZzvNF8g==",
|
||||
"requires": {
|
||||
"is-arguments": "^1.0.4",
|
||||
"is-date-object": "^1.0.1",
|
||||
"is-regex": "^1.0.4",
|
||||
"object-is": "^1.0.1",
|
||||
"object-keys": "^1.1.1",
|
||||
"regexp.prototype.flags": "^1.2.0"
|
||||
}
|
||||
},
|
||||
"deep-is": {
|
||||
"version": "0.1.3",
|
||||
"resolved": "https://registry.npmjs.org/deep-is/-/deep-is-0.1.3.tgz",
|
||||
|
|
@ -6052,7 +6284,6 @@
|
|||
"version": "1.1.3",
|
||||
"resolved": "https://registry.npmjs.org/define-properties/-/define-properties-1.1.3.tgz",
|
||||
"integrity": "sha512-3MqfYKj2lLzdMSf8ZIZE/V+Zuy+BgD6f164e8K2w7dgnpKArBDerGYpM46IYYcjnkdPNMjPk9A6VFB8+3SKlXQ==",
|
||||
"dev": true,
|
||||
"requires": {
|
||||
"object-keys": "^1.0.12"
|
||||
}
|
||||
|
|
@ -6462,7 +6693,6 @@
|
|||
"version": "1.17.6",
|
||||
"resolved": "https://registry.npmjs.org/es-abstract/-/es-abstract-1.17.6.tgz",
|
||||
"integrity": "sha512-Fr89bON3WFyUi5EvAeI48QTWX0AyekGgLA8H+c+7fbfCkJwRWRMLd8CQedNEyJuoYYhmtEqY92pgte1FAhBlhw==",
|
||||
"dev": true,
|
||||
"requires": {
|
||||
"es-to-primitive": "^1.2.1",
|
||||
"function-bind": "^1.1.1",
|
||||
|
|
@ -6481,7 +6711,6 @@
|
|||
"version": "1.2.1",
|
||||
"resolved": "https://registry.npmjs.org/es-to-primitive/-/es-to-primitive-1.2.1.tgz",
|
||||
"integrity": "sha512-QCOllgZJtaUo9miYBcLChTUaHNjJF3PYs1VidD7AwiEj1kYxKeQTctLAezAOH5ZKRH0g2IgPn6KwB4IT8iRpvA==",
|
||||
"dev": true,
|
||||
"requires": {
|
||||
"is-callable": "^1.1.4",
|
||||
"is-date-object": "^1.0.1",
|
||||
|
|
@ -6720,6 +6949,11 @@
|
|||
"through": "^2.3.8"
|
||||
}
|
||||
},
|
||||
"eventemitter3": {
|
||||
"version": "2.0.3",
|
||||
"resolved": "https://registry.npmjs.org/eventemitter3/-/eventemitter3-2.0.3.tgz",
|
||||
"integrity": "sha1-teEHm1n7XhuidxwKmTvgYKWMmbo="
|
||||
},
|
||||
"events": {
|
||||
"version": "3.1.0",
|
||||
"resolved": "https://registry.npmjs.org/events/-/events-3.1.0.tgz",
|
||||
|
|
@ -6953,8 +7187,7 @@
|
|||
"extend": {
|
||||
"version": "3.0.2",
|
||||
"resolved": "https://registry.npmjs.org/extend/-/extend-3.0.2.tgz",
|
||||
"integrity": "sha512-fjquC59cD7CyW6urNXK0FBufkZcoiGG80wTuPujX590cB5Ttln20E2UB4S/WARVqhXffZl2LNgS+gQdPIIim/g==",
|
||||
"dev": true
|
||||
"integrity": "sha512-fjquC59cD7CyW6urNXK0FBufkZcoiGG80wTuPujX590cB5Ttln20E2UB4S/WARVqhXffZl2LNgS+gQdPIIim/g=="
|
||||
},
|
||||
"extend-shallow": {
|
||||
"version": "3.0.2",
|
||||
|
|
@ -7077,6 +7310,11 @@
|
|||
"integrity": "sha512-f3qQ9oQy9j2AhBe/H9VC91wLmKBCCU/gDOnKNAYG5hswO7BLKj09Hc5HYNz9cGI++xlpDCIgDaitVs03ATR84Q==",
|
||||
"dev": true
|
||||
},
|
||||
"fast-diff": {
|
||||
"version": "1.1.2",
|
||||
"resolved": "https://registry.npmjs.org/fast-diff/-/fast-diff-1.1.2.tgz",
|
||||
"integrity": "sha512-KaJUt+M9t1qaIteSvjc6P3RbMdXsNhK61GRftR6SNxqmhthcd9MGIi4T+o0jD8LUSpSnSKXE20nLtJ3fOHxQig=="
|
||||
},
|
||||
"fast-json-stable-stringify": {
|
||||
"version": "2.1.0",
|
||||
"resolved": "https://registry.npmjs.org/fast-json-stable-stringify/-/fast-json-stable-stringify-2.1.0.tgz",
|
||||
|
|
@ -7123,7 +7361,6 @@
|
|||
"version": "0.8.17",
|
||||
"resolved": "https://registry.npmjs.org/fbjs/-/fbjs-0.8.17.tgz",
|
||||
"integrity": "sha1-xNWY6taUkRJlPWWIsBpc3Nn5D90=",
|
||||
"dev": true,
|
||||
"requires": {
|
||||
"core-js": "^1.0.0",
|
||||
"isomorphic-fetch": "^2.1.1",
|
||||
|
|
@ -7137,8 +7374,7 @@
|
|||
"core-js": {
|
||||
"version": "1.2.7",
|
||||
"resolved": "https://registry.npmjs.org/core-js/-/core-js-1.2.7.tgz",
|
||||
"integrity": "sha1-ZSKUwUZR2yj6k70tX/KYOk8IxjY=",
|
||||
"dev": true
|
||||
"integrity": "sha1-ZSKUwUZR2yj6k70tX/KYOk8IxjY="
|
||||
}
|
||||
}
|
||||
},
|
||||
|
|
@ -7510,8 +7746,7 @@
|
|||
"function-bind": {
|
||||
"version": "1.1.1",
|
||||
"resolved": "https://registry.npmjs.org/function-bind/-/function-bind-1.1.1.tgz",
|
||||
"integrity": "sha512-yIovAzMX49sF8Yl58fSCWJ5svSLuaibPxXQJFLmBObTuCr0Mf1KiPopGM9NiFjiYBCbfaa2Fh6breQ6ANVTI0A==",
|
||||
"dev": true
|
||||
"integrity": "sha512-yIovAzMX49sF8Yl58fSCWJ5svSLuaibPxXQJFLmBObTuCr0Mf1KiPopGM9NiFjiYBCbfaa2Fh6breQ6ANVTI0A=="
|
||||
},
|
||||
"gauge": {
|
||||
"version": "2.7.4",
|
||||
|
|
@ -8398,7 +8633,6 @@
|
|||
"version": "1.0.3",
|
||||
"resolved": "https://registry.npmjs.org/has/-/has-1.0.3.tgz",
|
||||
"integrity": "sha512-f2dvO0VU6Oej7RkWJGrehjbzMAjFp5/VKPp5tTpWIV4JHHZK1/BxbFRtf/siA2SWTe09caDmVtYYzWEIbBS4zw==",
|
||||
"dev": true,
|
||||
"requires": {
|
||||
"function-bind": "^1.1.1"
|
||||
}
|
||||
|
|
@ -8430,8 +8664,7 @@
|
|||
"has-symbols": {
|
||||
"version": "1.0.1",
|
||||
"resolved": "https://registry.npmjs.org/has-symbols/-/has-symbols-1.0.1.tgz",
|
||||
"integrity": "sha512-PLcsoqu++dmEIZB+6totNFKq/7Do+Z0u4oT0zKOJNl3lYK6vGwwu2hjHs+68OEZbTjiUE9bgOABXbP/GvrS0Kg==",
|
||||
"dev": true
|
||||
"integrity": "sha512-PLcsoqu++dmEIZB+6totNFKq/7Do+Z0u4oT0zKOJNl3lYK6vGwwu2hjHs+68OEZbTjiUE9bgOABXbP/GvrS0Kg=="
|
||||
},
|
||||
"has-unicode": {
|
||||
"version": "2.0.1",
|
||||
|
|
@ -9020,6 +9253,11 @@
|
|||
}
|
||||
}
|
||||
},
|
||||
"is-arguments": {
|
||||
"version": "1.0.4",
|
||||
"resolved": "https://registry.npmjs.org/is-arguments/-/is-arguments-1.0.4.tgz",
|
||||
"integrity": "sha512-xPh0Rmt8NE65sNzvyUmWgI1tz3mKq74lGA0mL8LYZcoIzKOzDh6HmrYm3d18k60nHerC8A9Km8kYu87zfSFnLA=="
|
||||
},
|
||||
"is-arrayish": {
|
||||
"version": "0.2.1",
|
||||
"resolved": "https://registry.npmjs.org/is-arrayish/-/is-arrayish-0.2.1.tgz",
|
||||
|
|
@ -9044,8 +9282,7 @@
|
|||
"is-callable": {
|
||||
"version": "1.2.0",
|
||||
"resolved": "https://registry.npmjs.org/is-callable/-/is-callable-1.2.0.tgz",
|
||||
"integrity": "sha512-pyVD9AaGLxtg6srb2Ng6ynWJqkHU9bEM087AKck0w8QwDarTfNcpIYoU8x8Hv2Icm8u6kFJM18Dag8lyqGkviw==",
|
||||
"dev": true
|
||||
"integrity": "sha512-pyVD9AaGLxtg6srb2Ng6ynWJqkHU9bEM087AKck0w8QwDarTfNcpIYoU8x8Hv2Icm8u6kFJM18Dag8lyqGkviw=="
|
||||
},
|
||||
"is-ci": {
|
||||
"version": "1.2.1",
|
||||
|
|
@ -9093,8 +9330,7 @@
|
|||
"is-date-object": {
|
||||
"version": "1.0.2",
|
||||
"resolved": "https://registry.npmjs.org/is-date-object/-/is-date-object-1.0.2.tgz",
|
||||
"integrity": "sha512-USlDT524woQ08aoZFzh3/Z6ch9Y/EWXEHQ/AaRN0SkKq4t2Jw2R2339tSXmwuVoY7LLlBCbOIlx2myP/L5zk0g==",
|
||||
"dev": true
|
||||
"integrity": "sha512-USlDT524woQ08aoZFzh3/Z6ch9Y/EWXEHQ/AaRN0SkKq4t2Jw2R2339tSXmwuVoY7LLlBCbOIlx2myP/L5zk0g=="
|
||||
},
|
||||
"is-descriptor": {
|
||||
"version": "0.1.6",
|
||||
|
|
@ -9259,7 +9495,6 @@
|
|||
"version": "1.1.0",
|
||||
"resolved": "https://registry.npmjs.org/is-regex/-/is-regex-1.1.0.tgz",
|
||||
"integrity": "sha512-iI97M8KTWID2la5uYXlkbSDQIg4F6o1sYboZKKTDpnDQMLtUL86zxhgDet3Q2SriaYsyGqZ6Mn2SjbRKeLHdqw==",
|
||||
"dev": true,
|
||||
"requires": {
|
||||
"has-symbols": "^1.0.1"
|
||||
}
|
||||
|
|
@ -9297,7 +9532,6 @@
|
|||
"version": "1.0.3",
|
||||
"resolved": "https://registry.npmjs.org/is-symbol/-/is-symbol-1.0.3.tgz",
|
||||
"integrity": "sha512-OwijhaRSgqvhm/0ZdAcXNZt9lYdKFpcRDT5ULUuYXPoT794UNOdU+gpT6Rzo7b4V2HUl/op6GqY894AZwv9faQ==",
|
||||
"dev": true,
|
||||
"requires": {
|
||||
"has-symbols": "^1.0.1"
|
||||
}
|
||||
|
|
@ -11210,8 +11444,7 @@
|
|||
"lodash": {
|
||||
"version": "4.17.15",
|
||||
"resolved": "https://registry.npmjs.org/lodash/-/lodash-4.17.15.tgz",
|
||||
"integrity": "sha512-8xOcRHvCjnocdS5cpwXQXVzmmh5e5+saE2QGoeQmbKmRS6J3VQppPOIt0MnmE+4xlZoumy0GPG0D0MVIQbNA1A==",
|
||||
"dev": true
|
||||
"integrity": "sha512-8xOcRHvCjnocdS5cpwXQXVzmmh5e5+saE2QGoeQmbKmRS6J3VQppPOIt0MnmE+4xlZoumy0GPG0D0MVIQbNA1A=="
|
||||
},
|
||||
"lodash._basecopy": {
|
||||
"version": "3.0.1",
|
||||
|
|
@ -11833,6 +12066,11 @@
|
|||
"mkdirp": "*"
|
||||
}
|
||||
},
|
||||
"moment": {
|
||||
"version": "2.27.0",
|
||||
"resolved": "https://registry.npmjs.org/moment/-/moment-2.27.0.tgz",
|
||||
"integrity": "sha512-al0MUK7cpIcglMv3YF13qSgdAIqxHTO7brRtaz3DlSULbqfazqkc5kEjNrLDOM7fsjshoFIihnU8snrP7zUvhQ=="
|
||||
},
|
||||
"move-concurrently": {
|
||||
"version": "1.0.1",
|
||||
"resolved": "https://registry.npmjs.org/move-concurrently/-/move-concurrently-1.0.1.tgz",
|
||||
|
|
@ -12316,14 +12554,21 @@
|
|||
"object-inspect": {
|
||||
"version": "1.8.0",
|
||||
"resolved": "https://registry.npmjs.org/object-inspect/-/object-inspect-1.8.0.tgz",
|
||||
"integrity": "sha512-jLdtEOB112fORuypAyl/50VRVIBIdVQOSUUGQHzJ4xBSbit81zRarz7GThkEFZy1RceYrWYcPcBFPQwHyAc1gA==",
|
||||
"dev": true
|
||||
"integrity": "sha512-jLdtEOB112fORuypAyl/50VRVIBIdVQOSUUGQHzJ4xBSbit81zRarz7GThkEFZy1RceYrWYcPcBFPQwHyAc1gA=="
|
||||
},
|
||||
"object-is": {
|
||||
"version": "1.1.2",
|
||||
"resolved": "https://registry.npmjs.org/object-is/-/object-is-1.1.2.tgz",
|
||||
"integrity": "sha512-5lHCz+0uufF6wZ7CRFWJN3hp8Jqblpgve06U5CMQ3f//6iDjPr2PEo9MWCjEssDsa+UZEL4PkFpr+BMop6aKzQ==",
|
||||
"requires": {
|
||||
"define-properties": "^1.1.3",
|
||||
"es-abstract": "^1.17.5"
|
||||
}
|
||||
},
|
||||
"object-keys": {
|
||||
"version": "1.1.1",
|
||||
"resolved": "https://registry.npmjs.org/object-keys/-/object-keys-1.1.1.tgz",
|
||||
"integrity": "sha512-NuAESUOUMrlIXOfHKzD6bpPu3tYt3xvjNdRIQ+FeT0lNb4K8WR70CaDxhuNguS2XG+GjkyMwOzsN5ZktImfhLA==",
|
||||
"dev": true
|
||||
"integrity": "sha512-NuAESUOUMrlIXOfHKzD6bpPu3tYt3xvjNdRIQ+FeT0lNb4K8WR70CaDxhuNguS2XG+GjkyMwOzsN5ZktImfhLA=="
|
||||
},
|
||||
"object-visit": {
|
||||
"version": "1.0.1",
|
||||
|
|
@ -12338,7 +12583,6 @@
|
|||
"version": "4.1.0",
|
||||
"resolved": "https://registry.npmjs.org/object.assign/-/object.assign-4.1.0.tgz",
|
||||
"integrity": "sha512-exHJeq6kBKj58mqGyTQ9DFvrZC/eR6OwxzoM9YRoGBqrXYonaFyGiFMuc9VZrXf7DarreEwMpurG3dd+CNyW5w==",
|
||||
"dev": true,
|
||||
"requires": {
|
||||
"define-properties": "^1.1.2",
|
||||
"function-bind": "^1.1.1",
|
||||
|
|
@ -12732,6 +12976,11 @@
|
|||
"no-case": "^2.2.0"
|
||||
}
|
||||
},
|
||||
"parchment": {
|
||||
"version": "1.1.4",
|
||||
"resolved": "https://registry.npmjs.org/parchment/-/parchment-1.1.4.tgz",
|
||||
"integrity": "sha512-J5FBQt/pM2inLzg4hEWmzQx/8h8D0CiDxaG3vyp9rKrQRSDgBlhjdP5jQGgosEajXPSQouXGHOmVdgo7QmJuOg=="
|
||||
},
|
||||
"parse-asn1": {
|
||||
"version": "5.1.5",
|
||||
"resolved": "https://registry.npmjs.org/parse-asn1/-/parse-asn1-5.1.5.tgz",
|
||||
|
|
@ -13739,7 +13988,6 @@
|
|||
"version": "7.3.1",
|
||||
"resolved": "https://registry.npmjs.org/promise/-/promise-7.3.1.tgz",
|
||||
"integrity": "sha512-nolQXZ/4L+bP/UGlkfaIujX9BKxGwmQ9OT4mOt5yvy8iK1h3wqTEJCijzGANTCCl9nWjY41juyAn2K3Q1hLLTg==",
|
||||
"dev": true,
|
||||
"requires": {
|
||||
"asap": "~2.0.3"
|
||||
}
|
||||
|
|
@ -13871,6 +14119,29 @@
|
|||
"integrity": "sha1-nsYfeQSYdXB9aUFFlv2Qek1xHnM=",
|
||||
"dev": true
|
||||
},
|
||||
"quill": {
|
||||
"version": "1.3.7",
|
||||
"resolved": "https://registry.npmjs.org/quill/-/quill-1.3.7.tgz",
|
||||
"integrity": "sha512-hG/DVzh/TiknWtE6QmWAF/pxoZKYxfe3J/d/+ShUWkDvvkZQVTPeVmUJVu1uE6DDooC4fWTiCLh84ul89oNz5g==",
|
||||
"requires": {
|
||||
"clone": "^2.1.1",
|
||||
"deep-equal": "^1.0.1",
|
||||
"eventemitter3": "^2.0.3",
|
||||
"extend": "^3.0.2",
|
||||
"parchment": "^1.1.4",
|
||||
"quill-delta": "^3.6.2"
|
||||
}
|
||||
},
|
||||
"quill-delta": {
|
||||
"version": "3.6.3",
|
||||
"resolved": "https://registry.npmjs.org/quill-delta/-/quill-delta-3.6.3.tgz",
|
||||
"integrity": "sha512-wdIGBlcX13tCHOXGMVnnTVFtGRLoP0imqxM696fIPwIf5ODIYUHIvHbZcyvGlZFiFhK5XzDC2lpjbxRhnM05Tg==",
|
||||
"requires": {
|
||||
"deep-equal": "^1.0.1",
|
||||
"extend": "^3.0.2",
|
||||
"fast-diff": "1.1.2"
|
||||
}
|
||||
},
|
||||
"ramda": {
|
||||
"version": "0.25.0",
|
||||
"resolved": "https://registry.npmjs.org/ramda/-/ramda-0.25.0.tgz",
|
||||
|
|
@ -13971,11 +14242,30 @@
|
|||
"scheduler": "^0.13.5"
|
||||
}
|
||||
},
|
||||
"react-dom-factories": {
|
||||
"version": "1.0.2",
|
||||
"resolved": "https://registry.npmjs.org/react-dom-factories/-/react-dom-factories-1.0.2.tgz",
|
||||
"integrity": "sha1-63cFxNs2+1AbOqOP91lhaqD/luA="
|
||||
},
|
||||
"react-is": {
|
||||
"version": "16.13.1",
|
||||
"resolved": "https://registry.npmjs.org/react-is/-/react-is-16.13.1.tgz",
|
||||
"integrity": "sha512-24e6ynE2H+OKt4kqsOvNd8kBpV65zoxbA4BVsEOB3ARVWQki/DHzaUoC5KuON/BiccDaCCTZBuOcfZs70kR8bQ=="
|
||||
},
|
||||
"react-quill": {
|
||||
"version": "1.3.3",
|
||||
"resolved": "https://registry.npmjs.org/react-quill/-/react-quill-1.3.3.tgz",
|
||||
"integrity": "sha512-T9RubLaWJ8gCfp7sOqmFupjiTiEp/EdGqhCG+PWGKc5UHiK6xIWNKWYsOHHEhQ+sZCKs8u/DPx47gc1VfFmcLg==",
|
||||
"requires": {
|
||||
"@types/quill": "1.3.10",
|
||||
"@types/react": "*",
|
||||
"create-react-class": "^15.6.0",
|
||||
"lodash": "^4.17.4",
|
||||
"prop-types": "^15.5.10",
|
||||
"quill": "^1.2.6",
|
||||
"react-dom-factories": "^1.0.0"
|
||||
}
|
||||
},
|
||||
"read": {
|
||||
"version": "1.0.7",
|
||||
"resolved": "https://registry.npmjs.org/read/-/read-1.0.7.tgz",
|
||||
|
|
@ -14158,6 +14448,15 @@
|
|||
"safe-regex": "^1.1.0"
|
||||
}
|
||||
},
|
||||
"regexp.prototype.flags": {
|
||||
"version": "1.3.0",
|
||||
"resolved": "https://registry.npmjs.org/regexp.prototype.flags/-/regexp.prototype.flags-1.3.0.tgz",
|
||||
"integrity": "sha512-2+Q0C5g951OlYlJz6yu5/M33IcsESLlLfsyIaLJaG4FA2r4yP8MvVMJUUP/fVBkSpbbbZlS5gynbEWLipiiXiQ==",
|
||||
"requires": {
|
||||
"define-properties": "^1.1.3",
|
||||
"es-abstract": "^1.17.0-next.1"
|
||||
}
|
||||
},
|
||||
"regexpu-core": {
|
||||
"version": "4.7.0",
|
||||
"resolved": "https://registry.npmjs.org/regexpu-core/-/regexpu-core-4.7.0.tgz",
|
||||
|
|
@ -14716,8 +15015,7 @@
|
|||
"setimmediate": {
|
||||
"version": "1.0.5",
|
||||
"resolved": "https://registry.npmjs.org/setimmediate/-/setimmediate-1.0.5.tgz",
|
||||
"integrity": "sha1-KQy7Iy4waULX1+qbg3Mqt4VvgoU=",
|
||||
"dev": true
|
||||
"integrity": "sha1-KQy7Iy4waULX1+qbg3Mqt4VvgoU="
|
||||
},
|
||||
"setprototypeof": {
|
||||
"version": "1.1.0",
|
||||
|
|
@ -14772,7 +15070,6 @@
|
|||
"version": "0.2.2",
|
||||
"resolved": "https://registry.npmjs.org/simple-swizzle/-/simple-swizzle-0.2.2.tgz",
|
||||
"integrity": "sha1-pNprY1/8zMoz9w0Xy5JZLeleVXo=",
|
||||
"dev": true,
|
||||
"requires": {
|
||||
"is-arrayish": "^0.3.1"
|
||||
},
|
||||
|
|
@ -14780,8 +15077,7 @@
|
|||
"is-arrayish": {
|
||||
"version": "0.3.2",
|
||||
"resolved": "https://registry.npmjs.org/is-arrayish/-/is-arrayish-0.3.2.tgz",
|
||||
"integrity": "sha512-eVRqCvVlZbuw3GrM63ovNSNAeA1K16kaR/LRY/92w0zxQ5/1YzwblUX652i4Xs9RwAGjW9d9y6X88t8OaAJfWQ==",
|
||||
"dev": true
|
||||
"integrity": "sha512-eVRqCvVlZbuw3GrM63ovNSNAeA1K16kaR/LRY/92w0zxQ5/1YzwblUX652i4Xs9RwAGjW9d9y6X88t8OaAJfWQ=="
|
||||
}
|
||||
}
|
||||
},
|
||||
|
|
@ -14953,15 +15249,6 @@
|
|||
"integrity": "sha1-PpNdfd1zYxuXZZlW1VEo6HtQhKM=",
|
||||
"dev": true
|
||||
},
|
||||
"sp-pnp-js": {
|
||||
"version": "3.0.10",
|
||||
"resolved": "https://registry.npmjs.org/sp-pnp-js/-/sp-pnp-js-3.0.10.tgz",
|
||||
"integrity": "sha1-Rm180DEgkNbEXTH20azoAgW9QjA=",
|
||||
"requires": {
|
||||
"@microsoft/microsoft-graph-types": "1.1.0",
|
||||
"@types/sharepoint": "2013.1.9"
|
||||
}
|
||||
},
|
||||
"sparkles": {
|
||||
"version": "1.0.1",
|
||||
"resolved": "https://registry.npmjs.org/sparkles/-/sparkles-1.0.1.tgz",
|
||||
|
|
@ -15234,7 +15521,6 @@
|
|||
"version": "1.0.1",
|
||||
"resolved": "https://registry.npmjs.org/string.prototype.trimend/-/string.prototype.trimend-1.0.1.tgz",
|
||||
"integrity": "sha512-LRPxFUaTtpqYsTeNKaFOw3R4bxIzWOnbQ837QfBylo8jIxtcbK/A/sMV7Q+OAV/vWo+7s25pOE10KYSjaSO06g==",
|
||||
"dev": true,
|
||||
"requires": {
|
||||
"define-properties": "^1.1.3",
|
||||
"es-abstract": "^1.17.5"
|
||||
|
|
@ -15244,7 +15530,6 @@
|
|||
"version": "1.0.1",
|
||||
"resolved": "https://registry.npmjs.org/string.prototype.trimstart/-/string.prototype.trimstart-1.0.1.tgz",
|
||||
"integrity": "sha512-XxZn+QpvrBI1FOcg6dIpxUPgWCPuNXvMD72aaRaUQv1eD4e/Qy8i/hFTe0BUmD60p/QA6bh1avmuPTfNjqVWRw==",
|
||||
"dev": true,
|
||||
"requires": {
|
||||
"define-properties": "^1.1.3",
|
||||
"es-abstract": "^1.17.5"
|
||||
|
|
@ -16023,8 +16308,7 @@
|
|||
"ua-parser-js": {
|
||||
"version": "0.7.21",
|
||||
"resolved": "https://registry.npmjs.org/ua-parser-js/-/ua-parser-js-0.7.21.tgz",
|
||||
"integrity": "sha512-+O8/qh/Qj8CgC6eYBVBykMrNtp5Gebn4dlGD/kKXVkJNDwyrAwSIqwz8CDf+tsAIWVycKcku6gIXJ0qwx/ZXaQ==",
|
||||
"dev": true
|
||||
"integrity": "sha512-+O8/qh/Qj8CgC6eYBVBykMrNtp5Gebn4dlGD/kKXVkJNDwyrAwSIqwz8CDf+tsAIWVycKcku6gIXJ0qwx/ZXaQ=="
|
||||
},
|
||||
"uglify-js": {
|
||||
"version": "3.10.0",
|
||||
|
|
|
|||
|
|
@ -17,6 +17,8 @@
|
|||
"@microsoft/sp-office-ui-fabric-core": "1.10.0",
|
||||
"@microsoft/sp-property-pane": "1.10.0",
|
||||
"@microsoft/sp-webpart-base": "1.10.0",
|
||||
"@pnp/sp": "^2.0.6",
|
||||
"@pnp/spfx-controls-react": "^1.19.0",
|
||||
"@types/es6-promise": "0.0.33",
|
||||
"@types/react": "16.8.8",
|
||||
"@types/react-dom": "16.8.3",
|
||||
|
|
@ -24,8 +26,7 @@
|
|||
"adaptivecards": "^1.1.0",
|
||||
"office-ui-fabric-react": "6.189.2",
|
||||
"react": "16.8.5",
|
||||
"react-dom": "16.8.5",
|
||||
"sp-pnp-js": "^3.0.10"
|
||||
"react-dom": "16.8.5"
|
||||
},
|
||||
"resolutions": {
|
||||
"@types/react": "16.8.8"
|
||||
|
|
|
|||
|
|
@ -7,7 +7,7 @@ import { IPropertyPaneConfiguration, PropertyPaneTextField } from "@microsoft/sp
|
|||
import * as strings from 'AdaptiveCardsImageGalleryWebPartStrings';
|
||||
import AdaptiveCardsImageGallery from './components/AdaptiveCardsImageGallery';
|
||||
import { IAdaptiveCardsImageGalleryProps } from './components/IAdaptiveCardsImageGalleryProps';
|
||||
import pnp from 'sp-pnp-js';
|
||||
import { sp } from '@pnp/sp/presets/all';
|
||||
|
||||
export interface IAdaptiveCardsImageGalleryWebPartProps {
|
||||
imageGalleryName: string;
|
||||
|
|
@ -17,7 +17,8 @@ export interface IAdaptiveCardsImageGalleryWebPartProps {
|
|||
export default class AdaptiveCardsImageGalleryWebPart extends BaseClientSideWebPart<IAdaptiveCardsImageGalleryWebPartProps> {
|
||||
public async onInit(): Promise<void> {
|
||||
return super.onInit().then(_ => {
|
||||
pnp.setup({
|
||||
// Setup context to PnPjs
|
||||
sp.setup({
|
||||
spfxContext: this.context
|
||||
});
|
||||
});
|
||||
|
|
@ -27,6 +28,7 @@ export default class AdaptiveCardsImageGalleryWebPart extends BaseClientSideWebP
|
|||
const element: React.ReactElement<IAdaptiveCardsImageGalleryProps > = React.createElement(
|
||||
AdaptiveCardsImageGallery,
|
||||
{
|
||||
context: this.context,
|
||||
serviceScope: this.context.serviceScope,
|
||||
imageGalleryName: this.properties.imageGalleryName || "Adaptive Card Images",
|
||||
imagesToDisplay: this.properties.imagesToDisplay || 10
|
||||
|
|
|
|||
|
|
@ -1,36 +1,40 @@
|
|||
import * as React from 'react';
|
||||
import styles from './AdaptiveCardsImageGallery.module.scss';
|
||||
import * as strings from 'AdaptiveCardsImageGalleryWebPartStrings';
|
||||
import { IAdaptiveCardsImageGalleryProps } from './IAdaptiveCardsImageGalleryProps';
|
||||
import { IAdaptiveCardsImageGalleryState } from './IAdaptiveCardsImageGalleryState';
|
||||
import { escape } from '@microsoft/sp-lodash-subset';
|
||||
|
||||
import { Placeholder } from "@pnp/spfx-controls-react/lib/Placeholder";
|
||||
import * as AdaptiveCards from "adaptivecards";
|
||||
import { ImageGalleryService, IImageGalleryService } from '../services/ImageGalleryService';
|
||||
import { ServiceScope, Environment, EnvironmentType } from '@microsoft/sp-core-library';
|
||||
import { Spinner, SpinnerSize } from 'office-ui-fabric-react/lib/Spinner';
|
||||
|
||||
export default class AdaptiveCardsImageGallery extends React.Component<IAdaptiveCardsImageGalleryProps, IAdaptiveCardsImageGalleryState> {
|
||||
// The rendering container
|
||||
private _acContainer: HTMLDivElement;
|
||||
private ImageGalleryServiceInstance: IImageGalleryService;
|
||||
private _galleryListName: string;
|
||||
private _noOfItems: number;
|
||||
private card: any;
|
||||
private renderedCard: any = "";
|
||||
private imagesJSON = [];
|
||||
|
||||
constructor(props: IAdaptiveCardsImageGalleryProps) {
|
||||
super(props);
|
||||
|
||||
this.state = {
|
||||
galleryItems: null,
|
||||
isLoading: true,
|
||||
showErrorMessage: false
|
||||
galleryItems: []
|
||||
};
|
||||
|
||||
let serviceScope: ServiceScope;
|
||||
serviceScope = this.props.serviceScope;
|
||||
|
||||
this._galleryListName = this.props.imageGalleryName;
|
||||
this._noOfItems = this.props.imagesToDisplay;
|
||||
}
|
||||
|
||||
private _executeActionHandler = (action: AdaptiveCards.Action) => {
|
||||
window.location.href = action.iconUrl;
|
||||
}
|
||||
|
||||
public componentDidMount(): void {
|
||||
let serviceScope: ServiceScope = this.props.serviceScope;
|
||||
|
||||
// Based on the type of environment, return the correct instance of the ImageGalleryServiceInstance interface
|
||||
if (Environment.type == EnvironmentType.SharePoint || Environment.type == EnvironmentType.ClassicSharePoint) {
|
||||
|
|
@ -39,72 +43,97 @@ export default class AdaptiveCardsImageGallery extends React.Component<IAdaptive
|
|||
}
|
||||
|
||||
this.ImageGalleryServiceInstance.getGalleryImages(this._galleryListName, this._noOfItems).then((galleryImages: any[]) => {
|
||||
galleryImages.forEach(adaptiveImage => {
|
||||
let image = {};
|
||||
image["type"] = "Image";
|
||||
image["url"] = adaptiveImage.ImageLink.Url;
|
||||
|
||||
// Compose image action
|
||||
let imageAction = {};
|
||||
imageAction["title"] = adaptiveImage.NavigationURL.Description;
|
||||
imageAction["type"] = "Action.OpenUrl";
|
||||
imageAction["url"] = adaptiveImage.NavigationURL.Url;
|
||||
imageAction["iconUrl"] = adaptiveImage.NavigationURL.Url;
|
||||
|
||||
image["selectAction"] = imageAction;
|
||||
this.imagesJSON.push(image);
|
||||
});
|
||||
|
||||
this.card = {
|
||||
"$schema": "http://adaptivecards.io/schemas/adaptive-card.json",
|
||||
"type": "AdaptiveCard",
|
||||
"version": "1.0",
|
||||
"body": [
|
||||
{
|
||||
"type": "TextBlock",
|
||||
"text": "Adaptive Image Gallery",
|
||||
"size": "medium"
|
||||
},
|
||||
{
|
||||
"type": "ImageSet",
|
||||
"imageSize": "medium",
|
||||
"images": this.imagesJSON
|
||||
}
|
||||
]
|
||||
};
|
||||
|
||||
// Create an AdaptiveCard instance
|
||||
var adaptiveCard = new AdaptiveCards.AdaptiveCard();
|
||||
|
||||
// Set its hostConfig property unless you want to use the default Host Config
|
||||
// Host Config defines the style and behavior of a card
|
||||
adaptiveCard.hostConfig = new AdaptiveCards.HostConfig({
|
||||
fontFamily: "Segoe UI, Helvetica Neue, sans-serif"
|
||||
});
|
||||
|
||||
// Set the adaptive card's event handlers. onExecuteAction is invoked
|
||||
// whenever an action is clicked in the card
|
||||
adaptiveCard.onExecuteAction = this._executeActionHandler;
|
||||
|
||||
// Parse the card
|
||||
adaptiveCard.parse(this.card);
|
||||
|
||||
// Render the card to an HTML element
|
||||
this.renderedCard = adaptiveCard.render();
|
||||
this.setState({ isLoading: false });
|
||||
this.setState({ galleryItems: galleryImages });
|
||||
this.showAdaptiveCard();
|
||||
});
|
||||
}
|
||||
|
||||
private _executeActionHandler = (action: AdaptiveCards.Action) => {
|
||||
window.location.href = action.iconUrl;
|
||||
public componentWillReceiveProps(nextProps: IAdaptiveCardsImageGalleryProps) {
|
||||
this.ImageGalleryServiceInstance.getGalleryImages(nextProps.imageGalleryName, nextProps.imagesToDisplay).then((galleryImages: any[]) => {
|
||||
this.setState({ galleryItems: galleryImages });
|
||||
this.showAdaptiveCard();
|
||||
});
|
||||
}
|
||||
|
||||
public showAdaptiveCard() {
|
||||
this.state.galleryItems.forEach(adaptiveImage => {
|
||||
let image = {};
|
||||
image["type"] = "Image";
|
||||
image["url"] = adaptiveImage.ImageLink.Url;
|
||||
|
||||
// Compose image action
|
||||
let imageAction = {};
|
||||
imageAction["title"] = adaptiveImage.NavigationURL.Description;
|
||||
imageAction["type"] = "Action.OpenUrl";
|
||||
imageAction["url"] = adaptiveImage.NavigationURL.Url;
|
||||
imageAction["iconUrl"] = adaptiveImage.NavigationURL.Url;
|
||||
|
||||
image["selectAction"] = imageAction;
|
||||
this.imagesJSON.push(image);
|
||||
});
|
||||
|
||||
this.card = {
|
||||
"$schema": "http://adaptivecards.io/schemas/adaptive-card.json",
|
||||
"type": "AdaptiveCard",
|
||||
"version": "1.0",
|
||||
"body": [
|
||||
{
|
||||
"type": "TextBlock",
|
||||
"text": "Adaptive Image Gallery",
|
||||
"size": "medium"
|
||||
},
|
||||
{
|
||||
"type": "ImageSet",
|
||||
"imageSize": "medium",
|
||||
"images": this.imagesJSON
|
||||
}
|
||||
]
|
||||
};
|
||||
|
||||
// Create an AdaptiveCard instance
|
||||
var adaptiveCard = new AdaptiveCards.AdaptiveCard();
|
||||
|
||||
// Set its hostConfig property unless you want to use the default Host Config
|
||||
// Host Config defines the style and behavior of a card
|
||||
adaptiveCard.hostConfig = new AdaptiveCards.HostConfig({
|
||||
fontFamily: "Segoe UI, Helvetica Neue, sans-serif"
|
||||
});
|
||||
|
||||
// Set the adaptive card's event handlers. onExecuteAction is invoked
|
||||
// whenever an action is clicked in the card
|
||||
adaptiveCard.onExecuteAction = this._executeActionHandler;
|
||||
|
||||
// Parse the card
|
||||
adaptiveCard.parse(this.card);
|
||||
|
||||
// Empty the div so we can replace it
|
||||
while (this._acContainer.firstChild) {
|
||||
this._acContainer.removeChild(this._acContainer.lastChild);
|
||||
}
|
||||
|
||||
// Render the card to an HTML element
|
||||
adaptiveCard.render(this._acContainer);
|
||||
}
|
||||
|
||||
private _onConfigure = () => {
|
||||
// Context of the web part
|
||||
this.props.context.propertyPane.open();
|
||||
}
|
||||
|
||||
public render(): React.ReactElement<IAdaptiveCardsImageGalleryProps> {
|
||||
return (
|
||||
<div className={styles.adaptiveCardsImageGallery}>
|
||||
<div className={styles.container}>
|
||||
{this.state.isLoading && <Spinner className={styles.spinner} size={SpinnerSize.large} />}
|
||||
{!this.state.isLoading && <div ref={(n) => { n && n.appendChild(this.renderedCard) }} />}
|
||||
{
|
||||
this.state.galleryItems.length == 0 ?
|
||||
<Placeholder iconName='Edit'
|
||||
iconText={strings.ConfigureWebPartLabel}
|
||||
description={strings.ConfigureDescription}
|
||||
buttonLabel={strings.ConfigureLabel}
|
||||
onConfigure={this._onConfigure} />
|
||||
:
|
||||
<div ref={(elm) => { this._acContainer = elm; }}></div>
|
||||
}
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
|
|
|
|||
|
|
@ -1,6 +1,8 @@
|
|||
import { ServiceScope } from '@microsoft/sp-core-library';
|
||||
import { WebPartContext } from "@microsoft/sp-webpart-base";
|
||||
|
||||
export interface IAdaptiveCardsImageGalleryProps {
|
||||
context: WebPartContext;
|
||||
serviceScope: ServiceScope;
|
||||
imageGalleryName: string;
|
||||
imagesToDisplay: number;
|
||||
|
|
|
|||
|
|
@ -1,5 +1,3 @@
|
|||
export interface IAdaptiveCardsImageGalleryState {
|
||||
galleryItems: any[];
|
||||
isLoading: boolean;
|
||||
showErrorMessage: boolean;
|
||||
}
|
||||
|
|
@ -5,5 +5,8 @@ define([], function() {
|
|||
"DescriptionFieldLabel": "Description Field",
|
||||
"ImageGalleryNameFieldLabel": "Image Gallery",
|
||||
"ImagesToDisplayFieldLabel": "Number of images to display",
|
||||
"ConfigureWebPartLabel": "Configure your Adaptive cards images",
|
||||
"ConfigureDescription": "Please select the list with Adaptive cards images information",
|
||||
"ConfigureLabel": "Configure"
|
||||
}
|
||||
});
|
||||
|
|
@ -3,6 +3,9 @@ declare interface IAdaptiveCardsImageGalleryWebPartStrings {
|
|||
BasicGroupName: string;
|
||||
ImageGalleryNameFieldLabel: string;
|
||||
ImagesToDisplayFieldLabel: string;
|
||||
ConfigureWebPartLabel: string;
|
||||
ConfigureDescription: string;
|
||||
ConfigureLabel: string;
|
||||
}
|
||||
|
||||
declare module 'AdaptiveCardsImageGalleryWebPartStrings' {
|
||||
|
|
|
|||
|
|
@ -1,7 +1,7 @@
|
|||
import { ServiceKey, ServiceScope } from '@microsoft/sp-core-library';
|
||||
import { PageContext } from '@microsoft/sp-page-context';
|
||||
import { SPHttpClient, SPHttpClientResponse } from '@microsoft/sp-http';
|
||||
import * as pnp from "sp-pnp-js";
|
||||
import { sp } from '@pnp/sp/presets/all';
|
||||
|
||||
export interface IImageGalleryService {
|
||||
getGalleryImages: (listName: string, rowLimit: number) => Promise<any[]>;
|
||||
|
|
@ -9,7 +9,7 @@ export interface IImageGalleryService {
|
|||
|
||||
export class ImageGalleryService implements IImageGalleryService {
|
||||
public static readonly serviceKey: ServiceKey<IImageGalleryService> = ServiceKey.create<IImageGalleryService>('ImageGallery:ImageGalleryService', ImageGalleryService);
|
||||
private _pageContext: PageContext;
|
||||
private _pageContext: PageContext;
|
||||
|
||||
constructor(serviceScope: ServiceScope) {
|
||||
serviceScope.whenFinished(() => {
|
||||
|
|
@ -17,38 +17,18 @@ export class ImageGalleryService implements IImageGalleryService {
|
|||
});
|
||||
}
|
||||
|
||||
public getGalleryImages(listName: string, rowLimit: number): Promise<any[]> {
|
||||
const xml = `<View>
|
||||
<ViewFields>
|
||||
<FieldRef Name='ID' />
|
||||
<FieldRef Name='Title' />
|
||||
<FieldRef Name='ImageLink' />
|
||||
<FieldRef Name='NavigationURL' />
|
||||
</ViewFields>
|
||||
<Query>
|
||||
<OrderBy>
|
||||
<FieldRef Name='SortOrder' />
|
||||
</OrderBy>
|
||||
</Query>
|
||||
<RowLimit>` + rowLimit + `</RowLimit>
|
||||
</View>`;
|
||||
public async getGalleryImages(listName: string, rowLimit: number): Promise<any[]> {
|
||||
try {
|
||||
let items: any = await sp.web.lists.getByTitle(listName).items
|
||||
.select("Id", "Title", "ImageLink", "NavigationURL")
|
||||
.orderBy("SortOrder")
|
||||
.top(rowLimit)
|
||||
.get();
|
||||
|
||||
const q: any = {
|
||||
ViewXml: xml,
|
||||
};
|
||||
|
||||
return this._ensureList(listName).then((list) => {
|
||||
if (list) {
|
||||
return pnp.sp.web.lists.getByTitle(listName).getItemsByCAMLQuery(q).then((items: any[]) => {
|
||||
return Promise.resolve(items);
|
||||
});
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
private _ensureList(listName: string): Promise<pnp.List> {
|
||||
if (listName) {
|
||||
return pnp.sp.web.lists.ensure(listName).then((listEnsureResult) => Promise.resolve(listEnsureResult.list));
|
||||
return Promise.resolve(items);
|
||||
}
|
||||
catch (error) {
|
||||
return Promise.reject(error);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -0,0 +1,58 @@
|
|||
# Banner web part
|
||||
|
||||
> NOTE: This sample is available in the [PnP Starter Kit](https://github.com/pnp/sp-starter-kit). You can find the sample code for this web part at https://github.com/SharePoint/sp-starter-kit/tree/master/solution/src/webparts/banner.
|
||||
|
||||
|
||||
This web part provides you the ability to add a variable height image banner with a linkable title.
|
||||
|
||||
|
||||
|
||||
## How to use this web part on your web pages
|
||||
|
||||
1. Place the page you want to add this web part to in edit mode.
|
||||
2. Search for and insert the **Banner** web part.
|
||||
3. Configure the web part to update its properties.
|
||||
|
||||
## Configurable Properties
|
||||
|
||||
The `Banner` webpart can be configured with the following properties:
|
||||
|
||||
| Label | Property | Type | Required | Description |
|
||||
| ---- | ---- | ---- | ---- | ---- |
|
||||
| Overlay image text | bannerText | string | no | The text message or title you want displayed on the banner image |
|
||||
| Image URL | bannerImage | string | no | The url of the banner image |
|
||||
| Link URL | bannerLink | string | no | The hyperlink url of the bannerText link |
|
||||
| Banner height | bannerHeight | number | no | Provides the fixed height of the banner image |
|
||||
| Enable parallax effect | useParallax | toggle | no | Enable if you want to include parallax effect on vertical scrolling |
|
||||
|
||||
|
||||
# Installing the web part
|
||||
|
||||
See getting started from [SP-Starter-Kit repository readme](https://github.com/SharePoint/sp-starter-kit).
|
||||
|
||||
You can also download just the [SharePoint Framework solution package (spppkg) file](https://github.com/SharePoint/sp-starter-kit/blob/master/package/sharepoint-starter-kit.sppkg) and install that to your tenant. This web part does not have external dependencies.
|
||||
|
||||
# Screenshots
|
||||
|
||||
|
||||
|
||||
# Source Code
|
||||
|
||||
https://github.com/SharePoint/sp-starter-kit/tree/master/solution/src/webparts/banner
|
||||
|
||||
# Minimal Path to Awesome
|
||||
|
||||
- Clone this repository
|
||||
- Move to Solution folder
|
||||
- in the command line run:
|
||||
- `npm install`
|
||||
- `gulp serve`
|
||||
|
||||
# Version history
|
||||
|
||||
Version|Date|Comments
|
||||
-------|----|--------
|
||||
1.0|May 2018|Initial release
|
||||
|
||||
|
||||
<img src="https://telemetry.sharepointpnp.com/sp-dev-fx-webparts/samples/react-banner" />
|
||||
|
|
@ -1,6 +1,6 @@
|
|||
{
|
||||
"@microsoft/generator-sharepoint": {
|
||||
"version": "1.8.2",
|
||||
"version": "1.11.0",
|
||||
"libraryName": "react-directory",
|
||||
"libraryId": "5b62bc16-3a71-461d-be2f-16bfcb011e8a",
|
||||
"environment": "spo",
|
||||
|
|
|
|||
|
|
@ -31,7 +31,7 @@
|
|||
|
||||
|
||||
## Used SharePoint Framework Version
|
||||
|
||||
|
||||
|
||||
## Applies to
|
||||
|
||||
|
|
@ -44,24 +44,26 @@
|
|||
|
||||
Property |Type|Required| comments
|
||||
--------------------|----|--------|----------
|
||||
Web Part Title | Text| no|
|
||||
|
||||
Title | Text| no|WebPart Title
|
||||
searchFirstName | boolean|no| Lastname or Firstname search query
|
||||
|
||||
|
||||
|
||||
|
||||
## Solution
|
||||
The web part Use PnPjs library, Office-ui-fabric-react components
|
||||
The web part use PnPjs library, Office-ui-fabric-react components
|
||||
|
||||
Solution|Author(s)
|
||||
--------|---------
|
||||
Directory Web Part|João Mendes
|
||||
Directory Web Part| Peter Paul Kirschner ([@petkir_at](https://twitter.com/petkir_at))
|
||||
|
||||
## Version history
|
||||
|
||||
Version|Date|Comments
|
||||
-------|----|--------
|
||||
1.0.0|July 29, 2019|Initial release
|
||||
1.0.1|July 19, 2020|Bugfix and mock-service for workbench (```LivePersonaCard``` not supported in workbench)
|
||||
|
||||
|
||||
## Disclaimer
|
||||
|
|
|
|||
|
|
@ -1,9 +1,16 @@
|
|||
{
|
||||
"$schema": "https://developer.microsoft.com/json-schemas/spfx-build/package-solution.schema.json",
|
||||
"solution": {
|
||||
"developer": {
|
||||
"name": "Contoso",
|
||||
"privacyUrl": "https://contoso.com/privacy",
|
||||
"termsOfUseUrl": "https://contoso.com/terms-of-use",
|
||||
"websiteUrl": "https://contoso.com/my-app",
|
||||
"mpnId": "000000"
|
||||
},
|
||||
"name": "Search Directory",
|
||||
"id": "5b62bc16-3a71-461d-be2f-16bfcb011e8a",
|
||||
"version": "1.0.0.0",
|
||||
"version": "1.0.1.0",
|
||||
"includeClientSideAssets": true,
|
||||
"skipFeatureDeployment": true,
|
||||
"isDomainIsolated": false
|
||||
|
|
|
|||
File diff suppressed because it is too large
Load Diff
|
|
@ -1,7 +1,8 @@
|
|||
{
|
||||
"name": "react-directory",
|
||||
"version": "0.0.1",
|
||||
"version": "1.0.1",
|
||||
"private": true,
|
||||
"main": "lib/index.js",
|
||||
"engines": {
|
||||
"node": ">=0.10.0"
|
||||
},
|
||||
|
|
@ -14,37 +15,36 @@
|
|||
"test:watch": "./node_modules/.bin/jest --config ./config/jest.config.json --watchAll"
|
||||
},
|
||||
"dependencies": {
|
||||
"@microsoft/sp-core-library": "1.8.2",
|
||||
"@microsoft/sp-lodash-subset": "1.8.2",
|
||||
"@microsoft/sp-office-ui-fabric-core": "1.8.2",
|
||||
"@microsoft/sp-property-pane": "1.8.2",
|
||||
"@microsoft/sp-webpart-base": "1.8.2",
|
||||
"@microsoft/sp-core-library": "1.11.0",
|
||||
"@microsoft/sp-lodash-subset": "1.11.0",
|
||||
"@microsoft/sp-office-ui-fabric-core": "1.11.0",
|
||||
"@microsoft/sp-property-pane": "1.11.0",
|
||||
"@microsoft/sp-webpart-base": "1.11.0",
|
||||
"@pnp/pnpjs": "^1.3.3",
|
||||
"@pnp/spfx-controls-react": "1.13.2",
|
||||
"@pnp/spfx-property-controls": "1.15.0",
|
||||
"@types/es6-promise": "0.0.33",
|
||||
"@types/jquery": "^3.3.30",
|
||||
"@types/react": "16.7.22",
|
||||
"@types/react-dom": "16.8.0",
|
||||
"@types/webpack-env": "1.13.1",
|
||||
"@uifabric/fluent-theme": "^0.16.9",
|
||||
"jquery": "^3.4.1",
|
||||
"office-ui-fabric-react": "^6.182.0",
|
||||
"office-ui-fabric-react": "6.214.0",
|
||||
"react": "16.7.0",
|
||||
"react-dom": "16.7.0"
|
||||
},
|
||||
"resolutions": {
|
||||
"@types/react": "16.7.22"
|
||||
"@types/react": "16.8.8"
|
||||
},
|
||||
"devDependencies": {
|
||||
"@microsoft/rush-stack-compiler-3.3": "~0.2.x",
|
||||
"@microsoft/sp-build-web": "1.8.2",
|
||||
"@microsoft/sp-module-interfaces": "1.8.2",
|
||||
"@microsoft/sp-tslint-rules": "1.8.2",
|
||||
"@microsoft/sp-webpart-workbench": "1.8.2",
|
||||
"@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.7.22",
|
||||
"@types/react": "16.8.8",
|
||||
"@types/react-dom": "16.8.3",
|
||||
"@types/webpack-env": "1.13.1",
|
||||
"@voitanos/jest-preset-spfx-react16": "^1.1.0",
|
||||
"ajv": "~5.2.2",
|
||||
"gulp": "~3.9.1",
|
||||
|
|
|
|||
|
|
@ -0,0 +1,7 @@
|
|||
import { PeoplePickerEntity } from '@pnp/sp';
|
||||
|
||||
export interface ISPServices {
|
||||
|
||||
searchUsers(searchString: string, searchFirstName: boolean);
|
||||
|
||||
}
|
||||
|
|
@ -0,0 +1,210 @@
|
|||
{
|
||||
"odata.metadata": "https://contoso.sharepoint.com/_api/$metadata#Microsoft.Office.Server.Search.REST.SearchResult",
|
||||
"ElapsedTime": 34,
|
||||
"PrimaryQueryResult": {
|
||||
"CustomResults": [],
|
||||
"QueryId": "70699796-a977-4437-b771-92a074e322e6",
|
||||
"QueryRuleId": "00000000-0000-0000-0000-000000000000",
|
||||
"RefinementResults": null,
|
||||
"RelevantResults": {
|
||||
"GroupTemplateId": null,
|
||||
"ItemTemplateId": null,
|
||||
"Properties": [],
|
||||
"ResultTitle": null,
|
||||
"ResultTitleUrl": null,
|
||||
"RowCount": 1,
|
||||
"Table": {
|
||||
"Rows": [{
|
||||
"Cells": [{
|
||||
"Key": "Rank",
|
||||
"Value": "0",
|
||||
"ValueType": "Edm.Double"
|
||||
}, {
|
||||
"Key": "DocId",
|
||||
"Value": "17646696630634",
|
||||
"ValueType": "Edm.Int64"
|
||||
}, {
|
||||
"Key": "FirstName",
|
||||
"Value": "Peter Paul",
|
||||
"ValueType": "Edm.String"
|
||||
}, {
|
||||
"Key": "LastName",
|
||||
"Value": "Kirschner",
|
||||
"ValueType": "Edm.String"
|
||||
}, {
|
||||
"Key": "PreferredName",
|
||||
"Value": "Peter Paul Kirschner",
|
||||
"ValueType": "Edm.String"
|
||||
}, {
|
||||
"Key": "WorkEmail",
|
||||
"Value": "petkir@pkirschner.onmicrosoft.com",
|
||||
"ValueType": "Edm.String"
|
||||
}, {
|
||||
"Key": "OfficeNumber",
|
||||
"Value": null,
|
||||
"ValueType": "Null"
|
||||
}, {
|
||||
"Key": "PictureURL",
|
||||
"Value": "",
|
||||
"ValueType": "Edm.String"
|
||||
}, {
|
||||
"Key": "WorkPhone",
|
||||
"Value": "4250000000",
|
||||
"ValueType": "Edm.String"
|
||||
}, {
|
||||
"Key": "MobilePhone",
|
||||
"Value": null,
|
||||
"ValueType": "Null"
|
||||
}, {
|
||||
"Key": "JobTitle",
|
||||
"Value": null,
|
||||
"ValueType": "Null"
|
||||
}, {
|
||||
"Key": "Department",
|
||||
"Value": null,
|
||||
"ValueType": "Null"
|
||||
}, {
|
||||
"Key": "Skills",
|
||||
"Value": "",
|
||||
"ValueType": "Edm.String"
|
||||
}, {
|
||||
"Key": "PastProjects",
|
||||
"Value": "",
|
||||
"ValueType": "Edm.String"
|
||||
}, {
|
||||
"Key": "BaseOfficeLocation",
|
||||
"Value": null,
|
||||
"ValueType": "Null"
|
||||
}, {
|
||||
"Key": "SPS-UserType",
|
||||
"Value": "0",
|
||||
"ValueType": "Edm.Int64"
|
||||
}, {
|
||||
"Key": "GroupId",
|
||||
"Value": null,
|
||||
"ValueType": "Null"
|
||||
}, {
|
||||
"Key": "SiteId",
|
||||
"Value": null,
|
||||
"ValueType": "Null"
|
||||
}, {
|
||||
"Key": "WebId",
|
||||
"Value": null,
|
||||
"ValueType": "Null"
|
||||
}, {
|
||||
"Key": "UniqueId",
|
||||
"Value": null,
|
||||
"ValueType": "Null"
|
||||
}, {
|
||||
"Key": "contentclass",
|
||||
"Value": "urn:content-class:SPSPeople",
|
||||
"ValueType": "Edm.String"
|
||||
}, {
|
||||
"Key": "PartitionId",
|
||||
"Value": "92ab9c96-469b-4d78-8b8c-961c4df9356b",
|
||||
"ValueType": "Edm.Guid"
|
||||
}, {
|
||||
"Key": "UrlZone",
|
||||
"Value": "0",
|
||||
"ValueType": "Edm.Int32"
|
||||
}, {
|
||||
"Key": "Culture",
|
||||
"Value": "en-US",
|
||||
"ValueType": "Edm.String"
|
||||
}, {
|
||||
"Key": "ResultTypeId",
|
||||
"Value": "0",
|
||||
"ValueType": "Edm.Int32"
|
||||
}, {
|
||||
"Key": "EditProfileUrl",
|
||||
"Value": null,
|
||||
"ValueType": "Null"
|
||||
}, {
|
||||
"Key": "ProfileViewsLastMonth",
|
||||
"Value": null,
|
||||
"ValueType": "Null"
|
||||
}, {
|
||||
"Key": "ProfileViewsLastWeek",
|
||||
"Value": null,
|
||||
"ValueType": "Null"
|
||||
}, {
|
||||
"Key": "ProfileQueriesFoundYou",
|
||||
"Value": null,
|
||||
"ValueType": "Null"
|
||||
}, {
|
||||
"Key": "RenderTemplateId",
|
||||
"Value": "~sitecollection/_catalogs/masterpage/Display Templates/Search/Item_Default.js",
|
||||
"ValueType": "Edm.String"
|
||||
}, {
|
||||
"Key": "GeoLocationSource",
|
||||
"Value": "EUR",
|
||||
"ValueType": "Edm.String"
|
||||
}]
|
||||
}]
|
||||
},
|
||||
"TotalRows": 1,
|
||||
"TotalRowsIncludingDuplicates": 1
|
||||
},
|
||||
"SpecialTermResults": null
|
||||
},
|
||||
"Properties": [{
|
||||
"Key": "RowLimit",
|
||||
"Value": "500",
|
||||
"ValueType": "Edm.Int32"
|
||||
}, {
|
||||
"Key": "SourceId",
|
||||
"Value": "b09a7990-05ea-4af9-81ef-edfab16c4e31",
|
||||
"ValueType": "Edm.Guid"
|
||||
}, {
|
||||
"Key": "CorrelationId",
|
||||
"Value": "e83b679f-b0c6-2000-3de3-321f0ebd7f6d",
|
||||
"ValueType": "Edm.Guid"
|
||||
}, {
|
||||
"Key": "WasGroupRestricted",
|
||||
"Value": "false",
|
||||
"ValueType": "Edm.Boolean"
|
||||
}, {
|
||||
"Key": "WordBreakerLanguage",
|
||||
"Value": "default",
|
||||
"ValueType": "Edm.String"
|
||||
}, {
|
||||
"Key": "IsPartialUpnDocIdMapping",
|
||||
"Value": "false",
|
||||
"ValueType": "Edm.Boolean"
|
||||
}, {
|
||||
"Key": "EnableInterleaving",
|
||||
"Value": "true",
|
||||
"ValueType": "Edm.Boolean"
|
||||
}, {
|
||||
"Key": "IsMissingUnifiedGroups",
|
||||
"Value": "false",
|
||||
"ValueType": "Edm.Boolean"
|
||||
}, {
|
||||
"Key": "Constellation",
|
||||
"Value": "i31EEE",
|
||||
"ValueType": "Edm.String"
|
||||
}, {
|
||||
"Key": "MultiGeoSearchStatus",
|
||||
"Value": "Full",
|
||||
"ValueType": "Edm.String"
|
||||
}, {
|
||||
"Key": "HasParseException",
|
||||
"Value": "false",
|
||||
"ValueType": "Edm.Boolean"
|
||||
}, {
|
||||
"Key": "IsPartial",
|
||||
"Value": "false",
|
||||
"ValueType": "Edm.Boolean"
|
||||
}, {
|
||||
"Key": "InternalRequestId",
|
||||
"Value": "e44dc9d5-b4dc-4f4e-84f1-eef4eb163ad4",
|
||||
"ValueType": "Edm.String"
|
||||
}, {
|
||||
"Key": "SerializedQuery",
|
||||
"Value": "<Query Culture=\"en-US\" EnableStemming=\"True\" EnablePhonetic=\"False\" EnableNicknames=\"False\" IgnoreAllNoiseQuery=\"True\" SummaryLength=\"180\" MaxSnippetLength=\"180\" DesiredSnippetLength=\"90\" KeywordInclusion=\"0\" QueryText=\"LastName:kir*\" QueryTemplate=\"\" TrimDuplicates=\"True\" Site=\"3ea90dc6-5d70-4967-80a0-e07cbae5867f\" Web=\"ea51dacc-87ca-49cd-9f28-13fd2cb3b96b\" KeywordType=\"True\" HiddenConstraints=\"\" />",
|
||||
"ValueType": "Edm.String"
|
||||
}],
|
||||
"SecondaryQueryResults": [],
|
||||
"SpellingSuggestion": null,
|
||||
"TriggeredRules": []
|
||||
}
|
||||
|
|
@ -0,0 +1,112 @@
|
|||
import { ISPServices } from "./ISPServices";
|
||||
import * as mockdata from './MockDataSearch.json';
|
||||
import { cloneDeep } from '@microsoft/sp-lodash-subset';
|
||||
interface MinimalMockUser {
|
||||
FirstName: string;
|
||||
LastName: string;
|
||||
Department: string;
|
||||
Location: string;
|
||||
Title: string;
|
||||
PreferredName: string;
|
||||
WorkPhone: string;
|
||||
}
|
||||
|
||||
/*
|
||||
|
||||
DisplayName: user.PreferredName,
|
||||
Title: user.JobTitle,
|
||||
PictureUrl: user.PictureURL,
|
||||
Email: user.WorkEmail,
|
||||
Department: user.Department,
|
||||
WorkPhone: user.WorkPhone,
|
||||
Location: user.OfficeNumber
|
||||
? user.OfficeNumber
|
||||
: user.BaseOfficeLocation
|
||||
*/
|
||||
const sampleUserFirstNameLetter: string[] = [
|
||||
"A",
|
||||
"C",
|
||||
"D",
|
||||
"F",
|
||||
"H",
|
||||
"J",
|
||||
"L",
|
||||
"N",
|
||||
"P",
|
||||
"R",
|
||||
"T",
|
||||
"V",
|
||||
"X",
|
||||
"Z",
|
||||
];
|
||||
const sampleUserLastNameLetter: string[] = [
|
||||
"B",
|
||||
"E",
|
||||
"G",
|
||||
"I",
|
||||
"K",
|
||||
"M",
|
||||
"O",
|
||||
"Q",
|
||||
"S",
|
||||
"U",
|
||||
"W",
|
||||
"Y",
|
||||
];
|
||||
|
||||
|
||||
export class spMockServices implements ISPServices {
|
||||
private sampleData: MinimalMockUser[] = [];
|
||||
constructor() {
|
||||
|
||||
sampleUserLastNameLetter.forEach(lastNameL => {
|
||||
sampleUserFirstNameLetter.forEach(firstNameL => {
|
||||
const usercount = Math.floor(Math.random() * (5)) + 1;
|
||||
for (let i = 0; i < usercount; i++) {
|
||||
this.sampleData.push({
|
||||
FirstName: `${firstNameL}FirstName${i}`,
|
||||
LastName: `${lastNameL}LastName${i}`,
|
||||
PreferredName: `${firstNameL}FirstName${i} ${lastNameL}LastName${i}`,
|
||||
Department: i % 2 === 0 ? `${lastNameL}Department` : `${firstNameL}Department`,
|
||||
Location: i % 3 === 0 ? `${lastNameL}Location` : `${firstNameL}Location`,
|
||||
Title: i % 2 === 0 ? `${lastNameL}JobTitle` : `${firstNameL}JobTitle`,
|
||||
WorkPhone: '' + Math.floor(Math.random() * 1234) + 54678900
|
||||
});
|
||||
}
|
||||
});
|
||||
});
|
||||
}
|
||||
|
||||
public async searchUsers(searchString: string, searchFirstName: boolean) {
|
||||
let filtervalue = searchString.trim().toLowerCase();
|
||||
if (searchString.length > 0 && filtervalue.lastIndexOf("*") == searchString.length - 1) {
|
||||
// remove last '*'
|
||||
filtervalue = filtervalue.substring(0, searchString.length - 1);
|
||||
}
|
||||
if (!filtervalue || filtervalue.length === 0) {
|
||||
throw new Error("No valid Input.");
|
||||
}
|
||||
|
||||
|
||||
const searchresult = !!searchFirstName ?
|
||||
this.sampleData.filter(p => p.FirstName.toLowerCase().indexOf(filtervalue) === 0) :
|
||||
this.sampleData.filter(p => p.LastName.toLowerCase().indexOf(filtervalue) === 0);
|
||||
|
||||
const timeout = Math.floor(Math.random() * (1000)) + 1;
|
||||
const resultdata = {
|
||||
ElapsedTime: timeout,
|
||||
RowCount: searchresult.length,
|
||||
TotalRows: searchresult.length,
|
||||
PrimarySearchResults: searchresult
|
||||
};
|
||||
|
||||
|
||||
return new Promise((resolve) => {
|
||||
setTimeout(() => {
|
||||
resolve(resultdata);
|
||||
}, timeout);
|
||||
});
|
||||
|
||||
}
|
||||
|
||||
}
|
||||
|
|
@ -3,9 +3,10 @@ import { graph } from "@pnp/graph";
|
|||
import { sp, PeoplePickerEntity, ClientPeoplePickerQueryParameters, SearchQuery, SearchResults, SearchProperty, SortDirection } from '@pnp/sp';
|
||||
import { PrincipalType } from "@pnp/sp/src/sitegroups";
|
||||
import { isRelativeUrl } from "office-ui-fabric-react";
|
||||
import { ISPServices } from "./ISPServices";
|
||||
|
||||
|
||||
export class spservices {
|
||||
export class spservices implements ISPServices {
|
||||
|
||||
|
||||
|
||||
|
|
@ -17,51 +18,15 @@ export class spservices {
|
|||
});
|
||||
}
|
||||
|
||||
public async getUserProperties(user: string): Promise<any> {
|
||||
|
||||
try {
|
||||
let currentUserProperties: any = await sp.profiles.getPropertiesFor(user);
|
||||
return currentUserProperties;
|
||||
} catch (error) {
|
||||
Promise.reject(error);
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
* async GetUserProfileProperty
|
||||
user:string */
|
||||
public async getUserProfileProperty(user: string, property: string): Promise<string> {
|
||||
try {
|
||||
let UserProperty: string = await sp.profiles.getUserProfilePropertyFor(user, property);
|
||||
console.log(UserProperty);
|
||||
return UserProperty;
|
||||
} catch (error) {
|
||||
Promise.reject(error);
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
*
|
||||
* @param {string} searchUser
|
||||
* @memberof spservices
|
||||
*/
|
||||
public async getUsers(searchUser: string): Promise<PeoplePickerEntity[]> {
|
||||
try {
|
||||
let users: PeoplePickerEntity[] = await sp.profiles.clientPeoplePickerSearchUser({ QueryString: searchUser, MaximumEntitySuggestions: 100, PrincipalType: 1 });
|
||||
return users;
|
||||
} catch (error) {
|
||||
Promise.reject(error);
|
||||
}
|
||||
}
|
||||
|
||||
public async searchUsers(searchString: string, searchFirstName:boolean) {
|
||||
const _search = !searchFirstName ? `LastName:${searchString}*` : `FirstName:${searchString}*` ;
|
||||
const searchProperties: string[] = ["FirstName", "LastName", "PreferredName", "WorkEmail", "OfficeNumber","PictureURL", "WorkPhone", "MobilePhone", "JobTitle", "Department", "Skills", "PastProjects", "BaseOfficeLocation", "SPS-UserType","GroupId"];
|
||||
public async searchUsers(searchString: string, searchFirstName: boolean): Promise<SearchResults> {
|
||||
const _search = !searchFirstName ? `LastName:${searchString}*` : `FirstName:${searchString}*`;
|
||||
const searchProperties: string[] = ["FirstName", "LastName", "PreferredName", "WorkEmail", "OfficeNumber", "PictureURL", "WorkPhone", "MobilePhone", "JobTitle", "Department", "Skills", "PastProjects", "BaseOfficeLocation", "SPS-UserType", "GroupId"];
|
||||
try {
|
||||
if (!searchString) return undefined;
|
||||
let users = await sp.searchWithCaching(<SearchQuery>{
|
||||
Querytext: _search,
|
||||
RowLimit:500,
|
||||
RowLimit: 500,
|
||||
EnableInterleaving: true,
|
||||
SelectProperties: searchProperties,
|
||||
SourceId: 'b09a7990-05ea-4af9-81ef-edfab16c4e31',
|
||||
|
|
|
|||
|
|
@ -1,4 +1,4 @@
|
|||
@import "~@microsoft/sp-office-ui-fabric-core/dist/sass/SPFabricCore.scss";
|
||||
@import '~office-ui-fabric-react/dist/sass/References.scss';
|
||||
|
||||
.directory {
|
||||
.dropDownSortBy {
|
||||
|
|
|
|||
|
|
@ -1,11 +1,9 @@
|
|||
import * as React from "react";
|
||||
import styles from "./Directory.module.scss";
|
||||
import { IDirectoryProps } from "./IDirectoryProps";
|
||||
import { escape } from "@microsoft/sp-lodash-subset";
|
||||
import { PersonaCard } from "./PersonaCard/PersonaCard";
|
||||
import { spservices } from "../../../SPServices/spservices";
|
||||
import { IDirectoryState } from "./IDirectoryState";
|
||||
import { DisplayMode } from "@microsoft/sp-core-library";
|
||||
import * as strings from "DirectoryWebPartStrings";
|
||||
import {
|
||||
Spinner,
|
||||
|
|
@ -20,15 +18,13 @@ import {
|
|||
PivotLinkFormat,
|
||||
PivotLinkSize,
|
||||
Dropdown,
|
||||
DropdownMenuItemType,
|
||||
IDropdownStyles,
|
||||
IDropdownOption
|
||||
} from "office-ui-fabric-react";
|
||||
import { IProfileProperties } from "../../../SPServices/IProfileProperties";
|
||||
import { PeoplePickerEntity, Search, SearchResult } from "@pnp/sp";
|
||||
|
||||
import { WebPartTitle } from "@pnp/spfx-controls-react/lib/WebPartTitle";
|
||||
import { Root } from "@pnp/graph";
|
||||
import { IUserProperties } from "./PersonaCard/IUserProperties";
|
||||
import { ISPServices } from "../../../SPServices/ISPServices";
|
||||
import { Environment, EnvironmentType } from "@microsoft/sp-core-library";
|
||||
import { spMockServices } from "../../../SPServices/spMockServices";
|
||||
|
||||
const az: string[] = [
|
||||
"A",
|
||||
|
|
@ -68,8 +64,8 @@ const orderOptions: IDropdownOption[] = [
|
|||
export default class Directory extends React.Component<
|
||||
IDirectoryProps,
|
||||
IDirectoryState
|
||||
> {
|
||||
private _services: spservices = null;
|
||||
> {
|
||||
private _services: ISPServices = null;
|
||||
|
||||
constructor(props: IDirectoryProps) {
|
||||
super(props);
|
||||
|
|
@ -80,14 +76,19 @@ export default class Directory extends React.Component<
|
|||
errorMessage: "",
|
||||
hasError: false,
|
||||
indexSelectedKey: "A",
|
||||
searchString: "LastName"
|
||||
searchString: "LastName",
|
||||
searchText: ""
|
||||
};
|
||||
|
||||
if (Environment.type === EnvironmentType.Local) {
|
||||
this._services = new spMockServices();
|
||||
} else {
|
||||
this._services = new spservices(this.props.context);
|
||||
}
|
||||
// Register event handlers
|
||||
this._searchUsers = this._searchUsers.bind(this);
|
||||
this._selectedIndex = this._selectedIndex.bind(this);
|
||||
this._sortPeople = this._sortPeople.bind(this);
|
||||
this._searchBoxChanged = this._searchBoxChanged.bind(this);
|
||||
}
|
||||
|
||||
/**
|
||||
|
|
@ -104,27 +105,29 @@ export default class Directory extends React.Component<
|
|||
* @param pictureUrl
|
||||
* @returns
|
||||
*/
|
||||
private getImageBase64(pictureUrl: string):Promise<string>{
|
||||
private getImageBase64(pictureUrl: string): Promise<string> {
|
||||
return new Promise((resolve, reject) => {
|
||||
let image = new Image();
|
||||
image.addEventListener("load", () => {
|
||||
let tempCanvas = document.createElement("canvas");
|
||||
tempCanvas.width = image.width,
|
||||
tempCanvas.height = image.height,
|
||||
tempCanvas.getContext("2d").drawImage(image, 0, 0);
|
||||
let base64Str;
|
||||
try {
|
||||
base64Str = tempCanvas.toDataURL("image/png");
|
||||
} catch (e) {
|
||||
return "";
|
||||
}
|
||||
let image = new Image();
|
||||
image.addEventListener("load", () => {
|
||||
let tempCanvas = document.createElement("canvas");
|
||||
tempCanvas.width = image.width,
|
||||
tempCanvas.height = image.height,
|
||||
tempCanvas.getContext("2d").drawImage(image, 0, 0);
|
||||
let base64Str;
|
||||
try {
|
||||
base64Str = tempCanvas.toDataURL("image/png");
|
||||
} catch (e) {
|
||||
return "";
|
||||
}
|
||||
|
||||
resolve(base64Str);
|
||||
});
|
||||
image.src = pictureUrl;
|
||||
resolve(base64Str);
|
||||
});
|
||||
image.src = pictureUrl;
|
||||
});
|
||||
}
|
||||
|
||||
}
|
||||
private _searchBoxChanged(newvalue: string): void {
|
||||
this.setState({ searchText: newvalue }, () => this._searchUsers(newvalue));
|
||||
}
|
||||
|
||||
private async _searchUsers(searchText: string) {
|
||||
searchText = searchText.trim().length > 0 ? searchText : "A";
|
||||
|
|
@ -139,16 +142,16 @@ export default class Directory extends React.Component<
|
|||
searchText,
|
||||
this.props.searchFirstName
|
||||
);
|
||||
|
||||
if (users && users.PrimarySearchResults.length > 0){
|
||||
debugger;
|
||||
if (users && users.PrimarySearchResults.length > 0) {
|
||||
for (let index = 0; index < users.PrimarySearchResults.length; index++) {
|
||||
let user:any = users.PrimarySearchResults[index] ;
|
||||
if (user.PictureURL){
|
||||
user = { ...user, PictureURL: await this.getImageBase64(`/_layouts/15/userphoto.aspx?size=M&accountname=${user.WorkEmail}`)};
|
||||
users.PrimarySearchResults[index] = user ;
|
||||
let user: any = users.PrimarySearchResults[index];
|
||||
if (user.PictureURL) {
|
||||
user = { ...user, PictureURL: await this.getImageBase64(`/_layouts/15/userphoto.aspx?size=M&accountname=${user.WorkEmail}`) };
|
||||
users.PrimarySearchResults[index] = user;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
this.setState({
|
||||
users:
|
||||
|
|
@ -279,7 +282,7 @@ export default class Directory extends React.Component<
|
|||
* @memberof Directory
|
||||
*/
|
||||
private _selectedIndex(item?: PivotItem, ev?: React.MouseEvent<HTMLElement>) {
|
||||
this._searchUsers(item.props.itemKey);
|
||||
this.setState({ searchText: "" }, () => this._searchUsers(item.props.itemKey));
|
||||
}
|
||||
/**
|
||||
*
|
||||
|
|
@ -293,23 +296,23 @@ export default class Directory extends React.Component<
|
|||
const diretoryGrid =
|
||||
this.state.users && this.state.users.length > 0
|
||||
? this.state.users.map((user: any) => {
|
||||
return (
|
||||
<PersonaCard
|
||||
context={this.props.context}
|
||||
profileProperties={{
|
||||
DisplayName: user.PreferredName,
|
||||
Title: user.JobTitle,
|
||||
PictureUrl: user.PictureURL,
|
||||
Email: user.WorkEmail,
|
||||
Department: user.Department,
|
||||
WorkPhone: user.WorkPhone,
|
||||
Location: user.OfficeNumber
|
||||
? user.OfficeNumber
|
||||
: user.BaseOfficeLocation
|
||||
}}
|
||||
/>
|
||||
);
|
||||
})
|
||||
return (
|
||||
<PersonaCard
|
||||
context={this.props.context}
|
||||
profileProperties={{
|
||||
DisplayName: user.PreferredName,
|
||||
Title: user.JobTitle,
|
||||
PictureUrl: user.PictureURL,
|
||||
Email: user.WorkEmail,
|
||||
Department: user.Department,
|
||||
WorkPhone: user.WorkPhone,
|
||||
Location: user.OfficeNumber
|
||||
? user.OfficeNumber
|
||||
: user.BaseOfficeLocation
|
||||
}}
|
||||
/>
|
||||
);
|
||||
})
|
||||
: [];
|
||||
|
||||
return (
|
||||
|
|
@ -336,7 +339,8 @@ export default class Directory extends React.Component<
|
|||
onClear={() => {
|
||||
this._searchUsers("A");
|
||||
}}
|
||||
onChange={this._searchUsers}
|
||||
value={this.state.searchText}
|
||||
onChange={this._searchBoxChanged}
|
||||
/>
|
||||
<div>
|
||||
<Pivot
|
||||
|
|
@ -380,20 +384,20 @@ export default class Directory extends React.Component<
|
|||
{this.state.errorMessage}
|
||||
</MessageBar>
|
||||
) : (
|
||||
<div className={styles.dropDownSortBy}>
|
||||
<Dropdown
|
||||
placeholder={strings.DropDownPlaceHolderMessage}
|
||||
label={strings.DropDownPlaceLabelMessage}
|
||||
options={orderOptions}
|
||||
selectedKey={this.state.searchString}
|
||||
onChange={(ev: any, value: IDropdownOption) => {
|
||||
this._sortPeople(value.key.toString());
|
||||
}}
|
||||
styles={{ dropdown: { width: 200 } }}
|
||||
/>
|
||||
<div>{diretoryGrid}</div>
|
||||
</div>
|
||||
)}
|
||||
<div className={styles.dropDownSortBy}>
|
||||
<Dropdown
|
||||
placeholder={strings.DropDownPlaceHolderMessage}
|
||||
label={strings.DropDownPlaceLabelMessage}
|
||||
options={orderOptions}
|
||||
selectedKey={this.state.searchString}
|
||||
onChange={(ev: any, value: IDropdownOption) => {
|
||||
this._sortPeople(value.key.toString());
|
||||
}}
|
||||
styles={{ dropdown: { width: 200 } }}
|
||||
/>
|
||||
<div>{diretoryGrid}</div>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,5 +1,4 @@
|
|||
import { IProfileProperties } from "./../../../SPServices/IProfileProperties";
|
||||
import { PeoplePickerEntity, SearchResult, SearchResults } from "@pnp/pnpjs";
|
||||
|
||||
export interface IDirectoryState {
|
||||
users: any;
|
||||
isLoading: boolean;
|
||||
|
|
@ -7,4 +6,5 @@ export interface IDirectoryState {
|
|||
hasError: boolean;
|
||||
indexSelectedKey: string;
|
||||
searchString: string;
|
||||
searchText: string;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,7 +1,6 @@
|
|||
import { WebPartContext } from "@microsoft/sp-webpart-base";
|
||||
import { ApplicationCustomizerContext } from "@microsoft/sp-application-base";
|
||||
import { IUserProperties } from "./IUserProperties";
|
||||
import { PeoplePickerEntity, SearchResult, SearchResults } from "@pnp/pnpjs";
|
||||
|
||||
export interface IPersonaCardProps {
|
||||
context: WebPartContext | ApplicationCustomizerContext;
|
||||
|
|
|
|||
|
|
@ -1,4 +1,4 @@
|
|||
@import "~@microsoft/sp-office-ui-fabric-core/dist/sass/SPFabricCore.scss";
|
||||
@import '~office-ui-fabric-react/dist/sass/References.scss';
|
||||
|
||||
.personaContainer {
|
||||
display: inline-block;
|
||||
|
|
|
|||
|
|
@ -3,24 +3,14 @@ import styles from './PersonaCard.module.scss';
|
|||
import { IPersonaCardProps } from './IPersonaCardProps';
|
||||
import { IPersonaCardState } from './IPersonaCardState';
|
||||
import {
|
||||
Version,
|
||||
Environment,
|
||||
EnvironmentType,
|
||||
ServiceScope,
|
||||
Log,
|
||||
Text,
|
||||
Log, Environment, EnvironmentType,
|
||||
} from '@microsoft/sp-core-library';
|
||||
import { SPComponentLoader } from '@microsoft/sp-loader';
|
||||
|
||||
import {
|
||||
Persona,
|
||||
PersonaCoin,
|
||||
PersonaInitialsColor,
|
||||
PersonaSize,
|
||||
IPersonaStyles,
|
||||
Label,
|
||||
DocumentCard,
|
||||
IDocumentCardStyles,
|
||||
DocumentCardType,
|
||||
Icon,
|
||||
} from 'office-ui-fabric-react';
|
||||
|
|
@ -32,7 +22,7 @@ const LIVE_PERSONA_COMPONENT_ID: string =
|
|||
export class PersonaCard extends React.Component<
|
||||
IPersonaCardProps,
|
||||
IPersonaCardState
|
||||
> {
|
||||
> {
|
||||
constructor(props: IPersonaCardProps) {
|
||||
super(props);
|
||||
|
||||
|
|
@ -44,12 +34,14 @@ export class PersonaCard extends React.Component<
|
|||
* @memberof PersonaCard
|
||||
*/
|
||||
public async componentDidMount() {
|
||||
const sharedLibrary = await this._loadSPComponentById(
|
||||
LIVE_PERSONA_COMPONENT_ID
|
||||
);
|
||||
const livePersonaCard: any = sharedLibrary.LivePersonaCard;
|
||||
console.log(livePersonaCard);
|
||||
this.setState({ livePersonaCard: livePersonaCard });
|
||||
if (Environment.type !== EnvironmentType.Local) {
|
||||
const sharedLibrary = await this._loadSPComponentById(
|
||||
LIVE_PERSONA_COMPONENT_ID
|
||||
);
|
||||
const livePersonaCard: any = sharedLibrary.LivePersonaCard;
|
||||
console.log(livePersonaCard);
|
||||
this.setState({ livePersonaCard: livePersonaCard });
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
|
|
@ -62,7 +54,7 @@ export class PersonaCard extends React.Component<
|
|||
public componentDidUpdate(
|
||||
prevProps: IPersonaCardProps,
|
||||
prevState: IPersonaCardState
|
||||
): void {}
|
||||
): void { }
|
||||
|
||||
/**
|
||||
*
|
||||
|
|
@ -120,8 +112,8 @@ export class PersonaCard extends React.Component<
|
|||
</span>
|
||||
</div>
|
||||
) : (
|
||||
''
|
||||
)}
|
||||
''
|
||||
)}
|
||||
{this.props.profileProperties.Location ? (
|
||||
<div>
|
||||
<Icon iconName="Poi" style={{ fontSize: '12px' }} />
|
||||
|
|
@ -131,8 +123,8 @@ export class PersonaCard extends React.Component<
|
|||
</span>
|
||||
</div>
|
||||
) : (
|
||||
''
|
||||
)}
|
||||
''
|
||||
)}
|
||||
</Persona>
|
||||
</div>
|
||||
</DocumentCard>
|
||||
|
|
|
|||
|
|
@ -5,6 +5,7 @@
|
|||
"forceConsistentCasingInFileNames": true,
|
||||
"module": "esnext",
|
||||
"moduleResolution": "node",
|
||||
"resolveJsonModule" : true,
|
||||
"jsx": "react",
|
||||
"declaration": true,
|
||||
"sourceMap": true,
|
||||
|
|
@ -29,7 +30,8 @@
|
|||
]
|
||||
},
|
||||
"include": [
|
||||
"src/**/*.ts"
|
||||
"src/**/*.ts",
|
||||
"src/**/*.tsx"
|
||||
],
|
||||
"exclude": [
|
||||
"node_modules",
|
||||
|
|
|
|||
|
|
@ -10975,9 +10975,9 @@
|
|||
}
|
||||
},
|
||||
"lodash": {
|
||||
"version": "4.17.15",
|
||||
"resolved": "https://registry.npmjs.org/lodash/-/lodash-4.17.15.tgz",
|
||||
"integrity": "sha512-8xOcRHvCjnocdS5cpwXQXVzmmh5e5+saE2QGoeQmbKmRS6J3VQppPOIt0MnmE+4xlZoumy0GPG0D0MVIQbNA1A=="
|
||||
"version": "4.17.19",
|
||||
"resolved": "https://registry.npmjs.org/lodash/-/lodash-4.17.19.tgz",
|
||||
"integrity": "sha512-JNvd8XER9GQX0v2qJgsaN/mzFCNA5BRe/j8JN9d+tWyGLSodKQHKFicdwNYzWwI3wjRnaKPsGj1XkBjx/F96DQ=="
|
||||
},
|
||||
"lodash._baseassign": {
|
||||
"version": "3.2.0",
|
||||
|
|
|
|||
|
|
@ -37,7 +37,7 @@
|
|||
"base64-url": ">=2.0.0",
|
||||
"fresh": ">=0.5.2",
|
||||
"handlebars": ">=4.3.0",
|
||||
"lodash": ">=4.17.12",
|
||||
"lodash": ">=4.17.19",
|
||||
"merge": ">=1.2.1",
|
||||
"morgan": ">=1.9.1",
|
||||
"stringstream": ">=0.0.6",
|
||||
|
|
|
|||
|
|
@ -0,0 +1,55 @@
|
|||
# Followed Sites webpart
|
||||
|
||||
> NOTE: This sample is available in the [PnP Starter Kit](https://github.com/pnp/sp-starter-kit). You can find the sample code for this web part at https://github.com/pnp/sp-starter-kit/tree/master/solution/src/webparts/followedSites.
|
||||
|
||||
|
||||
This web part provides you the ability to display a list of site administrator defined number of sites that a given user is following, with paging as well as inline filtering of sites by keyword or phrase. Currently the list of followed sites includes classic as well as modern communication sites but does not include group enabled (modern) team sites.
|
||||
|
||||
|
||||
|
||||
## How to use this web part on your web pages
|
||||
|
||||
1. Place the page you want to add this web part to in edit mode.
|
||||
2. Search for and insert the **Followed Sites** web part.
|
||||
3. Configure the web part to update its properties.
|
||||
|
||||
## Configurable Properties
|
||||
|
||||
The `Followed Sites` webpart can be configured with the following properties:
|
||||
|
||||
| Label | Property | Type | Required | Description |
|
||||
| ---- | ---- | ---- | ---- | ---- |
|
||||
| Followed Sites | title | string | no | The webpart title, editable inline with the webpart itself |
|
||||
| Number of followed sites to retrieve | nrOfItems | number | no | The number of sites to show per page, default = 10 |
|
||||
| Specify the sort order of the retrieved sites | sortOrder | number | no | Preferred site sort order. Default sort order driven by SharePoint, or by site name |
|
||||
|
||||
# Installing the web part
|
||||
|
||||
See getting started from [SP-Starter-Kit repository readme](https://github.com/SharePoint/sp-starter-kit).
|
||||
|
||||
You can also download just the [SharePoint Framework solution package (spppkg) file](https://github.com/SharePoint/sp-starter-kit/blob/master/package/sharepoint-starter-kit.sppkg) and install that to your tenant. This web part utilizes the SharePoint Rest API, `/_api/social.following/my/followed(types=4)`, endpoint.
|
||||
|
||||
# Screenshots
|
||||
|
||||
|
||||
|
||||
# Source Code
|
||||
|
||||
https://github.com/SharePoint/sp-starter-kit/tree/master/solution/src/webparts/followedSites
|
||||
|
||||
# Minimal Path to Awesome
|
||||
|
||||
- Clone this repository
|
||||
- Move to Solution folder
|
||||
- in the command line run:
|
||||
- `npm install`
|
||||
- `gulp serve`
|
||||
|
||||
# Version history
|
||||
|
||||
Version|Date|Comments
|
||||
-------|----|--------
|
||||
1.0|May 2018|Initial release
|
||||
|
||||
|
||||
<img src="https://telemetry.sharepointpnp.com/sp-dev-fx-webparts/samples/react-followed-sites" />
|
||||
|
|
@ -0,0 +1,78 @@
|
|||
# Links webpart
|
||||
|
||||
> NOTE: This sample is available in the [PnP Starter Kit](https://github.com/pnp/sp-starter-kit). You can find the sample code for this web part at https://github.com/pnp/sp-starter-kit/tree/master/solution/src/webparts/links.
|
||||
|
||||
|
||||
This web part provides you the ability to add a per instance listing of links with the ability to group sets of links. Links are stored as a collection of links within the web part's properties, removing the need for link storage within SharePoint lists, tenant properties, or other external link storage requirements.
|
||||
|
||||
Links and groups are both customizable.
|
||||
|
||||
|
||||
|
||||
## How to use this web part on your web pages
|
||||
|
||||
1. Place the page you want to add this web part to in edit mode.
|
||||
2. Search for and insert the **Links** web part.
|
||||
3. Configure the webpart to update its properties.
|
||||
|
||||
## Configurable Properties
|
||||
|
||||
The `Links` webpart can be configured with the following properties:
|
||||
|
||||
| Label | Property | Type | Required | Description |
|
||||
| ---- | ---- | ---- | ---- | ---- |
|
||||
| Useful links | title | string | no | The webpart title, editable inline with the webpart itself |
|
||||
| Group names for the links | groupData | collection | no | Collection of group names for grouping links into sets |
|
||||
| Link data | collectionData | collection | no | Collection of links |
|
||||
|
||||
### groupData Collection Properties
|
||||
|
||||
Configurable properties for each collection row within the `groupData` collection:
|
||||
|
||||
| Label | Property | Type | Required | Description |
|
||||
| ---- | ---- | ---- | ---- | ---- |
|
||||
| Title | title | string | yes | The name of a group |
|
||||
|
||||
### collectionData Collection Properties
|
||||
|
||||
Configurable properties for each collection row within the `collectionData` collection:
|
||||
|
||||
| Label | Property | Type | Required | Description |
|
||||
| ---- | ---- | ---- | ---- | ---- |
|
||||
| Title | title | string | yes | The text / title of the link |
|
||||
| URL | url | string | yes | The link url |
|
||||
| UI Fabric icon name | icon | fabricIcon | no | Optional UI Fabric icon name |
|
||||
| Group name | group | dropdown | no | Optional name of the group to add this link to |
|
||||
| Target | target | dropdown | no | Optional target for this link, current or new window |
|
||||
|
||||
# Installing the web part
|
||||
|
||||
See getting started from [SP-Starter-Kit repository readme](https://github.com/SharePoint/sp-starter-kit).
|
||||
|
||||
You can also download just the [SharePoint Framework solution package (spppkg) file](https://github.com/SharePoint/sp-starter-kit/blob/master/package/sharepoint-starter-kit.sppkg) and install that to your tenant. This web part does not have external dependencies.
|
||||
|
||||
# Screenshots
|
||||
|
||||
|
||||
|
||||
# Source Code
|
||||
|
||||
https://github.com/SharePoint/sp-starter-kit/tree/master/solution/src/webparts/links
|
||||
|
||||
# Minimal Path to Awesome
|
||||
|
||||
- Clone this repository
|
||||
- Move to Solution folder
|
||||
- in the command line run:
|
||||
- `npm install`
|
||||
- `gulp serve`
|
||||
|
||||
# Version history
|
||||
|
||||
Version|Date|Comments
|
||||
-------|----|--------
|
||||
1.0|May 2018|Initial release
|
||||
1.1|June 2018|Updated collection descriptions
|
||||
|
||||
|
||||
<img src="https://telemetry.sharepointpnp.com/sp-dev-fx-webparts/samples/react-links" />
|
||||
|
|
@ -0,0 +1,98 @@
|
|||
# LOB Integration webpart
|
||||
|
||||
> NOTE: This sample is available in the [PnP Starter Kit](https://github.com/pnp/sp-starter-kit). You can find the sample code for this web part at https://github.com/SharePoint/sp-starter-kit/tree/master/solution/src/webparts/lobIntegration.
|
||||
|
||||
|
||||
This web part allows you to learn how to consume 3rd party APIs, secured with Azure Active Directory, in the context of SharePoint Framework.
|
||||
It leverages two different back-end REST APIs:
|
||||
- An ApiController built in Microsoft ASP.NET MVC, which is defined in a .NET solution that you can find [here](https://github.com/pnp/sp-starter-kit/blob/master/sample-lob-service/SharePointPnP.LobScenario/SharePointPnP.LobScenario.sln)
|
||||
- An Azure Function, which is based on the code defined [here](https://github.com/pnp/sp-starter-kit/blob/master/sample-lob-service/LIstNorthwindCustomers)
|
||||
|
||||
|
||||
|
||||
The purpose of this web part is to show how you can consume LOB (Line of Business) solutions and on-premises data within SharePoint Framework.
|
||||
In order to leverage this web part, you will need to configure a couple of applications in Azure Active Directory of your target tenant:
|
||||
- **SPFx-LOB-WebAPI**: for the .NET web application
|
||||
- Publish the ASP.NET MVC application on an Azure App Service
|
||||
- Register the AAD app providing the URL of the above Azure App Service
|
||||
- Choose a valid App ID Uri for the app
|
||||
- Configure that App ID Uri in the [LobIntegration.tsx](https://github.com/pnp/sp-starter-kit/blob/master/solution/src/webparts/lobIntegration/components/LobIntegration.tsx#L145) React component
|
||||
- Update the App manifest of the Azure AD app configuring the **oauth2Permissions** property with a value like the following one:
|
||||
|
||||
```json
|
||||
"oauth2Permissions": [
|
||||
{
|
||||
"adminConsentDescription": "Allow the application to read customers through SPFx-LOB-WebAPI on behalf of the signed-in user.",
|
||||
"adminConsentDisplayName": "Read customers from SPFx-LOB-WebAPI",
|
||||
"id": "7510eb34-4403-44d5-a745-a62d0895351c",
|
||||
"isEnabled": true,
|
||||
"type": "User",
|
||||
"userConsentDescription": "Allow the application to access SPFx-LOB-WebAPI on your behalf.",
|
||||
"userConsentDisplayName": "Access SPFx-LOB-WebAPI",
|
||||
"value": "Customers.Read"
|
||||
}
|
||||
],
|
||||
```
|
||||
- **SPFx-LOB-Function**: for the Azure Function
|
||||
- Create an Azure Function and configure it with Azure AD Authentication, registering it in your target AAD tenant
|
||||
- Register the AAD app providing the URL of the above Azure Function
|
||||
- Choose a valid App ID Uri for the app
|
||||
- Configure that App ID Uri in the [LobIntegration.tsx](https://github.com/pnp/sp-starter-kit/blob/master/solution/src/webparts/lobIntegration/components/LobIntegration.tsx#L99) React component
|
||||
|
||||
Moreover, in order to make this web part working properly, you need to grant permissions to the SharePoint Service Application Principal to access them. You can do that using the PnP PowerShell command lets (or Office 365 CLI) with the following syntax:
|
||||
|
||||
```PowerShell
|
||||
Connect-PnPOnline "https://[your-tenant].sharepoint.com/"
|
||||
|
||||
Grant-PnPTenantServicePrincipalPermission -Resource "SPFx-LOB-WebAPI" -Scope "Customers.Read"
|
||||
Grant-PnPTenantServicePrincipalPermission -Resource "SPFx-LOB-Function" -Scope "user_impersonation"
|
||||
|
||||
```
|
||||
|
||||
## How to use this web part on your web pages
|
||||
|
||||
1. Place the page you want to add this web part to in edit mode.
|
||||
2. Search for and insert the **LobIntegration** web part.
|
||||
3. Configure the webpart to update its properties.
|
||||
|
||||
## Configurable Properties
|
||||
|
||||
The `LobIntegration` webpart can be configured with the following properties:
|
||||
|
||||
| Label | Property | Type | Required | Description |
|
||||
| ---- | ---- | ---- | ---- | ---- |
|
||||
| Web API URI | webapiUri | string | yes | The URL of the web API. Should be something like https://[your-app-service].azurewebsites.net/api/customers |
|
||||
| Function URI | functionUri | string | yes | The URL of the Azure Function. Should be something like https://[your-azure-function].azurewebsites.net/api/ListNorthwindCustomers |
|
||||
| Service Type | serviceType | choice | yes | Defines the service to use. It can be "ASP.NET REST API" or "Azure Function" |
|
||||
|
||||
# Installing the web part
|
||||
|
||||
See getting started from [SP-Starter-Kit repository readme](https://github.com/SharePoint/sp-starter-kit).
|
||||
|
||||
You can also download just the [SharePoint Framework solution package (spppkg) file](https://github.com/SharePoint/sp-starter-kit/blob/master/package/sharepoint-starter-kit.sppkg) and install that to your tenant. This web part does not have external dependencies.
|
||||
|
||||
# Screenshots
|
||||
|
||||
|
||||
|
||||
# Source Code
|
||||
|
||||
https://github.com/SharePoint/sp-starter-kit/tree/master/solution/src/webparts/lobIntegration
|
||||
|
||||
# Minimal Path to Awesome
|
||||
|
||||
- Clone this repository
|
||||
- Move to Solution folder
|
||||
- in the command line run:
|
||||
- `npm install`
|
||||
- `gulp serve`
|
||||
|
||||
# Version history
|
||||
|
||||
Version|Date|Comments
|
||||
-------|----|--------
|
||||
1.0|May 2018|Initial release
|
||||
1.1|June 2018|Updated collection descriptions
|
||||
1.2|October 2018|Updated documentation
|
||||
|
||||
<img src="https://telemetry.sharepointpnp.com/sp-dev-fx-webparts/samples/react-lob-integration" />
|
||||
|
|
@ -0,0 +1,52 @@
|
|||
# People Directory web part
|
||||
|
||||
> NOTE: This sample is available in the [PnP Starter Kit](https://github.com/pnp/sp-starter-kit). You can find the sample code for this web part at https://github.com/SharePoint/sp-starter-kit/tree/master/solution/src/webparts/peopleDirectory.
|
||||
|
||||
This web part provides you the ability to add a searchable people directory. A people search box and alphabet list are provided to enable both searching by name as well as selecting a specific letter. This web part requires no configuration and utilizes the people search API to surface people results.
|
||||
|
||||
|
||||
|
||||
## How to use this web part on your web pages
|
||||
|
||||
1. Place the page you want to add this web part to in edit mode.
|
||||
2. Search for and insert the **People Directory** web part.
|
||||
3. Configure the webpart to update its properties.
|
||||
|
||||
## Configurable Properties
|
||||
|
||||
The `People Directory` web part can be configured with the following properties:
|
||||
|
||||
| Label | Property | Type | Required | Description |
|
||||
| ---- | ---- | ---- | ---- | ---- |
|
||||
| Web part title | title | string | no | The web part title, editable inline with the web part itself |
|
||||
|
||||
# Installing the web part
|
||||
|
||||
See getting started from [SP-Starter-Kit repository readme](https://github.com/SharePoint/sp-starter-kit).
|
||||
|
||||
You can also download just the [SharePoint Framework solution package (spppkg) file](https://github.com/SharePoint/sp-starter-kit/blob/master/package/sharepoint-starter-kit.sppkg) and install that to your tenant. This web part does not have external dependencies.
|
||||
|
||||
# Screenshots
|
||||
|
||||
|
||||
|
||||
# Source Code
|
||||
|
||||
https://github.com/SharePoint/sp-starter-kit/tree/master/solution/src/webparts/peopleDirectory
|
||||
|
||||
# Minimal Path to Awesome
|
||||
|
||||
- Clone this repository
|
||||
- Move to Solution folder
|
||||
- in the command line run:
|
||||
- `npm install`
|
||||
- `gulp serve`
|
||||
|
||||
# Version history
|
||||
|
||||
Version|Date|Comments
|
||||
-------|----|--------
|
||||
1.0|May 2018|Initial release
|
||||
|
||||
|
||||
<img src="https://telemetry.sharepointpnp.com/sp-dev-fx-webparts/samples/react-people-directory" />
|
||||
|
|
@ -0,0 +1,55 @@
|
|||
# Personal Calendar web part
|
||||
|
||||
> NOTE: This sample is available in the [PnP Starter Kit](https://github.com/pnp/sp-starter-kit). You can find the sample code for this web part at https://github.com/SharePoint/sp-starter-kit/tree/master/solution/src/webparts/personalCalendar.
|
||||
|
||||
This web part provides you the ability to add a particular user's personal calendar on a web page. The web part may be configured to automatically refresh, as well as display up to seven days of events and a pre-defined number of events at a time. This web part is powered by the Microsoft Graph and currently requires that the Office 365 tenant be configured for targeted release for all users.
|
||||
|
||||
|
||||
|
||||
## How to use this web part on your web pages
|
||||
|
||||
1. Place the page you want to add this web part to in edit mode.
|
||||
2. Search for and insert the **Personal Calendar** web part.
|
||||
3. Configure the web part to update its properties.
|
||||
|
||||
## Configurable Properties
|
||||
|
||||
The `Personal Calendar` web part can be configured with the following properties:
|
||||
|
||||
| Label | Property | Type | Required | Description |
|
||||
| ---- | ---- | ---- | ---- | ---- |
|
||||
| Upcoming Events | title | string | no | The web part title, editable inline with the web part itself |
|
||||
| How often to check for new upcoming meetings (in minutes) | refreshInterval | number | no | Default: 5 - the interval in minutes between auto refresh |
|
||||
| How many days in advance to retrieve meetings for? 0 - today only | daysInAdvance | number | no | Default: 0 (Today only) - the interval in minutes between auto refresh |
|
||||
| How many meetings to show? 0 - show all retrieved meetings | numMeetings | number | no | Default: 0 (all) - the interval in minutes between auto refresh |
|
||||
|
||||
# Installing the web part
|
||||
|
||||
See getting started from [SP-Starter-Kit repository readme](https://github.com/SharePoint/sp-starter-kit).
|
||||
|
||||
You can also download just the [SharePoint Framework solution package (spppkg) file](https://github.com/SharePoint/sp-starter-kit/blob/master/package/sharepoint-starter-kit.sppkg) and install that to your tenant. This web part requires access to the Microsoft Graph.
|
||||
|
||||
# Screenshots
|
||||
|
||||
|
||||
|
||||
# Source Code
|
||||
|
||||
https://github.com/SharePoint/sp-starter-kit/tree/master/solution/src/webparts/personalCalendar
|
||||
|
||||
# Minimal Path to Awesome
|
||||
|
||||
- Clone this repository
|
||||
- Move to Solution folder
|
||||
- in the command line run:
|
||||
- `npm install`
|
||||
- `gulp serve`
|
||||
|
||||
# Version history
|
||||
|
||||
Version|Date|Comments
|
||||
-------|----|--------
|
||||
1.0|May 2018|Initial release
|
||||
|
||||
|
||||
<img src="https://telemetry.sharepointpnp.com/sp-dev-fx-webparts/samples/react-personal-calendar" />
|
||||
|
|
@ -0,0 +1,54 @@
|
|||
# Personal Contacts web part
|
||||
|
||||
> NOTE: This sample is available in the [PnP Starter Kit](https://github.com/pnp/sp-starter-kit). You can find the sample code for this web part at https://github.com/SharePoint/sp-starter-kit/tree/master/solution/src/webparts/personalContacts.
|
||||
|
||||
|
||||
This web part provides you the ability to add a particular user's personal contacts on a web page. The web part may be configured to display a pre-defined number of contacts at a time. This web part is powered by the Microsoft Graph and currently requires that the Office 365 tenant be configured for targeted release for all users.
|
||||
|
||||
|
||||
|
||||
## How to use this web part on your web pages
|
||||
|
||||
1. Place the page you want to add this web part to in edit mode.
|
||||
2. Search for and insert the **Personal Contacts** web part.
|
||||
3. Configure the web part to update its properties.
|
||||
|
||||
## Configurable Properties
|
||||
|
||||
The `Personal Contacts` web part can be configured with the following properties:
|
||||
|
||||
| Label | Property | Type | Required | Description |
|
||||
| ---- | ---- | ---- | ---- | ---- |
|
||||
| Personal contacts | title | string | no | The web part title, editable inline with the web part itself |
|
||||
| Number of contacts to show | nrOfContacts | number | no | Default: 5 - The number of contacts to show |
|
||||
|
||||
# Installing the web part
|
||||
|
||||
See getting started from [SP-Starter-Kit repository readme](https://github.com/SharePoint/sp-starter-kit).
|
||||
|
||||
You can also download just the [SharePoint Framework solution package (spppkg) file](https://github.com/SharePoint/sp-starter-kit/blob/master/package/sharepoint-starter-kit.sppkg) and install that to your tenant. This web part requires access to the Microsoft Graph.
|
||||
|
||||
# Screenshots
|
||||
|
||||
|
||||
|
||||
# Source Code
|
||||
|
||||
https://github.com/SharePoint/sp-starter-kit/tree/master/solution/src/webparts/personalContacts
|
||||
|
||||
# Minimal Path to Awesome
|
||||
|
||||
- Clone this repository
|
||||
- Move to Solution folder
|
||||
- in the command line run:
|
||||
- `npm install`
|
||||
- `gulp serve`
|
||||
|
||||
# Version history
|
||||
|
||||
Version|Date|Comments
|
||||
-------|----|--------
|
||||
1.0|May 2018|Initial release
|
||||
|
||||
|
||||
<img src="https://telemetry.sharepointpnp.com/sp-dev-fx-webparts/samples/react-personal-contacts" />
|
||||
|
|
@ -0,0 +1,53 @@
|
|||
# Personal Email web part
|
||||
|
||||
> NOTE: This sample is available in the [PnP Starter Kit](https://github.com/pnp/sp-starter-kit). You can find the sample code for this web part at https://github.com/SharePoint/sp-starter-kit/tree/master/solution/src/webparts/personalEmail.
|
||||
|
||||
This web part provides you the ability to add a particular user's personal email on a web page. The web part may be configured to display a pre-defined number of emails at a time and includes a link to the user's Outlook to view all email. This web part is powered by the Microsoft Graph and currently requires that the Office 365 tenant be configured for targeted release for all users.
|
||||
|
||||
|
||||
|
||||
## How to use this web part on your web pages
|
||||
|
||||
1. Place the page you want to add this web part to in edit mode.
|
||||
2. Search for and insert the **Personal Email** web part.
|
||||
3. Configure the web part to update its properties.
|
||||
|
||||
## Configurable Properties
|
||||
|
||||
The `Personal Email` web part can be configured with the following properties:
|
||||
|
||||
| Label | Property | Type | Required | Description |
|
||||
| ---- | ---- | ---- | ---- | ---- |
|
||||
| Personal e-mail | title | string | no | The web part title, editable inline with the web part itself |
|
||||
| Number of messages to show | nrOfMessages | number | no | Default: 5 - The number of emails to show |
|
||||
|
||||
# Installing the web part
|
||||
|
||||
See getting started from [SP-Starter-Kit repository readme](https://github.com/SharePoint/sp-starter-kit).
|
||||
|
||||
You can also download just the [SharePoint Framework solution package (spppkg) file](https://github.com/SharePoint/sp-starter-kit/blob/master/package/sharepoint-starter-kit.sppkg) and install that to your tenant. This web part requires access to the Microsoft Graph.
|
||||
|
||||
# Screenshots
|
||||
|
||||
|
||||
|
||||
# Source Code
|
||||
|
||||
https://github.com/SharePoint/sp-starter-kit/tree/master/solution/src/webparts/personalEmail
|
||||
|
||||
# Minimal Path to Awesome
|
||||
|
||||
- Clone this repository
|
||||
- Move to Solution folder
|
||||
- in the command line run:
|
||||
- `npm install`
|
||||
- `gulp serve`
|
||||
|
||||
# Version history
|
||||
|
||||
Version|Date|Comments
|
||||
-------|----|--------
|
||||
1.0|May 2018|Initial release
|
||||
|
||||
|
||||
<img src="https://telemetry.sharepointpnp.com/sp-dev-fx-webparts/samples/react-personal-email" />
|
||||
|
|
@ -0,0 +1,52 @@
|
|||
# Personal Tasks web part
|
||||
|
||||
> NOTE: This sample is available in the [PnP Starter Kit](https://github.com/pnp/sp-starter-kit). You can find the sample code for this web part at https://github.com/SharePoint/sp-starter-kit/tree/master/solution/src/webparts/personalTasks.
|
||||
|
||||
This web part provides you the ability to add a particular user's personal tasks on a web page. The web part may be configured to show all tasks or to exclude completed tasks. This web part is powered by the Microsoft Graph and currently requires that the Office 365 tenant be configured for targeted release for all users.
|
||||
|
||||
|
||||
|
||||
## How to use this web part on your web pages
|
||||
|
||||
1. Place the page you want to add this web part to in edit mode.
|
||||
2. Search for and insert the **Personal Tasks** web part.
|
||||
3. Configure the web part to update its properties.
|
||||
|
||||
## Configurable Properties
|
||||
|
||||
The `Personal Tasks` web part can be configured with the following properties:
|
||||
|
||||
| Label | Property | Type | Required | Description |
|
||||
| ---- | ---- | ---- | ---- | ---- |
|
||||
| My Tasks | title | string | no | The web part title, editable inline with the web part itself |
|
||||
| Show completed tasks | showCompleted | bool | no | Default: false - If true, will show completed tasks as well |
|
||||
|
||||
# Installing the web part
|
||||
|
||||
See getting started from [SP-Starter-Kit repository readme](https://github.com/SharePoint/sp-starter-kit).
|
||||
|
||||
You can also download just the [SharePoint Framework solution package (spppkg) file](https://github.com/SharePoint/sp-starter-kit/blob/master/package/sharepoint-starter-kit.sppkg) and install that to your tenant. This web part requires access to the Microsoft Graph.
|
||||
|
||||
# Screenshots
|
||||
|
||||
|
||||
|
||||
# Source Code
|
||||
|
||||
https://github.com/SharePoint/sp-starter-kit/tree/master/solution/src/webparts/personalTasks
|
||||
|
||||
# Minimal Path to Awesome
|
||||
|
||||
- Clone this repository
|
||||
- Move to Solution folder
|
||||
- in the command line run:
|
||||
- `npm install`
|
||||
- `gulp serve`
|
||||
|
||||
# Version history
|
||||
|
||||
Version|Date|Comments
|
||||
-------|----|--------
|
||||
1.0|May 2018|Initial release
|
||||
|
||||
<img src="https://telemetry.sharepointpnp.com/sp-dev-fx-webparts/samples/react-personal-tasks" />
|
||||
|
|
@ -0,0 +1,53 @@
|
|||
# Recent Contacts web part
|
||||
|
||||
> NOTE: This sample is available in the [PnP Starter Kit](https://github.com/pnp/sp-starter-kit). You can find the sample code for this web part at https://github.com/SharePoint/sp-starter-kit/tree/master/solution/src/webparts/recentContacts.
|
||||
|
||||
This web part provides you the ability to display list of a particular user's recent contacts on a web page. The web part may be configured to display a pre-defined number of contacts at a time. This web part is powered by the Microsoft Graph and currently requires that the Office 365 tenant be configured for targeted release for all users.
|
||||
|
||||
|
||||
|
||||
## How to use this web part on your web pages
|
||||
|
||||
1. Place the page you want to add this web part to in edit mode.
|
||||
2. Search for and insert the **Recent Contacts** web part.
|
||||
3. Configure the web part to update its properties.
|
||||
|
||||
## Configurable Properties
|
||||
|
||||
The `Recent Contacts` web part can be configured with the following properties:
|
||||
|
||||
| Label | Property | Type | Required | Description |
|
||||
| ---- | ---- | ---- | ---- | ---- |
|
||||
| Recent contacts | title | string | no | The web part title, editable inline with the web part itself |
|
||||
| Specify the number of contacts to show | nrOfContacts | number | no | Default: 5 - The number of contacts to show |
|
||||
|
||||
# Installing the web part
|
||||
|
||||
See getting started from [SP-Starter-Kit repository readme](https://github.com/SharePoint/sp-starter-kit).
|
||||
|
||||
You can also download just the [SharePoint Framework solution package (spppkg) file](https://github.com/SharePoint/sp-starter-kit/blob/master/package/sharepoint-starter-kit.sppkg) and install that to your tenant. This web part requires access to the Microsoft Graph.
|
||||
|
||||
# Screenshots
|
||||
|
||||
|
||||
|
||||
# Source Code
|
||||
|
||||
https://github.com/SharePoint/sp-starter-kit/tree/master/solution/src/webparts/recentContacts
|
||||
|
||||
# Minimal Path to Awesome
|
||||
|
||||
- Clone this repository
|
||||
- Move to Solution folder
|
||||
- in the command line run:
|
||||
- `npm install`
|
||||
- `gulp serve`
|
||||
|
||||
# Version history
|
||||
|
||||
Version|Date|Comments
|
||||
-------|----|--------
|
||||
1.0|May 2018|Initial release
|
||||
|
||||
|
||||
<img src="https://telemetry.sharepointpnp.com/sp-dev-fx-webparts/samples/react-recent-contacts" />
|
||||
|
|
@ -0,0 +1,53 @@
|
|||
# Recently Used Documents web part
|
||||
|
||||
> NOTE: This sample is available in the [PnP Starter Kit](https://github.com/pnp/sp-starter-kit). You can find the sample code for this web part at https://github.com/SharePoint/sp-starter-kit/tree/master/solution/src/webparts/recentlyUsedDocuments.
|
||||
|
||||
|
||||
This web part provides you the ability to display a list of a particular user's recently used documents on a web page. The web part may be configured to display a pre-defined number of documents at a time. This web part is powered by the Microsoft Graph and currently requires that the Office 365 tenant be configured for targeted release for all users.
|
||||
|
||||
|
||||
|
||||
## How to use this web part on your web pages
|
||||
|
||||
1. Place the page you want to add this web part to in edit mode.
|
||||
2. Search for and insert the **Recently Used Documents** web part.
|
||||
3. Configure the web part to update its properties.
|
||||
|
||||
## Configurable Properties
|
||||
|
||||
The `Recently Used Documents` web part can be configured with the following properties:
|
||||
|
||||
| Label | Property | Type | Required | Description |
|
||||
| ---- | ---- | ---- | ---- | ---- |
|
||||
| Recent Documents | title | string | no | The web part title, editable inline with the web part itself |
|
||||
| Specify the number of documents to show | nrOfItems | number | no | Default: 3 - The number of documents to show |
|
||||
|
||||
# Installing the web part
|
||||
|
||||
See getting started from [SP-Starter-Kit repository readme](https://github.com/SharePoint/sp-starter-kit).
|
||||
|
||||
You can also download just the [SharePoint Framework solution package (spppkg) file](https://github.com/SharePoint/sp-starter-kit/blob/master/package/sharepoint-starter-kit.sppkg) and install that to your tenant. This web part requires access to the Microsoft Graph.
|
||||
|
||||
# Screenshots
|
||||
|
||||
|
||||
|
||||
# Source Code
|
||||
|
||||
https://github.com/SharePoint/sp-starter-kit/tree/master/solution/src/webparts/recentlyUsedDocuments
|
||||
|
||||
# Minimal Path to Awesome
|
||||
|
||||
- Clone this repository
|
||||
- Move to Solution folder
|
||||
- in the command line run:
|
||||
- `npm install`
|
||||
- `gulp serve`
|
||||
|
||||
# Version history
|
||||
|
||||
Version|Date|Comments
|
||||
-------|----|--------
|
||||
1.0|May 2018|Initial release
|
||||
|
||||
<img src="https://telemetry.sharepointpnp.com/sp-dev-fx-webparts/samples/react-recently-used-documents" />
|
||||
|
|
@ -0,0 +1,52 @@
|
|||
# Recently Visited Sites web part
|
||||
|
||||
> NOTE: This sample is available in the [PnP Starter Kit](https://github.com/pnp/sp-starter-kit). You can find the sample code for this web part at https://github.com/SharePoint/sp-starter-kit/tree/master/solution/src/webparts/recentlyVisitedSites.
|
||||
|
||||
|
||||
This web part provides you the ability to display a list of a particular user's recently visited sites on a web page. The web part will display up to the first 30 (thirty) recently visited sites at a time. This web part is powered by the Microsoft Graph and currently requires that the Office 365 tenant be configured for targeted release for all users.
|
||||
|
||||
|
||||
|
||||
## How to use this web part on your web pages
|
||||
|
||||
1. Place the page you want to add this web part to in edit mode.
|
||||
2. Search for and insert the **Recently Visited Sites** web part.
|
||||
3. Configure the web part to update its properties.
|
||||
|
||||
## Configurable Properties
|
||||
|
||||
The `Recently Visited Sites` web part can be configured with the following properties:
|
||||
|
||||
| Label | Property | Type | Required | Description |
|
||||
| ---- | ---- | ---- | ---- | ---- |
|
||||
| Recent Sites | title | string | no | The web part title, editable inline with the web part itself |
|
||||
|
||||
# Installing the web part
|
||||
|
||||
See getting started from [SP-Starter-Kit repository readme](https://github.com/SharePoint/sp-starter-kit).
|
||||
|
||||
You can also download just the [SharePoint Framework solution package (spppkg) file](https://github.com/SharePoint/sp-starter-kit/blob/master/package/sharepoint-starter-kit.sppkg) and install that to your tenant. This web part requires access to the Microsoft Graph.
|
||||
|
||||
# Screenshots
|
||||
|
||||
|
||||
|
||||
# Source Code
|
||||
|
||||
https://github.com/SharePoint/sp-starter-kit/tree/master/solution/src/webparts/recentlyVisitedSites
|
||||
|
||||
# Minimal Path to Awesome
|
||||
|
||||
- Clone this repository
|
||||
- Move to Solution folder
|
||||
- in the command line run:
|
||||
- `npm install`
|
||||
- `gulp serve`
|
||||
|
||||
# Version history
|
||||
|
||||
Version|Date|Comments
|
||||
-------|----|--------
|
||||
1.0|May 2018|Initial release
|
||||
|
||||
<img src="https://telemetry.sharepointpnp.com/sp-dev-fx-webparts/samples/react-recently-visited-sites" />
|
||||
File diff suppressed because it is too large
Load Diff
|
|
@ -44,4 +44,4 @@
|
|||
"clean": "gulp clean",
|
||||
"test": "gulp test"
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -0,0 +1,59 @@
|
|||
# Site Information web part
|
||||
|
||||
> NOTE: This sample is available in the [PnP Starter Kit](https://github.com/pnp/sp-starter-kit). You can find the sample code for this web part at https://github.com/SharePoint/sp-starter-kit/tree/master/solution/src/webparts/siteInformation.
|
||||
|
||||
|
||||
This web part provides you the ability to collect and present additional metadata on a web page for group associated team sites. The web part may be configured to display site title, a site contacts powered by a people picker, and a term from the term store, often used to provide classification for the site.
|
||||
|
||||
This web part is intended to be used once within a group associated team site to provide additional metadata. This web part provides an extensability framework in which to customize the web part code base to include additional properties and thus site metadata. Additional method demonstrations include the PnP Property Control people picker and the PnP Property Control term picker.
|
||||
|
||||
The term store must include the term group name, `PnPTermSets`, which incudes a Term Set, `PnP-Organizations`. Terms should be placed within this term set. The term group, term set, and default terms are added by the Starter Kit provisioning process, in particular set within the `./provisioning/terms.xml` provisioning template.
|
||||
|
||||
|
||||
|
||||
## How to use this web part on your web pages
|
||||
|
||||
1. Place the page you want to add this web part to in edit mode.
|
||||
2. Search for and insert the **Site Information** web part.
|
||||
3. Configure the web part to update its properties.
|
||||
|
||||
## Configurable Properties
|
||||
|
||||
The `Site Information` web part can be configured with the following properties:
|
||||
|
||||
| Label | Property | Type | Required | Description |
|
||||
| ---- | ---- | ---- | ---- | ---- |
|
||||
| Site Title | siteTitle | string | no | Default: Contoso Portal - the title of the site |
|
||||
| Site Contact | siteContact | IPropertyFieldGroupOrPerson[] | no | A site contact based on a people picker |
|
||||
| Site Organization | siteOrganization | IPickerTerms | no | The site's organization, based on a taxonomy termset |
|
||||
|
||||
# Installing the web part
|
||||
|
||||
See getting started from [SP-Starter-Kit repository readme](https://github.com/SharePoint/sp-starter-kit).
|
||||
|
||||
You can also download just the [SharePoint Framework solution package (spppkg) file](https://github.com/SharePoint/sp-starter-kit/blob/master/package/sharepoint-starter-kit.sppkg) and install that to your tenant. This web part requires access to the Microsoft Graph.
|
||||
|
||||
# Screenshots
|
||||
|
||||
|
||||
|
||||
# Source Code
|
||||
|
||||
https://github.com/SharePoint/sp-starter-kit/tree/master/solution/src/webparts/siteInformation
|
||||
|
||||
# Minimal Path to Awesome
|
||||
|
||||
- Clone this repository
|
||||
- Move to Solution folder
|
||||
- in the command line run:
|
||||
- `npm install`
|
||||
- `gulp serve`
|
||||
|
||||
# Version history
|
||||
|
||||
Version|Date|Comments
|
||||
-------|----|--------
|
||||
1.0|May 2018|Initial release
|
||||
1.1|June 2018|Link webpart to proper term group and term set
|
||||
|
||||
<img src="https://telemetry.sharepointpnp.com/sp-dev-fx-webparts/samples/react-site-information" />
|
||||
|
|
@ -0,0 +1,56 @@
|
|||
# Stock Information web part
|
||||
|
||||
> NOTE: This sample is available in the [PnP Starter Kit](https://github.com/pnp/sp-starter-kit). You can find the sample code for this web part at https://github.com/SharePoint/sp-starter-kit/tree/master/solution/src/webparts/stockInformation.
|
||||
|
||||
This web part provides you the ability to display basic stock information for one publicly traded stock on a web page. The web part may be configured to display a stock based on stock symbol as well as be set to automatically refresh the stock information every 60 (sixty) seconds. The web part depends on a service provided by [Alpha Advantage](https://www.alphavantage.co/). [Learn how to register for your api key](https://github.com/SharePoint/sp-starter-kit/blob/master/documentation/tenant-settings.md#request-a-custom-api-key-to-alpha-vantage).
|
||||
|
||||
The api key provided by Alpha Advantage is added as a tenant property by the Starter Kit provisioning process. [Use the -StockAPIKey parameter when deploying the kit](https://github.com/SharePoint/sp-starter-kit/tree/master/provisioning#-stockapikey).
|
||||
|
||||
By default, the `Stock Information` web part will use the stock symbol set during the Starter Kit provisioning process when the [-StockSymbol](https://github.com/SharePoint/sp-starter-kit/tree/master/provisioning#-stocksymbol) parameter is provided. The default stock symbol is `MSFT`. The stock symbol may be customized per web part instance.
|
||||
|
||||
|
||||
|
||||
## How to use this web part on your web pages
|
||||
|
||||
1. Place the page you want to add this web part to in edit mode.
|
||||
2. Search for and insert the **Stock Information** web part.
|
||||
3. Configure the web part to update its properties.
|
||||
|
||||
## Configurable Properties
|
||||
|
||||
The `Stock Information` web part can be configured with the following properties:
|
||||
|
||||
| Label | Property | Type | Required | Description |
|
||||
| ---- | ---- | ---- | ---- | ---- |
|
||||
| Stock Code | stockSymbol | string | no | Default: MSFT - overrides the default stock, MSFT, with a preferred stock symbol |
|
||||
| Automatic Refresh | autoRefresh | bool | no | Default: false - If true, the web part will auto refresh every 60 seconds |
|
||||
|
||||
# Installing the web part
|
||||
|
||||
See getting started from [SP-Starter-Kit repository readme](https://github.com/SharePoint/sp-starter-kit).
|
||||
|
||||
You can also download just the [SharePoint Framework solution package (spppkg) file](https://github.com/SharePoint/sp-starter-kit/blob/master/package/sharepoint-starter-kit.sppkg) and install that to your tenant. This web part requires access to the Microsoft Graph.
|
||||
|
||||
# Screenshots
|
||||
|
||||
|
||||
|
||||
# Source Code
|
||||
|
||||
https://github.com/SharePoint/sp-starter-kit/tree/master/solution/src/webparts/stockInformation
|
||||
|
||||
# Minimal Path to Awesome
|
||||
|
||||
- Clone this repository
|
||||
- Move to Solution folder
|
||||
- in the command line run:
|
||||
- `npm install`
|
||||
- `gulp serve`
|
||||
|
||||
# Version history
|
||||
|
||||
Version|Date|Comments
|
||||
-------|----|--------
|
||||
1.0|May 2018|Initial release
|
||||
|
||||
<img src="https://telemetry.sharepointpnp.com/sp-dev-fx-webparts/samples/react-stock-information" />
|
||||
|
|
@ -0,0 +1,68 @@
|
|||
# Tiles web part
|
||||
|
||||
> NOTE: This sample is available in the [PnP Starter Kit](https://github.com/pnp/sp-starter-kit). You can find the sample code for this web part at https://github.com/SharePoint/sp-starter-kit/tree/master/solution/src/webparts/tiles.
|
||||
|
||||
This web part provides you the ability to add a per instance listing of tiled links. Tiles are stored as a collection of tiles within the web part's properties, removing the need for link storage within SharePoint lists, tenant properties, or other external link storage requirements.
|
||||
|
||||
Icons are from Office UI Fabric.
|
||||
|
||||
|
||||
|
||||
## How to use this web part on your web pages
|
||||
|
||||
1. Place the page you want to add this web part to in edit mode.
|
||||
2. Search for and insert the **Tiles** web part.
|
||||
3. Configure the web part to update its properties.
|
||||
|
||||
## Configurable Properties
|
||||
|
||||
The `Tiles` web part can be configured with the following properties:
|
||||
|
||||
| Label | Property | Type | Required | Description |
|
||||
| ---- | ---- | ---- | ---- | ---- |
|
||||
| Useful Tools | title | string | no | The web part title, editable inline with the web part itself |
|
||||
| Specify the height of the tiles | tileHeight | number | no | Default: 200, the height in pixels of each tile |
|
||||
| Tile data | collectionData | collection | no | Collection of tiles |
|
||||
|
||||
### collectionData Collection Properties
|
||||
|
||||
Configurable properties for each tile row within the `collectionData` collection:
|
||||
|
||||
| Label | Property | Type | Required | Description |
|
||||
| ---- | ---- | ---- | ---- | ---- |
|
||||
| Title | title | string | yes | The text / title of the tile |
|
||||
| Description | description | string | no | Optional tile description |
|
||||
| URL | url | string | yes | The tile link url |
|
||||
| UI Fabric icon name | icon | fabricIcon | no | Optional UI Fabric icon name |
|
||||
| Target | target | dropdown | no | Optional target for this link, current or new window |
|
||||
|
||||
# Installing the web part
|
||||
|
||||
See getting started from [SP-Starter-Kit repository readme](https://github.com/SharePoint/sp-starter-kit).
|
||||
|
||||
You can also download just the [SharePoint Framework solution package (spppkg) file](https://github.com/SharePoint/sp-starter-kit/blob/master/package/sharepoint-starter-kit.sppkg) and install that to your tenant. This web part requires access to the Microsoft Graph.
|
||||
|
||||
# Screenshots
|
||||
|
||||
|
||||
|
||||
# Source Code
|
||||
|
||||
https://github.com/SharePoint/sp-starter-kit/tree/master/solution/src/webparts/tiles
|
||||
|
||||
# Minimal Path to Awesome
|
||||
|
||||
- Clone this repository
|
||||
- Move to Solution folder
|
||||
- in the command line run:
|
||||
- `npm install`
|
||||
- `gulp serve`
|
||||
|
||||
# Version history
|
||||
|
||||
Version|Date|Comments
|
||||
-------|----|--------
|
||||
1.0|May 2018|Initial release
|
||||
1.1|June 2018|Update SPFx Property Controls version to 1.7.0 - use Fabric Icon control
|
||||
|
||||
<img src="https://telemetry.sharepointpnp.com/sp-dev-fx-webparts/samples/react-tiles" />
|
||||
|
|
@ -66,6 +66,7 @@ Below NPM package is used to develop this sample.
|
|||
1. @pnp/sp (https://www.npmjs.com/package/@pnp/sp)
|
||||
2. @pnp/spfx-controls-react (https://pnp.github.io/sp-dev-fx-controls-react/)
|
||||
3. @pnp/spfx-property-controls (https://pnp.github.io/sp-dev-fx-property-controls/)
|
||||
4. Moment (https://www.npmjs.com/package/moment)
|
||||
|
||||
## Used SharePoint Framework Version
|
||||
|
||||
|
|
@ -102,11 +103,16 @@ Version|Date|Comments
|
|||
|
||||
## Minimal Path to Awesome
|
||||
|
||||
- Clone this repo
|
||||
- Clone this repository.
|
||||
- On the command prompt, navigate to the web part folder and execute:
|
||||
- `npm i`
|
||||
- `gulp serve --nobrowser`
|
||||
- Open workbench on your tenant, i.e. https://contoso.sharepoint.com/sites/salesteam/_layouts/15/workbench.aspx
|
||||
- Search and add web part "Timeline"
|
||||
- `gulp bundle --ship`
|
||||
- `gulp package-solution --ship`
|
||||
- The package can be found at `\react-timeline\sharepoint\solution\react-timeline.sppkg`
|
||||
- [Deploy the package](https://docs.microsoft.com/en-us/sharepoint/dev/spfx/web-parts/get-started/serve-your-web-part-in-a-sharepoint-page#deploy-the-helloworld-package-to-app-catalog) to the app catalog.
|
||||
- [Install the client-side solution](https://docs.microsoft.com/en-us/sharepoint/dev/spfx/web-parts/get-started/serve-your-web-part-in-a-sharepoint-page#install-the-client-side-solution-on-your-site) to your SharePoint site.
|
||||
- [Add web part to your SharePoint page](https://docs.microsoft.com/en-us/sharepoint/dev/spfx/web-parts/get-started/serve-your-web-part-in-a-sharepoint-page#add-the-helloworld-web-part-to-modern-page) named "Timeline".
|
||||
|
||||
|
||||
## Features
|
||||
|
||||
|
|
|
|||
|
|
@ -0,0 +1,54 @@
|
|||
# Weather Information web part
|
||||
|
||||
> NOTE: This sample is available in the [PnP Starter Kit](https://github.com/pnp/sp-starter-kit). You can find the sample code for this web part at https://github.com/SharePoint/sp-starter-kit/tree/master/solution/src/webparts/weatherInformation.
|
||||
|
||||
This web part provides you the ability to display basic weather information for one location on a web page. The web part depends on a service provided by [Yahoo Weather API](https://developer.yahoo.com/weather/).
|
||||
|
||||
By default, the `Weather Information` web part will use the location **Seatle** during the Starter Kit provisioning process and can be overriden when the [-WeatherCity](https://github.com/SharePoint/sp-starter-kit/tree/master/provisioning#-weathercity) parameter is provided.
|
||||
|
||||
|
||||
|
||||
## How to use this web part on your web pages
|
||||
|
||||
1. Place the page you want to add this web part to in edit mode.
|
||||
2. Search for and insert the **Weather** web part.
|
||||
3. Configure the web part to update its properties.
|
||||
|
||||
## Configurable Properties
|
||||
|
||||
The `Weather Information` web part can be configured with the following properties:
|
||||
|
||||
| Label | Property | Type | Required | Description |
|
||||
| ---- | ---- | ---- | ---- | ---- |
|
||||
| Add a location | location | string | no | Inline editable location for weather request |
|
||||
| Display temperature as | unit | string | no | The requested temperature unit, Celsius or Fahrenheit |
|
||||
|
||||
# Installing the web part
|
||||
|
||||
See getting started from [SP-Starter-Kit repository readme](https://github.com/SharePoint/sp-starter-kit).
|
||||
|
||||
You can also download just the [SharePoint Framework solution package (spppkg) file](https://github.com/SharePoint/sp-starter-kit/blob/master/package/sharepoint-starter-kit.sppkg) and install that to your tenant.
|
||||
|
||||
# Screenshots
|
||||
|
||||
|
||||
|
||||
# Source Code
|
||||
|
||||
https://github.com/SharePoint/sp-starter-kit/tree/master/solution/src/webparts/weatherInformation
|
||||
|
||||
# Minimal Path to Awesome
|
||||
|
||||
- Clone this repository
|
||||
- Move to Solution folder
|
||||
- in the command line run:
|
||||
- `npm install`
|
||||
- `gulp serve`
|
||||
|
||||
# Version history
|
||||
|
||||
Version|Date|Comments
|
||||
-------|----|--------
|
||||
1.0|May 2018|Initial release
|
||||
|
||||
<img src="https://telemetry.sharepointpnp.com/sp-dev-fx-webparts/samples/react-weather-information" />
|
||||
|
|
@ -0,0 +1,52 @@
|
|||
# World Time web part
|
||||
|
||||
> NOTE: This sample is available in the [PnP Starter Kit](https://github.com/pnp/sp-starter-kit). You can find the sample code for this web part at https://github.com/SharePoint/sp-starter-kit/tree/master/solution/src/webparts/worldTime.
|
||||
|
||||
This web part provides you the ability to display basic clock for a given time zone on a web page. The clock is based on the user's workstation time with an offset from UTC to the selected time zone.
|
||||
|
||||
|
||||
|
||||
## How to use this web part on your web pages
|
||||
|
||||
1. Place the page you want to add this web part to in edit mode.
|
||||
2. Search for and insert the **World Time** web part.
|
||||
3. Configure the web part to update its properties.
|
||||
|
||||
## Configurable Properties
|
||||
|
||||
The `World Time` web part can be configured with the following properties:
|
||||
|
||||
| Label | Property | Type | Required | Description |
|
||||
| ---- | ---- | ---- | ---- | ---- |
|
||||
| Description | description | string | no | Default: UTC Time - The clock description |
|
||||
| Time Zone | timeZoneOffset | number | no | Default: 0 - The clock offset where 0 = UTC, -8 = PST (UTC−08:00), etc |
|
||||
|
||||
# Installing the web part
|
||||
|
||||
See getting started from [SP-Starter-Kit repository readme](https://github.com/SharePoint/sp-starter-kit).
|
||||
|
||||
You can also download just the [SharePoint Framework solution package (spppkg) file](https://github.com/SharePoint/sp-starter-kit/blob/master/package/sharepoint-starter-kit.sppkg) and install that to your tenant.
|
||||
|
||||
# Screenshots
|
||||
|
||||
|
||||
|
||||
# Source Code
|
||||
|
||||
https://github.com/SharePoint/sp-starter-kit/tree/master/solution/src/webparts/worldTime
|
||||
|
||||
# Minimal Path to Awesome
|
||||
|
||||
- Clone this repository
|
||||
- Move to Solution folder
|
||||
- in the command line run:
|
||||
- `npm install`
|
||||
- `gulp serve`
|
||||
|
||||
# Version history
|
||||
|
||||
Version|Date|Comments
|
||||
-------|----|--------
|
||||
1.0|May 2018|Initial release
|
||||
|
||||
<img src="https://telemetry.sharepointpnp.com/sp-dev-fx-webparts/samples/react-world-time" />
|
||||
Loading…
Reference in New Issue