honeymoose
/
sp-dev-fx-webparts
mirror of https://github.com/pnp/sp-dev-fx-webparts.git
1
0
Fork 0
Code Issues Packages Projects Releases Wiki Activity

Merge pull request #6 from pnp/master 

Forward
This commit is contained in:
Peter Paul Kirschner 2020-07-25 21:08:42 +02:00 committed by GitHub
parent f7fa93c031 149a557a4b
commit 145180b26d
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
52 changed files with 32493 additions and 3760 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

9
README.md
View File

@ -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) * [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 development tools and libraries](https://docs.microsoft.com/sharepoint/dev/spfx/tools-and-libraries)
* [SharePoint Framework Reference](http://aka.ms/spfx-reference) * [Getting Started](https://docs.microsoft.com/en-us/sharepoint/dev/spfx/set-up-your-developer-tenant)
* [Visual Studio Extension for SharePoint Framework projects](https://github.com/SharePoint/sp-dev-fx-vs-extension)
## Using the samples ## 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: Clone this repository by executing the following command in your console:
```shell ```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: Navigate to the cloned repository folder which should be the same as the repository name:
@ -77,8 +76,8 @@ gulp serve
## Contributions ## 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. 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!

4
samples/js-extend-gulp/README.md
View File

@ -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: 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 ## Used SharePoint Framework Version
![drop](https://img.shields.io/badge/drop-RC0-green.svg) ![drop](https://img.shields.io/badge/drop-RC0-green.svg)
@ -86,4 +86,4 @@ Version|Date|Comments
- `npm install` - `npm install`
- `gulp serve` - `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" />

4
samples/js-extend-webpack/README.md
View File

@ -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: 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 ## Used SharePoint Framework Version
![drop](https://img.shields.io/badge/drop-GA-green.svg) ![drop](https://img.shields.io/badge/drop-GA-green.svg)
@ -58,4 +58,4 @@ Version|Date|Comments
- `npm install` - `npm install`
- `gulp serve` - `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" />

12
samples/react-adaptive-cards-image-gallery/README.md
View File

@ -79,11 +79,15 @@ Version|Date|Comments
## Minimal Path to Awesome ## Minimal Path to Awesome
- Clone this repo - Clone this repository.
- On the command prompt, navigate to the web part folder and execute:
- `npm i` - `npm i`
- `gulp serve --nobrowser` - `gulp bundle --ship`
- Open workbench on your tenant, i.e. https://contoso.sharepoint.com/sites/salesteam/_layouts/15/workbench.aspx - `gulp package-solution --ship`
- Search and add web part "Adaptive Cards Image Gallery" - 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 ## Features

5
samples/react-adaptive-cards-image-gallery/config/config.json
View File

@ -13,6 +13,7 @@
}, },
"externals": {}, "externals": {},
"localizedResources": { "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"
} }
} }

428
samples/react-adaptive-cards-image-gallery/package-lock.json generated
View File

@ -1516,11 +1516,6 @@
"isomorphic-fetch": "^2.2.1" "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": { "@microsoft/node-core-library": {
"version": "3.15.1", "version": "3.15.1",
"resolved": "https://registry.npmjs.org/@microsoft/node-core-library/-/node-core-library-3.15.1.tgz", "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==", "integrity": "sha512-518yewjSga1jLdiLrcmpMFlaba5P+50b0TWNFUpC+SL9Yzf0kMi57qw+bMl+rQ08cGqH1vLx4eg9YFUbZXgZ0Q==",
"dev": true "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": { "@pnpm/link-bins": {
"version": "1.0.4", "version": "1.0.4",
"resolved": "https://registry.npmjs.org/@pnpm/link-bins/-/link-bins-1.0.4.tgz", "resolved": "https://registry.npmjs.org/@pnpm/link-bins/-/link-bins-1.0.4.tgz",
@ -2629,6 +2818,11 @@
"integrity": "sha1-ox10JBprHtu5c8822XooloNKUfk=", "integrity": "sha1-ox10JBprHtu5c8822XooloNKUfk=",
"dev": true "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": { "@types/es6-promise": {
"version": "0.0.33", "version": "0.0.33",
"resolved": "https://registry.npmjs.org/@types/es6-promise/-/es6-promise-0.0.33.tgz", "resolved": "https://registry.npmjs.org/@types/es6-promise/-/es6-promise-0.0.33.tgz",
@ -2717,11 +2911,6 @@
"@types/node": "*" "@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": { "@types/mime": {
"version": "2.0.2", "version": "2.0.2",
"resolved": "https://registry.npmjs.org/@types/mime/-/mime-2.0.2.tgz", "resolved": "https://registry.npmjs.org/@types/mime/-/mime-2.0.2.tgz",
@ -2794,6 +2983,14 @@
"integrity": "sha512-7s9EQWupR1fTc2pSMtXRQ9w9gLOcrJn+h7HOXw4evxyvVqMi4f+q7d2tnFe3ng3SNHjtK+0EzGMGFUQX4/AQRA==", "integrity": "sha512-7s9EQWupR1fTc2pSMtXRQ9w9gLOcrJn+h7HOXw4evxyvVqMi4f+q7d2tnFe3ng3SNHjtK+0EzGMGFUQX4/AQRA==",
"dev": true "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": { "@types/ramda": {
"version": "0.25.51", "version": "0.25.51",
"resolved": "https://registry.npmjs.org/@types/ramda/-/ramda-0.25.51.tgz", "resolved": "https://registry.npmjs.org/@types/ramda/-/ramda-0.25.51.tgz",
@ -2863,14 +3060,6 @@
"@types/mime": "*" "@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": { "@types/source-list-map": {
"version": "0.1.2", "version": "0.1.2",
"resolved": "https://registry.npmjs.org/@types/source-list-map/-/source-list-map-0.1.2.tgz", "resolved": "https://registry.npmjs.org/@types/source-list-map/-/source-list-map-0.1.2.tgz",
@ -3854,8 +4043,7 @@
"asap": { "asap": {
"version": "2.0.6", "version": "2.0.6",
"resolved": "https://registry.npmjs.org/asap/-/asap-2.0.6.tgz", "resolved": "https://registry.npmjs.org/asap/-/asap-2.0.6.tgz",
"integrity": "sha1-5QNHYR1+aQlDIIu9r+vLwvuGbUY=", "integrity": "sha1-5QNHYR1+aQlDIIu9r+vLwvuGbUY="
"dev": true
}, },
"asn1": { "asn1": {
"version": "0.2.4", "version": "0.2.4",
@ -4952,6 +5140,32 @@
"integrity": "sha512-mT8iDcrh03qDGRRmoA2hmBJnxpllMR+0/0qlzjqZES6NdiWDcZkCNAk4rPFZ9Q85r27unkiNNg8ZOiwZXBHwcA==", "integrity": "sha512-mT8iDcrh03qDGRRmoA2hmBJnxpllMR+0/0qlzjqZES6NdiWDcZkCNAk4rPFZ9Q85r27unkiNNg8ZOiwZXBHwcA==",
"dev": true "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": { "chokidar": {
"version": "2.1.8", "version": "2.1.8",
"resolved": "https://registry.npmjs.org/chokidar/-/chokidar-2.1.8.tgz", "resolved": "https://registry.npmjs.org/chokidar/-/chokidar-2.1.8.tgz",
@ -5089,8 +5303,7 @@
"clone": { "clone": {
"version": "2.1.2", "version": "2.1.2",
"resolved": "https://registry.npmjs.org/clone/-/clone-2.1.2.tgz", "resolved": "https://registry.npmjs.org/clone/-/clone-2.1.2.tgz",
"integrity": "sha1-G39Ln1kfHo+DZwQBYANFoCiHQ18=", "integrity": "sha1-G39Ln1kfHo+DZwQBYANFoCiHQ18="
"dev": true
}, },
"clone-buffer": { "clone-buffer": {
"version": "1.0.0", "version": "1.0.0",
@ -5163,7 +5376,6 @@
"version": "3.1.2", "version": "3.1.2",
"resolved": "https://registry.npmjs.org/color/-/color-3.1.2.tgz", "resolved": "https://registry.npmjs.org/color/-/color-3.1.2.tgz",
"integrity": "sha512-vXTJhHebByxZn3lDvDJYw4lR5+uB3vuoHsuYA5AKuxRVn5wzzIfQKGLBmgdVRHKTJYeK5rvJcHnrd0Li49CFpg==", "integrity": "sha512-vXTJhHebByxZn3lDvDJYw4lR5+uB3vuoHsuYA5AKuxRVn5wzzIfQKGLBmgdVRHKTJYeK5rvJcHnrd0Li49CFpg==",
"dev": true,
"requires": { "requires": {
"color-convert": "^1.9.1", "color-convert": "^1.9.1",
"color-string": "^1.5.2" "color-string": "^1.5.2"
@ -5173,7 +5385,6 @@
"version": "1.9.3", "version": "1.9.3",
"resolved": "https://registry.npmjs.org/color-convert/-/color-convert-1.9.3.tgz", "resolved": "https://registry.npmjs.org/color-convert/-/color-convert-1.9.3.tgz",
"integrity": "sha512-QfAUtd+vFdAtFQcC8CCyYt1fYWxSqAiK2cSD6zDB8N3cpsEBAvRxp9zOGg6G/SHHJYAT88/az/IuDGALsNVbGg==", "integrity": "sha512-QfAUtd+vFdAtFQcC8CCyYt1fYWxSqAiK2cSD6zDB8N3cpsEBAvRxp9zOGg6G/SHHJYAT88/az/IuDGALsNVbGg==",
"dev": true,
"requires": { "requires": {
"color-name": "1.1.3" "color-name": "1.1.3"
} }
@ -5181,14 +5392,12 @@
"color-name": { "color-name": {
"version": "1.1.3", "version": "1.1.3",
"resolved": "https://registry.npmjs.org/color-name/-/color-name-1.1.3.tgz", "resolved": "https://registry.npmjs.org/color-name/-/color-name-1.1.3.tgz",
"integrity": "sha1-p9BVi9icQveV3UIyj3QIMcpTvCU=", "integrity": "sha1-p9BVi9icQveV3UIyj3QIMcpTvCU="
"dev": true
}, },
"color-string": { "color-string": {
"version": "1.5.3", "version": "1.5.3",
"resolved": "https://registry.npmjs.org/color-string/-/color-string-1.5.3.tgz", "resolved": "https://registry.npmjs.org/color-string/-/color-string-1.5.3.tgz",
"integrity": "sha512-dC2C5qeWoYkxki5UAXapdjqO672AM4vZuPGRQfO8b5HKuKGBbKWpITyDYN7TOFKvRW7kOgAn3746clDBMDJyQw==", "integrity": "sha512-dC2C5qeWoYkxki5UAXapdjqO672AM4vZuPGRQfO8b5HKuKGBbKWpITyDYN7TOFKvRW7kOgAn3746clDBMDJyQw==",
"dev": true,
"requires": { "requires": {
"color-name": "^1.0.0", "color-name": "^1.0.0",
"simple-swizzle": "^0.2.2" "simple-swizzle": "^0.2.2"
@ -5453,6 +5662,16 @@
"sha.js": "^2.4.8" "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": { "cross-spawn": {
"version": "6.0.5", "version": "6.0.5",
"resolved": "https://registry.npmjs.org/cross-spawn/-/cross-spawn-6.0.5.tgz", "resolved": "https://registry.npmjs.org/cross-spawn/-/cross-spawn-6.0.5.tgz",
@ -5993,6 +6212,19 @@
"esprima": "4.0.1" "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": { "deep-is": {
"version": "0.1.3", "version": "0.1.3",
"resolved": "https://registry.npmjs.org/deep-is/-/deep-is-0.1.3.tgz", "resolved": "https://registry.npmjs.org/deep-is/-/deep-is-0.1.3.tgz",
@ -6052,7 +6284,6 @@
"version": "1.1.3", "version": "1.1.3",
"resolved": "https://registry.npmjs.org/define-properties/-/define-properties-1.1.3.tgz", "resolved": "https://registry.npmjs.org/define-properties/-/define-properties-1.1.3.tgz",
"integrity": "sha512-3MqfYKj2lLzdMSf8ZIZE/V+Zuy+BgD6f164e8K2w7dgnpKArBDerGYpM46IYYcjnkdPNMjPk9A6VFB8+3SKlXQ==", "integrity": "sha512-3MqfYKj2lLzdMSf8ZIZE/V+Zuy+BgD6f164e8K2w7dgnpKArBDerGYpM46IYYcjnkdPNMjPk9A6VFB8+3SKlXQ==",
"dev": true,
"requires": { "requires": {
"object-keys": "^1.0.12" "object-keys": "^1.0.12"
} }
@ -6462,7 +6693,6 @@
"version": "1.17.6", "version": "1.17.6",
"resolved": "https://registry.npmjs.org/es-abstract/-/es-abstract-1.17.6.tgz", "resolved": "https://registry.npmjs.org/es-abstract/-/es-abstract-1.17.6.tgz",
"integrity": "sha512-Fr89bON3WFyUi5EvAeI48QTWX0AyekGgLA8H+c+7fbfCkJwRWRMLd8CQedNEyJuoYYhmtEqY92pgte1FAhBlhw==", "integrity": "sha512-Fr89bON3WFyUi5EvAeI48QTWX0AyekGgLA8H+c+7fbfCkJwRWRMLd8CQedNEyJuoYYhmtEqY92pgte1FAhBlhw==",
"dev": true,
"requires": { "requires": {
"es-to-primitive": "^1.2.1", "es-to-primitive": "^1.2.1",
"function-bind": "^1.1.1", "function-bind": "^1.1.1",
@ -6481,7 +6711,6 @@
"version": "1.2.1", "version": "1.2.1",
"resolved": "https://registry.npmjs.org/es-to-primitive/-/es-to-primitive-1.2.1.tgz", "resolved": "https://registry.npmjs.org/es-to-primitive/-/es-to-primitive-1.2.1.tgz",
"integrity": "sha512-QCOllgZJtaUo9miYBcLChTUaHNjJF3PYs1VidD7AwiEj1kYxKeQTctLAezAOH5ZKRH0g2IgPn6KwB4IT8iRpvA==", "integrity": "sha512-QCOllgZJtaUo9miYBcLChTUaHNjJF3PYs1VidD7AwiEj1kYxKeQTctLAezAOH5ZKRH0g2IgPn6KwB4IT8iRpvA==",
"dev": true,
"requires": { "requires": {
"is-callable": "^1.1.4", "is-callable": "^1.1.4",
"is-date-object": "^1.0.1", "is-date-object": "^1.0.1",
@ -6720,6 +6949,11 @@
"through": "^2.3.8" "through": "^2.3.8"
} }
}, },
"eventemitter3": {
"version": "2.0.3",
"resolved": "https://registry.npmjs.org/eventemitter3/-/eventemitter3-2.0.3.tgz",
"integrity": "sha1-teEHm1n7XhuidxwKmTvgYKWMmbo="
},
"events": { "events": {
"version": "3.1.0", "version": "3.1.0",
"resolved": "https://registry.npmjs.org/events/-/events-3.1.0.tgz", "resolved": "https://registry.npmjs.org/events/-/events-3.1.0.tgz",
@ -6953,8 +7187,7 @@
"extend": { "extend": {
"version": "3.0.2", "version": "3.0.2",
"resolved": "https://registry.npmjs.org/extend/-/extend-3.0.2.tgz", "resolved": "https://registry.npmjs.org/extend/-/extend-3.0.2.tgz",
"integrity": "sha512-fjquC59cD7CyW6urNXK0FBufkZcoiGG80wTuPujX590cB5Ttln20E2UB4S/WARVqhXffZl2LNgS+gQdPIIim/g==", "integrity": "sha512-fjquC59cD7CyW6urNXK0FBufkZcoiGG80wTuPujX590cB5Ttln20E2UB4S/WARVqhXffZl2LNgS+gQdPIIim/g=="
"dev": true
}, },
"extend-shallow": { "extend-shallow": {
"version": "3.0.2", "version": "3.0.2",
@ -7077,6 +7310,11 @@
"integrity": "sha512-f3qQ9oQy9j2AhBe/H9VC91wLmKBCCU/gDOnKNAYG5hswO7BLKj09Hc5HYNz9cGI++xlpDCIgDaitVs03ATR84Q==", "integrity": "sha512-f3qQ9oQy9j2AhBe/H9VC91wLmKBCCU/gDOnKNAYG5hswO7BLKj09Hc5HYNz9cGI++xlpDCIgDaitVs03ATR84Q==",
"dev": true "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": { "fast-json-stable-stringify": {
"version": "2.1.0", "version": "2.1.0",
"resolved": "https://registry.npmjs.org/fast-json-stable-stringify/-/fast-json-stable-stringify-2.1.0.tgz", "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", "version": "0.8.17",
"resolved": "https://registry.npmjs.org/fbjs/-/fbjs-0.8.17.tgz", "resolved": "https://registry.npmjs.org/fbjs/-/fbjs-0.8.17.tgz",
"integrity": "sha1-xNWY6taUkRJlPWWIsBpc3Nn5D90=", "integrity": "sha1-xNWY6taUkRJlPWWIsBpc3Nn5D90=",
"dev": true,
"requires": { "requires": {
"core-js": "^1.0.0", "core-js": "^1.0.0",
"isomorphic-fetch": "^2.1.1", "isomorphic-fetch": "^2.1.1",
@ -7137,8 +7374,7 @@
"core-js": { "core-js": {
"version": "1.2.7", "version": "1.2.7",
"resolved": "https://registry.npmjs.org/core-js/-/core-js-1.2.7.tgz", "resolved": "https://registry.npmjs.org/core-js/-/core-js-1.2.7.tgz",
"integrity": "sha1-ZSKUwUZR2yj6k70tX/KYOk8IxjY=", "integrity": "sha1-ZSKUwUZR2yj6k70tX/KYOk8IxjY="
"dev": true
} }
} }
}, },
@ -7510,8 +7746,7 @@
"function-bind": { "function-bind": {
"version": "1.1.1", "version": "1.1.1",
"resolved": "https://registry.npmjs.org/function-bind/-/function-bind-1.1.1.tgz", "resolved": "https://registry.npmjs.org/function-bind/-/function-bind-1.1.1.tgz",
"integrity": "sha512-yIovAzMX49sF8Yl58fSCWJ5svSLuaibPxXQJFLmBObTuCr0Mf1KiPopGM9NiFjiYBCbfaa2Fh6breQ6ANVTI0A==", "integrity": "sha512-yIovAzMX49sF8Yl58fSCWJ5svSLuaibPxXQJFLmBObTuCr0Mf1KiPopGM9NiFjiYBCbfaa2Fh6breQ6ANVTI0A=="
"dev": true
}, },
"gauge": { "gauge": {
"version": "2.7.4", "version": "2.7.4",
@ -8398,7 +8633,6 @@
"version": "1.0.3", "version": "1.0.3",
"resolved": "https://registry.npmjs.org/has/-/has-1.0.3.tgz", "resolved": "https://registry.npmjs.org/has/-/has-1.0.3.tgz",
"integrity": "sha512-f2dvO0VU6Oej7RkWJGrehjbzMAjFp5/VKPp5tTpWIV4JHHZK1/BxbFRtf/siA2SWTe09caDmVtYYzWEIbBS4zw==", "integrity": "sha512-f2dvO0VU6Oej7RkWJGrehjbzMAjFp5/VKPp5tTpWIV4JHHZK1/BxbFRtf/siA2SWTe09caDmVtYYzWEIbBS4zw==",
"dev": true,
"requires": { "requires": {
"function-bind": "^1.1.1" "function-bind": "^1.1.1"
} }
@ -8430,8 +8664,7 @@
"has-symbols": { "has-symbols": {
"version": "1.0.1", "version": "1.0.1",
"resolved": "https://registry.npmjs.org/has-symbols/-/has-symbols-1.0.1.tgz", "resolved": "https://registry.npmjs.org/has-symbols/-/has-symbols-1.0.1.tgz",
"integrity": "sha512-PLcsoqu++dmEIZB+6totNFKq/7Do+Z0u4oT0zKOJNl3lYK6vGwwu2hjHs+68OEZbTjiUE9bgOABXbP/GvrS0Kg==", "integrity": "sha512-PLcsoqu++dmEIZB+6totNFKq/7Do+Z0u4oT0zKOJNl3lYK6vGwwu2hjHs+68OEZbTjiUE9bgOABXbP/GvrS0Kg=="
"dev": true
}, },
"has-unicode": { "has-unicode": {
"version": "2.0.1", "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": { "is-arrayish": {
"version": "0.2.1", "version": "0.2.1",
"resolved": "https://registry.npmjs.org/is-arrayish/-/is-arrayish-0.2.1.tgz", "resolved": "https://registry.npmjs.org/is-arrayish/-/is-arrayish-0.2.1.tgz",
@ -9044,8 +9282,7 @@
"is-callable": { "is-callable": {
"version": "1.2.0", "version": "1.2.0",
"resolved": "https://registry.npmjs.org/is-callable/-/is-callable-1.2.0.tgz", "resolved": "https://registry.npmjs.org/is-callable/-/is-callable-1.2.0.tgz",
"integrity": "sha512-pyVD9AaGLxtg6srb2Ng6ynWJqkHU9bEM087AKck0w8QwDarTfNcpIYoU8x8Hv2Icm8u6kFJM18Dag8lyqGkviw==", "integrity": "sha512-pyVD9AaGLxtg6srb2Ng6ynWJqkHU9bEM087AKck0w8QwDarTfNcpIYoU8x8Hv2Icm8u6kFJM18Dag8lyqGkviw=="
"dev": true
}, },
"is-ci": { "is-ci": {
"version": "1.2.1", "version": "1.2.1",
@ -9093,8 +9330,7 @@
"is-date-object": { "is-date-object": {
"version": "1.0.2", "version": "1.0.2",
"resolved": "https://registry.npmjs.org/is-date-object/-/is-date-object-1.0.2.tgz", "resolved": "https://registry.npmjs.org/is-date-object/-/is-date-object-1.0.2.tgz",
"integrity": "sha512-USlDT524woQ08aoZFzh3/Z6ch9Y/EWXEHQ/AaRN0SkKq4t2Jw2R2339tSXmwuVoY7LLlBCbOIlx2myP/L5zk0g==", "integrity": "sha512-USlDT524woQ08aoZFzh3/Z6ch9Y/EWXEHQ/AaRN0SkKq4t2Jw2R2339tSXmwuVoY7LLlBCbOIlx2myP/L5zk0g=="
"dev": true
}, },
"is-descriptor": { "is-descriptor": {
"version": "0.1.6", "version": "0.1.6",
@ -9259,7 +9495,6 @@
"version": "1.1.0", "version": "1.1.0",
"resolved": "https://registry.npmjs.org/is-regex/-/is-regex-1.1.0.tgz", "resolved": "https://registry.npmjs.org/is-regex/-/is-regex-1.1.0.tgz",
"integrity": "sha512-iI97M8KTWID2la5uYXlkbSDQIg4F6o1sYboZKKTDpnDQMLtUL86zxhgDet3Q2SriaYsyGqZ6Mn2SjbRKeLHdqw==", "integrity": "sha512-iI97M8KTWID2la5uYXlkbSDQIg4F6o1sYboZKKTDpnDQMLtUL86zxhgDet3Q2SriaYsyGqZ6Mn2SjbRKeLHdqw==",
"dev": true,
"requires": { "requires": {
"has-symbols": "^1.0.1" "has-symbols": "^1.0.1"
} }
@ -9297,7 +9532,6 @@
"version": "1.0.3", "version": "1.0.3",
"resolved": "https://registry.npmjs.org/is-symbol/-/is-symbol-1.0.3.tgz", "resolved": "https://registry.npmjs.org/is-symbol/-/is-symbol-1.0.3.tgz",
"integrity": "sha512-OwijhaRSgqvhm/0ZdAcXNZt9lYdKFpcRDT5ULUuYXPoT794UNOdU+gpT6Rzo7b4V2HUl/op6GqY894AZwv9faQ==", "integrity": "sha512-OwijhaRSgqvhm/0ZdAcXNZt9lYdKFpcRDT5ULUuYXPoT794UNOdU+gpT6Rzo7b4V2HUl/op6GqY894AZwv9faQ==",
"dev": true,
"requires": { "requires": {
"has-symbols": "^1.0.1" "has-symbols": "^1.0.1"
} }
@ -11210,8 +11444,7 @@
"lodash": { "lodash": {
"version": "4.17.15", "version": "4.17.15",
"resolved": "https://registry.npmjs.org/lodash/-/lodash-4.17.15.tgz", "resolved": "https://registry.npmjs.org/lodash/-/lodash-4.17.15.tgz",
"integrity": "sha512-8xOcRHvCjnocdS5cpwXQXVzmmh5e5+saE2QGoeQmbKmRS6J3VQppPOIt0MnmE+4xlZoumy0GPG0D0MVIQbNA1A==", "integrity": "sha512-8xOcRHvCjnocdS5cpwXQXVzmmh5e5+saE2QGoeQmbKmRS6J3VQppPOIt0MnmE+4xlZoumy0GPG0D0MVIQbNA1A=="
"dev": true
}, },
"lodash._basecopy": { "lodash._basecopy": {
"version": "3.0.1", "version": "3.0.1",
@ -11833,6 +12066,11 @@
"mkdirp": "*" "mkdirp": "*"
} }
}, },
"moment": {
"version": "2.27.0",
"resolved": "https://registry.npmjs.org/moment/-/moment-2.27.0.tgz",
"integrity": "sha512-al0MUK7cpIcglMv3YF13qSgdAIqxHTO7brRtaz3DlSULbqfazqkc5kEjNrLDOM7fsjshoFIihnU8snrP7zUvhQ=="
},
"move-concurrently": { "move-concurrently": {
"version": "1.0.1", "version": "1.0.1",
"resolved": "https://registry.npmjs.org/move-concurrently/-/move-concurrently-1.0.1.tgz", "resolved": "https://registry.npmjs.org/move-concurrently/-/move-concurrently-1.0.1.tgz",
@ -12316,14 +12554,21 @@
"object-inspect": { "object-inspect": {
"version": "1.8.0", "version": "1.8.0",
"resolved": "https://registry.npmjs.org/object-inspect/-/object-inspect-1.8.0.tgz", "resolved": "https://registry.npmjs.org/object-inspect/-/object-inspect-1.8.0.tgz",
"integrity": "sha512-jLdtEOB112fORuypAyl/50VRVIBIdVQOSUUGQHzJ4xBSbit81zRarz7GThkEFZy1RceYrWYcPcBFPQwHyAc1gA==", "integrity": "sha512-jLdtEOB112fORuypAyl/50VRVIBIdVQOSUUGQHzJ4xBSbit81zRarz7GThkEFZy1RceYrWYcPcBFPQwHyAc1gA=="
"dev": true },
"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": { "object-keys": {
"version": "1.1.1", "version": "1.1.1",
"resolved": "https://registry.npmjs.org/object-keys/-/object-keys-1.1.1.tgz", "resolved": "https://registry.npmjs.org/object-keys/-/object-keys-1.1.1.tgz",
"integrity": "sha512-NuAESUOUMrlIXOfHKzD6bpPu3tYt3xvjNdRIQ+FeT0lNb4K8WR70CaDxhuNguS2XG+GjkyMwOzsN5ZktImfhLA==", "integrity": "sha512-NuAESUOUMrlIXOfHKzD6bpPu3tYt3xvjNdRIQ+FeT0lNb4K8WR70CaDxhuNguS2XG+GjkyMwOzsN5ZktImfhLA=="
"dev": true
}, },
"object-visit": { "object-visit": {
"version": "1.0.1", "version": "1.0.1",
@ -12338,7 +12583,6 @@
"version": "4.1.0", "version": "4.1.0",
"resolved": "https://registry.npmjs.org/object.assign/-/object.assign-4.1.0.tgz", "resolved": "https://registry.npmjs.org/object.assign/-/object.assign-4.1.0.tgz",
"integrity": "sha512-exHJeq6kBKj58mqGyTQ9DFvrZC/eR6OwxzoM9YRoGBqrXYonaFyGiFMuc9VZrXf7DarreEwMpurG3dd+CNyW5w==", "integrity": "sha512-exHJeq6kBKj58mqGyTQ9DFvrZC/eR6OwxzoM9YRoGBqrXYonaFyGiFMuc9VZrXf7DarreEwMpurG3dd+CNyW5w==",
"dev": true,
"requires": { "requires": {
"define-properties": "^1.1.2", "define-properties": "^1.1.2",
"function-bind": "^1.1.1", "function-bind": "^1.1.1",
@ -12732,6 +12976,11 @@
"no-case": "^2.2.0" "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": { "parse-asn1": {
"version": "5.1.5", "version": "5.1.5",
"resolved": "https://registry.npmjs.org/parse-asn1/-/parse-asn1-5.1.5.tgz", "resolved": "https://registry.npmjs.org/parse-asn1/-/parse-asn1-5.1.5.tgz",
@ -13739,7 +13988,6 @@
"version": "7.3.1", "version": "7.3.1",
"resolved": "https://registry.npmjs.org/promise/-/promise-7.3.1.tgz", "resolved": "https://registry.npmjs.org/promise/-/promise-7.3.1.tgz",
"integrity": "sha512-nolQXZ/4L+bP/UGlkfaIujX9BKxGwmQ9OT4mOt5yvy8iK1h3wqTEJCijzGANTCCl9nWjY41juyAn2K3Q1hLLTg==", "integrity": "sha512-nolQXZ/4L+bP/UGlkfaIujX9BKxGwmQ9OT4mOt5yvy8iK1h3wqTEJCijzGANTCCl9nWjY41juyAn2K3Q1hLLTg==",
"dev": true,
"requires": { "requires": {
"asap": "~2.0.3" "asap": "~2.0.3"
} }
@ -13871,6 +14119,29 @@
"integrity": "sha1-nsYfeQSYdXB9aUFFlv2Qek1xHnM=", "integrity": "sha1-nsYfeQSYdXB9aUFFlv2Qek1xHnM=",
"dev": true "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": { "ramda": {
"version": "0.25.0", "version": "0.25.0",
"resolved": "https://registry.npmjs.org/ramda/-/ramda-0.25.0.tgz", "resolved": "https://registry.npmjs.org/ramda/-/ramda-0.25.0.tgz",
@ -13971,11 +14242,30 @@
"scheduler": "^0.13.5" "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": { "react-is": {
"version": "16.13.1", "version": "16.13.1",
"resolved": "https://registry.npmjs.org/react-is/-/react-is-16.13.1.tgz", "resolved": "https://registry.npmjs.org/react-is/-/react-is-16.13.1.tgz",
"integrity": "sha512-24e6ynE2H+OKt4kqsOvNd8kBpV65zoxbA4BVsEOB3ARVWQki/DHzaUoC5KuON/BiccDaCCTZBuOcfZs70kR8bQ==" "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": { "read": {
"version": "1.0.7", "version": "1.0.7",
"resolved": "https://registry.npmjs.org/read/-/read-1.0.7.tgz", "resolved": "https://registry.npmjs.org/read/-/read-1.0.7.tgz",
@ -14158,6 +14448,15 @@
"safe-regex": "^1.1.0" "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": { "regexpu-core": {
"version": "4.7.0", "version": "4.7.0",
"resolved": "https://registry.npmjs.org/regexpu-core/-/regexpu-core-4.7.0.tgz", "resolved": "https://registry.npmjs.org/regexpu-core/-/regexpu-core-4.7.0.tgz",
@ -14716,8 +15015,7 @@
"setimmediate": { "setimmediate": {
"version": "1.0.5", "version": "1.0.5",
"resolved": "https://registry.npmjs.org/setimmediate/-/setimmediate-1.0.5.tgz", "resolved": "https://registry.npmjs.org/setimmediate/-/setimmediate-1.0.5.tgz",
"integrity": "sha1-KQy7Iy4waULX1+qbg3Mqt4VvgoU=", "integrity": "sha1-KQy7Iy4waULX1+qbg3Mqt4VvgoU="
"dev": true
}, },
"setprototypeof": { "setprototypeof": {
"version": "1.1.0", "version": "1.1.0",
@ -14772,7 +15070,6 @@
"version": "0.2.2", "version": "0.2.2",
"resolved": "https://registry.npmjs.org/simple-swizzle/-/simple-swizzle-0.2.2.tgz", "resolved": "https://registry.npmjs.org/simple-swizzle/-/simple-swizzle-0.2.2.tgz",
"integrity": "sha1-pNprY1/8zMoz9w0Xy5JZLeleVXo=", "integrity": "sha1-pNprY1/8zMoz9w0Xy5JZLeleVXo=",
"dev": true,
"requires": { "requires": {
"is-arrayish": "^0.3.1" "is-arrayish": "^0.3.1"
}, },
@ -14780,8 +15077,7 @@
"is-arrayish": { "is-arrayish": {
"version": "0.3.2", "version": "0.3.2",
"resolved": "https://registry.npmjs.org/is-arrayish/-/is-arrayish-0.3.2.tgz", "resolved": "https://registry.npmjs.org/is-arrayish/-/is-arrayish-0.3.2.tgz",
"integrity": "sha512-eVRqCvVlZbuw3GrM63ovNSNAeA1K16kaR/LRY/92w0zxQ5/1YzwblUX652i4Xs9RwAGjW9d9y6X88t8OaAJfWQ==", "integrity": "sha512-eVRqCvVlZbuw3GrM63ovNSNAeA1K16kaR/LRY/92w0zxQ5/1YzwblUX652i4Xs9RwAGjW9d9y6X88t8OaAJfWQ=="
"dev": true
} }
} }
}, },
@ -14953,15 +15249,6 @@
"integrity": "sha1-PpNdfd1zYxuXZZlW1VEo6HtQhKM=", "integrity": "sha1-PpNdfd1zYxuXZZlW1VEo6HtQhKM=",
"dev": true "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": { "sparkles": {
"version": "1.0.1", "version": "1.0.1",
"resolved": "https://registry.npmjs.org/sparkles/-/sparkles-1.0.1.tgz", "resolved": "https://registry.npmjs.org/sparkles/-/sparkles-1.0.1.tgz",
@ -15234,7 +15521,6 @@
"version": "1.0.1", "version": "1.0.1",
"resolved": "https://registry.npmjs.org/string.prototype.trimend/-/string.prototype.trimend-1.0.1.tgz", "resolved": "https://registry.npmjs.org/string.prototype.trimend/-/string.prototype.trimend-1.0.1.tgz",
"integrity": "sha512-LRPxFUaTtpqYsTeNKaFOw3R4bxIzWOnbQ837QfBylo8jIxtcbK/A/sMV7Q+OAV/vWo+7s25pOE10KYSjaSO06g==", "integrity": "sha512-LRPxFUaTtpqYsTeNKaFOw3R4bxIzWOnbQ837QfBylo8jIxtcbK/A/sMV7Q+OAV/vWo+7s25pOE10KYSjaSO06g==",
"dev": true,
"requires": { "requires": {
"define-properties": "^1.1.3", "define-properties": "^1.1.3",
"es-abstract": "^1.17.5" "es-abstract": "^1.17.5"
@ -15244,7 +15530,6 @@
"version": "1.0.1", "version": "1.0.1",
"resolved": "https://registry.npmjs.org/string.prototype.trimstart/-/string.prototype.trimstart-1.0.1.tgz", "resolved": "https://registry.npmjs.org/string.prototype.trimstart/-/string.prototype.trimstart-1.0.1.tgz",
"integrity": "sha512-XxZn+QpvrBI1FOcg6dIpxUPgWCPuNXvMD72aaRaUQv1eD4e/Qy8i/hFTe0BUmD60p/QA6bh1avmuPTfNjqVWRw==", "integrity": "sha512-XxZn+QpvrBI1FOcg6dIpxUPgWCPuNXvMD72aaRaUQv1eD4e/Qy8i/hFTe0BUmD60p/QA6bh1avmuPTfNjqVWRw==",
"dev": true,
"requires": { "requires": {
"define-properties": "^1.1.3", "define-properties": "^1.1.3",
"es-abstract": "^1.17.5" "es-abstract": "^1.17.5"
@ -16023,8 +16308,7 @@
"ua-parser-js": { "ua-parser-js": {
"version": "0.7.21", "version": "0.7.21",
"resolved": "https://registry.npmjs.org/ua-parser-js/-/ua-parser-js-0.7.21.tgz", "resolved": "https://registry.npmjs.org/ua-parser-js/-/ua-parser-js-0.7.21.tgz",
"integrity": "sha512-+O8/qh/Qj8CgC6eYBVBykMrNtp5Gebn4dlGD/kKXVkJNDwyrAwSIqwz8CDf+tsAIWVycKcku6gIXJ0qwx/ZXaQ==", "integrity": "sha512-+O8/qh/Qj8CgC6eYBVBykMrNtp5Gebn4dlGD/kKXVkJNDwyrAwSIqwz8CDf+tsAIWVycKcku6gIXJ0qwx/ZXaQ=="
"dev": true
}, },
"uglify-js": { "uglify-js": {
"version": "3.10.0", "version": "3.10.0",

5
samples/react-adaptive-cards-image-gallery/package.json
View File

@ -17,6 +17,8 @@
"@microsoft/sp-office-ui-fabric-core": "1.10.0", "@microsoft/sp-office-ui-fabric-core": "1.10.0",
"@microsoft/sp-property-pane": "1.10.0", "@microsoft/sp-property-pane": "1.10.0",
"@microsoft/sp-webpart-base": "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/es6-promise": "0.0.33",
"@types/react": "16.8.8", "@types/react": "16.8.8",
"@types/react-dom": "16.8.3", "@types/react-dom": "16.8.3",
@ -24,8 +26,7 @@
"adaptivecards": "^1.1.0", "adaptivecards": "^1.1.0",
"office-ui-fabric-react": "6.189.2", "office-ui-fabric-react": "6.189.2",
"react": "16.8.5", "react": "16.8.5",
"react-dom": "16.8.5", "react-dom": "16.8.5"
"sp-pnp-js": "^3.0.10"
}, },
"resolutions": { "resolutions": {
"@types/react": "16.8.8" "@types/react": "16.8.8"

6
samples/react-adaptive-cards-image-gallery/src/webparts/adaptiveCardsImageGallery/AdaptiveCardsImageGalleryWebPart.ts
View File

@ -7,7 +7,7 @@ import { IPropertyPaneConfiguration, PropertyPaneTextField } from "@microsoft/sp
import * as strings from 'AdaptiveCardsImageGalleryWebPartStrings'; import * as strings from 'AdaptiveCardsImageGalleryWebPartStrings';
import AdaptiveCardsImageGallery from './components/AdaptiveCardsImageGallery'; import AdaptiveCardsImageGallery from './components/AdaptiveCardsImageGallery';
import { IAdaptiveCardsImageGalleryProps } from './components/IAdaptiveCardsImageGalleryProps'; import { IAdaptiveCardsImageGalleryProps } from './components/IAdaptiveCardsImageGalleryProps';
import pnp from 'sp-pnp-js'; import { sp } from '@pnp/sp/presets/all';
export interface IAdaptiveCardsImageGalleryWebPartProps { export interface IAdaptiveCardsImageGalleryWebPartProps {
imageGalleryName: string; imageGalleryName: string;
@ -17,7 +17,8 @@ export interface IAdaptiveCardsImageGalleryWebPartProps {
export default class AdaptiveCardsImageGalleryWebPart extends BaseClientSideWebPart<IAdaptiveCardsImageGalleryWebPartProps> { export default class AdaptiveCardsImageGalleryWebPart extends BaseClientSideWebPart<IAdaptiveCardsImageGalleryWebPartProps> {
public async onInit(): Promise<void> { public async onInit(): Promise<void> {
return super.onInit().then(_ => { return super.onInit().then(_ => {
pnp.setup({ // Setup context to PnPjs
sp.setup({
spfxContext: this.context spfxContext: this.context
}); });
}); });
@ -27,6 +28,7 @@ export default class AdaptiveCardsImageGalleryWebPart extends BaseClientSideWebP
const element: React.ReactElement<IAdaptiveCardsImageGalleryProps > = React.createElement( const element: React.ReactElement<IAdaptiveCardsImageGalleryProps > = React.createElement(
AdaptiveCardsImageGallery, AdaptiveCardsImageGallery,
{ {
context: this.context,
serviceScope: this.context.serviceScope, serviceScope: this.context.serviceScope,
imageGalleryName: this.properties.imageGalleryName || "Adaptive Card Images", imageGalleryName: this.properties.imageGalleryName || "Adaptive Card Images",
imagesToDisplay: this.properties.imagesToDisplay || 10 imagesToDisplay: this.properties.imagesToDisplay || 10

161
samples/react-adaptive-cards-image-gallery/src/webparts/adaptiveCardsImageGallery/components/AdaptiveCardsImageGallery.tsx
View File

@ -1,36 +1,40 @@
import * as React from 'react'; import * as React from 'react';
import styles from './AdaptiveCardsImageGallery.module.scss'; import styles from './AdaptiveCardsImageGallery.module.scss';
import * as strings from 'AdaptiveCardsImageGalleryWebPartStrings';
import { IAdaptiveCardsImageGalleryProps } from './IAdaptiveCardsImageGalleryProps'; import { IAdaptiveCardsImageGalleryProps } from './IAdaptiveCardsImageGalleryProps';
import { IAdaptiveCardsImageGalleryState } from './IAdaptiveCardsImageGalleryState'; 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 * as AdaptiveCards from "adaptivecards";
import { ImageGalleryService, IImageGalleryService } from '../services/ImageGalleryService'; import { ImageGalleryService, IImageGalleryService } from '../services/ImageGalleryService';
import { ServiceScope, Environment, EnvironmentType } from '@microsoft/sp-core-library'; import { ServiceScope, Environment, EnvironmentType } from '@microsoft/sp-core-library';
import { Spinner, SpinnerSize } from 'office-ui-fabric-react/lib/Spinner'; import { Spinner, SpinnerSize } from 'office-ui-fabric-react/lib/Spinner';
export default class AdaptiveCardsImageGallery extends React.Component<IAdaptiveCardsImageGalleryProps, IAdaptiveCardsImageGalleryState> { export default class AdaptiveCardsImageGallery extends React.Component<IAdaptiveCardsImageGalleryProps, IAdaptiveCardsImageGalleryState> {
// The rendering container
private _acContainer: HTMLDivElement;
private ImageGalleryServiceInstance: IImageGalleryService; private ImageGalleryServiceInstance: IImageGalleryService;
private _galleryListName: string; private _galleryListName: string;
private _noOfItems: number; private _noOfItems: number;
private card: any; private card: any;
private renderedCard: any = "";
private imagesJSON = []; private imagesJSON = [];
constructor(props: IAdaptiveCardsImageGalleryProps) { constructor(props: IAdaptiveCardsImageGalleryProps) {
super(props); super(props);
this.state = { this.state = {
galleryItems: null, galleryItems: []
isLoading: true,
showErrorMessage: false
}; };
let serviceScope: ServiceScope;
serviceScope = this.props.serviceScope;
this._galleryListName = this.props.imageGalleryName; this._galleryListName = this.props.imageGalleryName;
this._noOfItems = this.props.imagesToDisplay; 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 // Based on the type of environment, return the correct instance of the ImageGalleryServiceInstance interface
if (Environment.type == EnvironmentType.SharePoint || Environment.type == EnvironmentType.ClassicSharePoint) { 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[]) => { this.ImageGalleryServiceInstance.getGalleryImages(this._galleryListName, this._noOfItems).then((galleryImages: any[]) => {
galleryImages.forEach(adaptiveImage => { this.setState({ galleryItems: galleryImages });
let image = {}; this.showAdaptiveCard();
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 });
}); });
} }
private _executeActionHandler = (action: AdaptiveCards.Action) => { public componentWillReceiveProps(nextProps: IAdaptiveCardsImageGalleryProps) {
window.location.href = action.iconUrl; 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> { public render(): React.ReactElement<IAdaptiveCardsImageGalleryProps> {
return ( return (
<div className={styles.adaptiveCardsImageGallery}> <div className={styles.adaptiveCardsImageGallery}>
<div className={styles.container}> <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>
</div> </div>
); );

2
samples/react-adaptive-cards-image-gallery/src/webparts/adaptiveCardsImageGallery/components/IAdaptiveCardsImageGalleryProps.ts
View File

@ -1,6 +1,8 @@
import { ServiceScope } from '@microsoft/sp-core-library'; import { ServiceScope } from '@microsoft/sp-core-library';
import { WebPartContext } from "@microsoft/sp-webpart-base";
export interface IAdaptiveCardsImageGalleryProps { export interface IAdaptiveCardsImageGalleryProps {
context: WebPartContext;
serviceScope: ServiceScope; serviceScope: ServiceScope;
imageGalleryName: string; imageGalleryName: string;
imagesToDisplay: number; imagesToDisplay: number;

2
samples/react-adaptive-cards-image-gallery/src/webparts/adaptiveCardsImageGallery/components/IAdaptiveCardsImageGalleryState.ts
View File

@ -1,5 +1,3 @@
export interface IAdaptiveCardsImageGalleryState { export interface IAdaptiveCardsImageGalleryState {
galleryItems: any[]; galleryItems: any[];
isLoading: boolean;
showErrorMessage: boolean;
} }

3
samples/react-adaptive-cards-image-gallery/src/webparts/adaptiveCardsImageGallery/loc/en-us.js vendored
View File

@ -5,5 +5,8 @@ define([], function() {
"DescriptionFieldLabel": "Description Field", "DescriptionFieldLabel": "Description Field",
"ImageGalleryNameFieldLabel": "Image Gallery", "ImageGalleryNameFieldLabel": "Image Gallery",
"ImagesToDisplayFieldLabel": "Number of images to display", "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
samples/react-adaptive-cards-image-gallery/src/webparts/adaptiveCardsImageGallery/loc/mystrings.d.ts vendored
View File

@ -3,6 +3,9 @@ declare interface IAdaptiveCardsImageGalleryWebPartStrings {
BasicGroupName: string; BasicGroupName: string;
ImageGalleryNameFieldLabel: string; ImageGalleryNameFieldLabel: string;
ImagesToDisplayFieldLabel: string; ImagesToDisplayFieldLabel: string;
ConfigureWebPartLabel: string;
ConfigureDescription: string;
ConfigureLabel: string;
} }
declare module 'AdaptiveCardsImageGalleryWebPartStrings' { declare module 'AdaptiveCardsImageGalleryWebPartStrings' {

46
samples/react-adaptive-cards-image-gallery/src/webparts/adaptiveCardsImageGallery/services/ImageGalleryService.ts
View File

@ -1,7 +1,7 @@
import { ServiceKey, ServiceScope } from '@microsoft/sp-core-library'; import { ServiceKey, ServiceScope } from '@microsoft/sp-core-library';
import { PageContext } from '@microsoft/sp-page-context'; import { PageContext } from '@microsoft/sp-page-context';
import { SPHttpClient, SPHttpClientResponse } from '@microsoft/sp-http'; import { SPHttpClient, SPHttpClientResponse } from '@microsoft/sp-http';
import * as pnp from "sp-pnp-js"; import { sp } from '@pnp/sp/presets/all';
export interface IImageGalleryService { export interface IImageGalleryService {
getGalleryImages: (listName: string, rowLimit: number) => Promise<any[]>; getGalleryImages: (listName: string, rowLimit: number) => Promise<any[]>;
@ -9,7 +9,7 @@ export interface IImageGalleryService {
export class ImageGalleryService implements IImageGalleryService { export class ImageGalleryService implements IImageGalleryService {
public static readonly serviceKey: ServiceKey<IImageGalleryService> = ServiceKey.create<IImageGalleryService>('ImageGallery:ImageGalleryService', ImageGalleryService); public static readonly serviceKey: ServiceKey<IImageGalleryService> = ServiceKey.create<IImageGalleryService>('ImageGallery:ImageGalleryService', ImageGalleryService);
private _pageContext: PageContext; private _pageContext: PageContext;
constructor(serviceScope: ServiceScope) { constructor(serviceScope: ServiceScope) {
serviceScope.whenFinished(() => { serviceScope.whenFinished(() => {
@ -17,38 +17,18 @@ export class ImageGalleryService implements IImageGalleryService {
}); });
} }
public getGalleryImages(listName: string, rowLimit: number): Promise<any[]> { public async getGalleryImages(listName: string, rowLimit: number): Promise<any[]> {
const xml = `<View> try {
<ViewFields> let items: any = await sp.web.lists.getByTitle(listName).items
<FieldRef Name='ID' /> .select("Id", "Title", "ImageLink", "NavigationURL")
<FieldRef Name='Title' /> .orderBy("SortOrder")
<FieldRef Name='ImageLink' /> .top(rowLimit)
<FieldRef Name='NavigationURL' /> .get();
</ViewFields>
<Query>
<OrderBy>
<FieldRef Name='SortOrder' />
</OrderBy>
</Query>
<RowLimit>` + rowLimit + `</RowLimit>
</View>`;
const q: any = { return Promise.resolve(items);
ViewXml: xml, }
}; catch (error) {
return Promise.reject(error);
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));
} }
} }
} }

58
samples/react-banner/README.md Normal file
View File

@ -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.
![Banner](https://github.com/pnp/sp-starter-kit/raw/master/assets/images/components/part-banner.gif)
## 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
![Banner](https://github.com/pnp/sp-starter-kit/raw/master/assets/images/components/part-banner.png)
# 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" />

2
samples/react-directory/.yo-rc.json
View File

@ -1,6 +1,6 @@
{ {
"@microsoft/generator-sharepoint": { "@microsoft/generator-sharepoint": {
"version": "1.8.2", "version": "1.11.0",
"libraryName": "react-directory", "libraryName": "react-directory",
"libraryId": "5b62bc16-3a71-461d-be2f-16bfcb011e8a", "libraryId": "5b62bc16-3a71-461d-be2f-16bfcb011e8a",
"environment": "spo", "environment": "spo",

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

@ -31,7 +31,7 @@
## Used SharePoint Framework Version ## Used SharePoint Framework Version
![drop](https://img.shields.io/badge/version-1.8.2-green.svg) ![drop](https://img.shields.io/badge/version-1.11-green.svg)
## Applies to ## Applies to
@ -44,24 +44,26 @@
Property |Type|Required| comments Property |Type|Required| comments
--------------------|----|--------|---------- --------------------|----|--------|----------
Web Part Title | Text| no| Title | Text| no|WebPart Title
searchFirstName | boolean|no| Lastname or Firstname search query
## Solution ## 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) Solution|Author(s)
--------|--------- --------|---------
Directory Web Part|João Mendes Directory Web Part|João Mendes
Directory Web Part| Peter Paul Kirschner ([@petkir_at](https://twitter.com/petkir_at))
## Version history ## Version history
Version|Date|Comments Version|Date|Comments
-------|----|-------- -------|----|--------
1.0.0|July 29, 2019|Initial release 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 ## Disclaimer

9
samples/react-directory/config/package-solution.json
View File

@ -1,9 +1,16 @@
{ {
"$schema": "https://developer.microsoft.com/json-schemas/spfx-build/package-solution.schema.json", "$schema": "https://developer.microsoft.com/json-schemas/spfx-build/package-solution.schema.json",
"solution": { "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", "name": "Search Directory",
"id": "5b62bc16-3a71-461d-be2f-16bfcb011e8a", "id": "5b62bc16-3a71-461d-be2f-16bfcb011e8a",
"version": "1.0.0.0", "version": "1.0.1.0",
"includeClientSideAssets": true, "includeClientSideAssets": true,
"skipFeatureDeployment": true, "skipFeatureDeployment": true,
"isDomainIsolated": false "isDomainIsolated": false

14854
samples/react-directory/package-lock.json generated
View File

File diff suppressed because it is too large Load Diff

36
samples/react-directory/package.json
View File

@ -1,7 +1,8 @@
{ {
"name": "react-directory", "name": "react-directory",
"version": "0.0.1", "version": "1.0.1",
"private": true, "private": true,
"main": "lib/index.js",
"engines": { "engines": {
"node": ">=0.10.0" "node": ">=0.10.0"
}, },
@ -14,37 +15,36 @@
"test:watch": "./node_modules/.bin/jest --config ./config/jest.config.json --watchAll" "test:watch": "./node_modules/.bin/jest --config ./config/jest.config.json --watchAll"
}, },
"dependencies": { "dependencies": {
"@microsoft/sp-core-library": "1.8.2", "@microsoft/sp-core-library": "1.11.0",
"@microsoft/sp-lodash-subset": "1.8.2", "@microsoft/sp-lodash-subset": "1.11.0",
"@microsoft/sp-office-ui-fabric-core": "1.8.2", "@microsoft/sp-office-ui-fabric-core": "1.11.0",
"@microsoft/sp-property-pane": "1.8.2", "@microsoft/sp-property-pane": "1.11.0",
"@microsoft/sp-webpart-base": "1.8.2", "@microsoft/sp-webpart-base": "1.11.0",
"@pnp/pnpjs": "^1.3.3", "@pnp/pnpjs": "^1.3.3",
"@pnp/spfx-controls-react": "1.13.2", "@pnp/spfx-controls-react": "1.13.2",
"@pnp/spfx-property-controls": "1.15.0", "@pnp/spfx-property-controls": "1.15.0",
"@types/es6-promise": "0.0.33",
"@types/jquery": "^3.3.30", "@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", "@uifabric/fluent-theme": "^0.16.9",
"jquery": "^3.4.1", "jquery": "^3.4.1",
"office-ui-fabric-react": "^6.182.0", "office-ui-fabric-react": "6.214.0",
"react": "16.7.0", "react": "16.7.0",
"react-dom": "16.7.0" "react-dom": "16.7.0"
}, },
"resolutions": { "resolutions": {
"@types/react": "16.7.22" "@types/react": "16.8.8"
}, },
"devDependencies": { "devDependencies": {
"@microsoft/rush-stack-compiler-3.3": "~0.2.x", "@microsoft/rush-stack-compiler-3.3": "0.3.5",
"@microsoft/sp-build-web": "1.8.2", "@microsoft/sp-build-web": "1.11.0",
"@microsoft/sp-module-interfaces": "1.8.2", "@microsoft/sp-module-interfaces": "1.11.0",
"@microsoft/sp-tslint-rules": "1.8.2", "@microsoft/sp-tslint-rules": "1.11.0",
"@microsoft/sp-webpart-workbench": "1.8.2", "@microsoft/sp-webpart-workbench": "1.11.0",
"@types/chai": "3.4.34", "@types/chai": "3.4.34",
"@types/es6-promise": "0.0.33",
"@types/mocha": "2.2.38", "@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", "@voitanos/jest-preset-spfx-react16": "^1.1.0",
"ajv": "~5.2.2", "ajv": "~5.2.2",
"gulp": "~3.9.1", "gulp": "~3.9.1",

7
samples/react-directory/src/SPServices/ISPServices.ts Normal file
View File

@ -0,0 +1,7 @@
import { PeoplePickerEntity } from '@pnp/sp';
export interface ISPServices {
searchUsers(searchString: string, searchFirstName: boolean);
}

210
samples/react-directory/src/SPServices/MockDataSearch.json Normal file
View File

@ -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": []
}

112
samples/react-directory/src/SPServices/spMockServices.ts Normal file
View File

@ -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);
});
}
}

47
samples/react-directory/src/SPServices/spservices.ts
View File

@ -3,9 +3,10 @@ import { graph } from "@pnp/graph";
import { sp, PeoplePickerEntity, ClientPeoplePickerQueryParameters, SearchQuery, SearchResults, SearchProperty, SortDirection } from '@pnp/sp'; import { sp, PeoplePickerEntity, ClientPeoplePickerQueryParameters, SearchQuery, SearchResults, SearchProperty, SortDirection } from '@pnp/sp';
import { PrincipalType } from "@pnp/sp/src/sitegroups"; import { PrincipalType } from "@pnp/sp/src/sitegroups";
import { isRelativeUrl } from "office-ui-fabric-react"; 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 { public async searchUsers(searchString: string, searchFirstName: boolean): Promise<SearchResults> {
let currentUserProperties: any = await sp.profiles.getPropertiesFor(user); const _search = !searchFirstName ? `LastName:${searchString}*` : `FirstName:${searchString}*`;
return currentUserProperties; const searchProperties: string[] = ["FirstName", "LastName", "PreferredName", "WorkEmail", "OfficeNumber", "PictureURL", "WorkPhone", "MobilePhone", "JobTitle", "Department", "Skills", "PastProjects", "BaseOfficeLocation", "SPS-UserType", "GroupId"];
} 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"];
try { try {
if (!searchString) return undefined; if (!searchString) return undefined;
let users = await sp.searchWithCaching(<SearchQuery>{ let users = await sp.searchWithCaching(<SearchQuery>{
Querytext: _search, Querytext: _search,
RowLimit:500, RowLimit: 500,
EnableInterleaving: true, EnableInterleaving: true,
SelectProperties: searchProperties, SelectProperties: searchProperties,
SourceId: 'b09a7990-05ea-4af9-81ef-edfab16c4e31', SourceId: 'b09a7990-05ea-4af9-81ef-edfab16c4e31',

2
samples/react-directory/src/webparts/directory/components/Directory.module.scss
View File

@ -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 { .directory {
.dropDownSortBy { .dropDownSortBy {

144
samples/react-directory/src/webparts/directory/components/Directory.tsx
View File

@ -1,11 +1,9 @@
import * as React from "react"; import * as React from "react";
import styles from "./Directory.module.scss"; import styles from "./Directory.module.scss";
import { IDirectoryProps } from "./IDirectoryProps"; import { IDirectoryProps } from "./IDirectoryProps";
import { escape } from "@microsoft/sp-lodash-subset";
import { PersonaCard } from "./PersonaCard/PersonaCard"; import { PersonaCard } from "./PersonaCard/PersonaCard";
import { spservices } from "../../../SPServices/spservices"; import { spservices } from "../../../SPServices/spservices";
import { IDirectoryState } from "./IDirectoryState"; import { IDirectoryState } from "./IDirectoryState";
import { DisplayMode } from "@microsoft/sp-core-library";
import * as strings from "DirectoryWebPartStrings"; import * as strings from "DirectoryWebPartStrings";
import { import {
Spinner, Spinner,
@ -20,15 +18,13 @@ import {
PivotLinkFormat, PivotLinkFormat,
PivotLinkSize, PivotLinkSize,
Dropdown, Dropdown,
DropdownMenuItemType,
IDropdownStyles,
IDropdownOption IDropdownOption
} from "office-ui-fabric-react"; } 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 { WebPartTitle } from "@pnp/spfx-controls-react/lib/WebPartTitle";
import { Root } from "@pnp/graph"; import { ISPServices } from "../../../SPServices/ISPServices";
import { IUserProperties } from "./PersonaCard/IUserProperties"; import { Environment, EnvironmentType } from "@microsoft/sp-core-library";
import { spMockServices } from "../../../SPServices/spMockServices";
const az: string[] = [ const az: string[] = [
"A", "A",
@ -68,8 +64,8 @@ const orderOptions: IDropdownOption[] = [
export default class Directory extends React.Component< export default class Directory extends React.Component<
IDirectoryProps, IDirectoryProps,
IDirectoryState IDirectoryState
> { > {
private _services: spservices = null; private _services: ISPServices = null;
constructor(props: IDirectoryProps) { constructor(props: IDirectoryProps) {
super(props); super(props);
@ -80,14 +76,19 @@ export default class Directory extends React.Component<
errorMessage: "", errorMessage: "",
hasError: false, hasError: false,
indexSelectedKey: "A", indexSelectedKey: "A",
searchString: "LastName" searchString: "LastName",
searchText: ""
}; };
if (Environment.type === EnvironmentType.Local) {
this._services = new spMockServices();
} else {
this._services = new spservices(this.props.context); this._services = new spservices(this.props.context);
}
// Register event handlers // Register event handlers
this._searchUsers = this._searchUsers.bind(this); this._searchUsers = this._searchUsers.bind(this);
this._selectedIndex = this._selectedIndex.bind(this); this._selectedIndex = this._selectedIndex.bind(this);
this._sortPeople = this._sortPeople.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 * @param pictureUrl
* @returns * @returns
*/ */
private getImageBase64(pictureUrl: string):Promise<string>{ private getImageBase64(pictureUrl: string): Promise<string> {
return new Promise((resolve, reject) => { return new Promise((resolve, reject) => {
let image = new Image(); let image = new Image();
image.addEventListener("load", () => { image.addEventListener("load", () => {
let tempCanvas = document.createElement("canvas"); let tempCanvas = document.createElement("canvas");
tempCanvas.width = image.width, tempCanvas.width = image.width,
tempCanvas.height = image.height, tempCanvas.height = image.height,
tempCanvas.getContext("2d").drawImage(image, 0, 0); tempCanvas.getContext("2d").drawImage(image, 0, 0);
let base64Str; let base64Str;
try { try {
base64Str = tempCanvas.toDataURL("image/png"); base64Str = tempCanvas.toDataURL("image/png");
} catch (e) { } catch (e) {
return ""; return "";
} }
resolve(base64Str); resolve(base64Str);
}); });
image.src = pictureUrl; image.src = pictureUrl;
}); });
} }
private _searchBoxChanged(newvalue: string): void {
this.setState({ searchText: newvalue }, () => this._searchUsers(newvalue));
}
private async _searchUsers(searchText: string) { private async _searchUsers(searchText: string) {
searchText = searchText.trim().length > 0 ? searchText : "A"; searchText = searchText.trim().length > 0 ? searchText : "A";
@ -139,16 +142,16 @@ export default class Directory extends React.Component<
searchText, searchText,
this.props.searchFirstName this.props.searchFirstName
); );
debugger;
if (users && users.PrimarySearchResults.length > 0){ if (users && users.PrimarySearchResults.length > 0) {
for (let index = 0; index < users.PrimarySearchResults.length; index++) { for (let index = 0; index < users.PrimarySearchResults.length; index++) {
let user:any = users.PrimarySearchResults[index] ; let user: any = users.PrimarySearchResults[index];
if (user.PictureURL){ if (user.PictureURL) {
user = { ...user, PictureURL: await this.getImageBase64(`/_layouts/15/userphoto.aspx?size=M&accountname=${user.WorkEmail}`)}; user = { ...user, PictureURL: await this.getImageBase64(`/_layouts/15/userphoto.aspx?size=M&accountname=${user.WorkEmail}`) };
users.PrimarySearchResults[index] = user ; users.PrimarySearchResults[index] = user;
} }
} }
} }
this.setState({ this.setState({
users: users:
@ -279,7 +282,7 @@ export default class Directory extends React.Component<
* @memberof Directory * @memberof Directory
*/ */
private _selectedIndex(item?: PivotItem, ev?: React.MouseEvent<HTMLElement>) { 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 = const diretoryGrid =
this.state.users && this.state.users.length > 0 this.state.users && this.state.users.length > 0
? this.state.users.map((user: any) => { ? this.state.users.map((user: any) => {
return ( return (
<PersonaCard <PersonaCard
context={this.props.context} context={this.props.context}
profileProperties={{ profileProperties={{
DisplayName: user.PreferredName, DisplayName: user.PreferredName,
Title: user.JobTitle, Title: user.JobTitle,
PictureUrl: user.PictureURL, PictureUrl: user.PictureURL,
Email: user.WorkEmail, Email: user.WorkEmail,
Department: user.Department, Department: user.Department,
WorkPhone: user.WorkPhone, WorkPhone: user.WorkPhone,
Location: user.OfficeNumber Location: user.OfficeNumber
? user.OfficeNumber ? user.OfficeNumber
: user.BaseOfficeLocation : user.BaseOfficeLocation
}} }}
/> />
); );
}) })
: []; : [];
return ( return (
@ -336,7 +339,8 @@ export default class Directory extends React.Component<
onClear={() => { onClear={() => {
this._searchUsers("A"); this._searchUsers("A");
}} }}
onChange={this._searchUsers} value={this.state.searchText}
onChange={this._searchBoxChanged}
/> />
<div> <div>
<Pivot <Pivot
@ -380,20 +384,20 @@ export default class Directory extends React.Component<
{this.state.errorMessage} {this.state.errorMessage}
</MessageBar> </MessageBar>
) : ( ) : (
<div className={styles.dropDownSortBy}> <div className={styles.dropDownSortBy}>
<Dropdown <Dropdown
placeholder={strings.DropDownPlaceHolderMessage} placeholder={strings.DropDownPlaceHolderMessage}
label={strings.DropDownPlaceLabelMessage} label={strings.DropDownPlaceLabelMessage}
options={orderOptions} options={orderOptions}
selectedKey={this.state.searchString} selectedKey={this.state.searchString}
onChange={(ev: any, value: IDropdownOption) => { onChange={(ev: any, value: IDropdownOption) => {
this._sortPeople(value.key.toString()); this._sortPeople(value.key.toString());
}} }}
styles={{ dropdown: { width: 200 } }} styles={{ dropdown: { width: 200 } }}
/> />
<div>{diretoryGrid}</div> <div>{diretoryGrid}</div>
</div> </div>
)} )}
</div> </div>
); );
} }

4
samples/react-directory/src/webparts/directory/components/IDirectoryState.ts
View File

@ -1,5 +1,4 @@
import { IProfileProperties } from "./../../../SPServices/IProfileProperties";
import { PeoplePickerEntity, SearchResult, SearchResults } from "@pnp/pnpjs";
export interface IDirectoryState { export interface IDirectoryState {
users: any; users: any;
isLoading: boolean; isLoading: boolean;
@ -7,4 +6,5 @@ export interface IDirectoryState {
hasError: boolean; hasError: boolean;
indexSelectedKey: string; indexSelectedKey: string;
searchString: string; searchString: string;
searchText: string;
} }

1
samples/react-directory/src/webparts/directory/components/PersonaCard/IPersonaCardProps.ts
View File

@ -1,7 +1,6 @@
import { WebPartContext } from "@microsoft/sp-webpart-base"; import { WebPartContext } from "@microsoft/sp-webpart-base";
import { ApplicationCustomizerContext } from "@microsoft/sp-application-base"; import { ApplicationCustomizerContext } from "@microsoft/sp-application-base";
import { IUserProperties } from "./IUserProperties"; import { IUserProperties } from "./IUserProperties";
import { PeoplePickerEntity, SearchResult, SearchResults } from "@pnp/pnpjs";
export interface IPersonaCardProps { export interface IPersonaCardProps {
context: WebPartContext | ApplicationCustomizerContext; context: WebPartContext | ApplicationCustomizerContext;

2
samples/react-directory/src/webparts/directory/components/PersonaCard/PersonaCard.module.scss
View File

@ -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 { .personaContainer {
display: inline-block; display: inline-block;

38
samples/react-directory/src/webparts/directory/components/PersonaCard/PersonaCard.tsx
View File

@ -3,24 +3,14 @@ import styles from './PersonaCard.module.scss';
import { IPersonaCardProps } from './IPersonaCardProps'; import { IPersonaCardProps } from './IPersonaCardProps';
import { IPersonaCardState } from './IPersonaCardState'; import { IPersonaCardState } from './IPersonaCardState';
import { import {
Version, Log, Environment, EnvironmentType,
Environment,
EnvironmentType,
ServiceScope,
Log,
Text,
} from '@microsoft/sp-core-library'; } from '@microsoft/sp-core-library';
import { SPComponentLoader } from '@microsoft/sp-loader'; import { SPComponentLoader } from '@microsoft/sp-loader';
import { import {
Persona, Persona,
PersonaCoin,
PersonaInitialsColor,
PersonaSize, PersonaSize,
IPersonaStyles,
Label,
DocumentCard, DocumentCard,
IDocumentCardStyles,
DocumentCardType, DocumentCardType,
Icon, Icon,
} from 'office-ui-fabric-react'; } from 'office-ui-fabric-react';
@ -32,7 +22,7 @@ const LIVE_PERSONA_COMPONENT_ID: string =
export class PersonaCard extends React.Component< export class PersonaCard extends React.Component<
IPersonaCardProps, IPersonaCardProps,
IPersonaCardState IPersonaCardState
> { > {
constructor(props: IPersonaCardProps) { constructor(props: IPersonaCardProps) {
super(props); super(props);
@ -44,12 +34,14 @@ export class PersonaCard extends React.Component<
* @memberof PersonaCard * @memberof PersonaCard
*/ */
public async componentDidMount() { public async componentDidMount() {
const sharedLibrary = await this._loadSPComponentById( if (Environment.type !== EnvironmentType.Local) {
LIVE_PERSONA_COMPONENT_ID const sharedLibrary = await this._loadSPComponentById(
); LIVE_PERSONA_COMPONENT_ID
const livePersonaCard: any = sharedLibrary.LivePersonaCard; );
console.log(livePersonaCard); const livePersonaCard: any = sharedLibrary.LivePersonaCard;
this.setState({ livePersonaCard: livePersonaCard }); console.log(livePersonaCard);
this.setState({ livePersonaCard: livePersonaCard });
}
} }
/** /**
@ -62,7 +54,7 @@ export class PersonaCard extends React.Component<
public componentDidUpdate( public componentDidUpdate(
prevProps: IPersonaCardProps, prevProps: IPersonaCardProps,
prevState: IPersonaCardState prevState: IPersonaCardState
): void {} ): void { }
/** /**
* *
@ -120,8 +112,8 @@ export class PersonaCard extends React.Component<
</span> </span>
</div> </div>
) : ( ) : (
'' ''
)} )}
{this.props.profileProperties.Location ? ( {this.props.profileProperties.Location ? (
<div> <div>
<Icon iconName="Poi" style={{ fontSize: '12px' }} /> <Icon iconName="Poi" style={{ fontSize: '12px' }} />
@ -131,8 +123,8 @@ export class PersonaCard extends React.Component<
</span> </span>
</div> </div>
) : ( ) : (
'' ''
)} )}
</Persona> </Persona>
</div> </div>
</DocumentCard> </DocumentCard>

4
samples/react-directory/tsconfig.json
View File

@ -5,6 +5,7 @@
"forceConsistentCasingInFileNames": true, "forceConsistentCasingInFileNames": true,
"module": "esnext", "module": "esnext",
"moduleResolution": "node", "moduleResolution": "node",
"resolveJsonModule" : true,
"jsx": "react", "jsx": "react",
"declaration": true, "declaration": true,
"sourceMap": true, "sourceMap": true,
@ -29,7 +30,8 @@
] ]
}, },
"include": [ "include": [
"src/**/*.ts" "src/**/*.ts",
"src/**/*.tsx"
], ],
"exclude": [ "exclude": [
"node_modules", "node_modules",

6
samples/react-events-aggregator/package-lock.json generated
View File

@ -10975,9 +10975,9 @@
} }
}, },
"lodash": { "lodash": {
"version": "4.17.15", "version": "4.17.19",
"resolved": "https://registry.npmjs.org/lodash/-/lodash-4.17.15.tgz", "resolved": "https://registry.npmjs.org/lodash/-/lodash-4.17.19.tgz",
"integrity": "sha512-8xOcRHvCjnocdS5cpwXQXVzmmh5e5+saE2QGoeQmbKmRS6J3VQppPOIt0MnmE+4xlZoumy0GPG0D0MVIQbNA1A==" "integrity": "sha512-JNvd8XER9GQX0v2qJgsaN/mzFCNA5BRe/j8JN9d+tWyGLSodKQHKFicdwNYzWwI3wjRnaKPsGj1XkBjx/F96DQ=="
}, },
"lodash._baseassign": { "lodash._baseassign": {
"version": "3.2.0", "version": "3.2.0",

2
samples/react-events-aggregator/package.json
View File

@ -37,7 +37,7 @@
"base64-url": ">=2.0.0", "base64-url": ">=2.0.0",
"fresh": ">=0.5.2", "fresh": ">=0.5.2",
"handlebars": ">=4.3.0", "handlebars": ">=4.3.0",
"lodash": ">=4.17.12", "lodash": ">=4.17.19",
"merge": ">=1.2.1", "merge": ">=1.2.1",
"morgan": ">=1.9.1", "morgan": ">=1.9.1",
"stringstream": ">=0.0.6", "stringstream": ">=0.0.6",

55
samples/react-followedsites/README.md Normal file
View File

@ -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.
![Followed Sites](https://github.com/pnp/sp-starter-kit/raw/master/assets/images/components/part-followed-sites.gif)
## 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
![Followed Sites](https://github.com/pnp/sp-starter-kit/raw/master/assets/images/components/part-followed-sites.png)
# 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" />

78
samples/react-links/README.md Normal file
View File

@ -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.
![Links](https://github.com/pnp/sp-starter-kit/raw/master/assets/images/components/part-links.gif)
## 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
![Links](https://github.com/pnp/sp-starter-kit/raw/master/assets/images/components/part-links.png)
# 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" />

98
samples/react-lob-integration/README.md Normal file
View File

@ -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)
![LOB Integration](https://github.com/pnp/sp-starter-kit/raw/master/assets/images/components/part-lob-integration.png)
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
![Links](https://github.com/pnp/sp-starter-kit/raw/master/assets/images/components/part-lob-integration.png)
# 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" />

52
samples/react-people-directory/README.md Normal file
View File

@ -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.
![People Directory](https://github.com/pnp/sp-starter-kit/raw/master/assets/images/components/part-people-directory.gif)
## 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
![People Directory](https://github.com/pnp/sp-starter-kit/raw/master/assets/images/components/part-people-directory.png)
# 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" />

55
samples/react-personal-calendar/README.md Normal file
View File

@ -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.
![Personal Calendar](https://github.com/pnp/sp-starter-kit/raw/master/assets/images/components/part-personal-calendar.gif)
## 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
![Personal Calendar](https://github.com/pnp/sp-starter-kit/raw/master/assets/images/components/part-personal-calendar.png)
# 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" />

54
samples/react-personal-contacts/README.md Normal file
View File

@ -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.
![Personal Contacts](https://github.com/pnp/sp-starter-kit/raw/master/assets/images/components/part-personal-contacts.gif)
## 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
![Personal Contacts](https://github.com/pnp/sp-starter-kit/raw/master/assets/images/components/part-personal-contacts.png)
# 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" />

53
samples/react-personal-email/README.md Normal file
View File

@ -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.
![Personal Email](https://github.com/pnp/sp-starter-kit/raw/master/assets/images/components/part-personal-email.gif)
## 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
![Personal Email](https://github.com/pnp/sp-starter-kit/raw/master/assets/images/components/part-personal-email.png)
# 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" />

52
samples/react-personal-tasks/README.md Normal file
View File

@ -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.
![Personal Tasks](https://github.com/pnp/sp-starter-kit/raw/master/assets/images/components/part-personal-tasks.gif)
## 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
![Personal Tasks](https://github.com/pnp/sp-starter-kit/raw/master/assets/images/components/part-personal-tasks.png)
# 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" />

53
samples/react-recent-contacts/README.md Normal file
View File

@ -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.
![Recent Contacts](https://github.com/pnp/sp-starter-kit/raw/master/assets/images/components/part-recent-contacts.gif)
## 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
![Recent Contacts](https://github.com/pnp/sp-starter-kit/raw/master/assets/images/components/part-recent-contacts.png)
# 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" />

53
samples/react-recently-used-documents/README.md Normal file
View File

@ -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.
![Recently Used Documents](https://github.com/pnp/sp-starter-kit/raw/master/assets/images/components/part-recently-used-documents.gif)
## 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
![Recently Used Documents](https://github.com/pnp/sp-starter-kit/raw/master/assets/images/components/part-recently-used-documents.png)
# 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" />

52
samples/react-recently-visited-sites/README.md Normal file
View File

@ -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.
![Recently Visited Sites](https://github.com/pnp/sp-starter-kit/raw/master/assets/images/components/part-recently-visited-sites.gif)
## 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
![Recently Visited Sites](https://github.com/pnp/sp-starter-kit/raw/master/assets/images/components/part-recently-visited-sites.png)
# 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" />

19055
samples/react-script-editor/package-lock.json generated Normal file
View File

File diff suppressed because it is too large Load Diff

2
samples/react-script-editor/package.json
View File

@ -44,4 +44,4 @@
"clean": "gulp clean", "clean": "gulp clean",
"test": "gulp test" "test": "gulp test"
} }
} }

59
samples/react-site-information/README.md Normal file
View File

@ -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.
![Site Information](https://github.com/pnp/sp-starter-kit/raw/master/assets/images/components/part-site-information.gif)
## 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
![Site Information](https://github.com/pnp/sp-starter-kit/raw/master/assets/images/components/part-site-information.png)
# 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" />

56
samples/react-stock-information/README.md Normal file
View File

@ -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.
![Stock Information](https://github.com/pnp/sp-starter-kit/raw/master/assets/images/components/part-stock.gif)
## 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
![Stock Information](https://github.com/pnp/sp-starter-kit/raw/master/assets/images/components/part-stock.png)
# 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" />

68
samples/react-tiles/README.md Normal file
View File

@ -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.
![Tiles](https://github.com/pnp/sp-starter-kit/raw/master/assets/images/components/part-tiles.gif)
## 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
![Tiles](https://github.com/pnp/sp-starter-kit/raw/master/assets/images/components/part-tiles.png)
# 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" />

14
samples/react-timeline/README.md
View File

@ -66,6 +66,7 @@ Below NPM package is used to develop this sample.
1. @pnp/sp (https://www.npmjs.com/package/@pnp/sp) 1. @pnp/sp (https://www.npmjs.com/package/@pnp/sp)
2. @pnp/spfx-controls-react (https://pnp.github.io/sp-dev-fx-controls-react/) 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/) 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 ## Used SharePoint Framework Version
@ -102,11 +103,16 @@ Version|Date|Comments
## Minimal Path to Awesome ## Minimal Path to Awesome
- Clone this repo - Clone this repository.
- On the command prompt, navigate to the web part folder and execute:
- `npm i` - `npm i`
- `gulp serve --nobrowser` - `gulp bundle --ship`
- Open workbench on your tenant, i.e. https://contoso.sharepoint.com/sites/salesteam/_layouts/15/workbench.aspx - `gulp package-solution --ship`
- Search and add web part "Timeline" - 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 ## Features

54
samples/react-weather-information/README.md Normal file
View File

@ -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.
![Weather Information](https://github.com/pnp/sp-starter-kit/raw/master/assets/images/components/part-weather.gif)
## 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
![Weather Information](https://github.com/pnp/sp-starter-kit/raw/master/assets/images/components/part-weather.png)
# 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" />

52
samples/react-world-time/README.md Normal file
View File

@ -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.
![World Time](https://github.com/pnp/sp-starter-kit/raw/master/assets/images/components/part-world-time.gif)
## 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
![World Time](https://github.com/pnp/sp-starter-kit/raw/master/assets/images/components/part-world-time.png)
# 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" />