sp-dev-fx-webparts/samples/pnp-controls
VesaJuvonen 3776db4aac Adding PnP identifier for the MPN ID entries in samples - distinct sample usage in production 2021-01-07 14:51:39 +02:00
..
assets Added the pnp-controls sample (#314) 2017-09-26 10:26:36 -04:00
config Adding PnP identifier for the MPN ID entries in samples - distinct sample usage in production 2021-01-07 14:51:39 +02:00
src Updated readme and PnP modules 2020-12-16 22:07:41 -05:00
teams SPFx version Upgrade from 1.4.1 to 1.11.0 and Issues Fixes 2020-12-15 14:20:24 +00:00
typings Added the pnp-controls sample (#314) 2017-09-26 10:26:36 -04:00
.editorconfig Added the pnp-controls sample (#314) 2017-09-26 10:26:36 -04:00
.gitignore Added the pnp-controls sample (#314) 2017-09-26 10:26:36 -04:00
.yo-rc.json SPFx version Upgrade from 1.4.1 to 1.11.0 and Issues Fixes 2020-12-15 14:20:24 +00:00
README.md Updated readme and PnP modules 2020-12-16 22:07:41 -05:00
gulpfile.js SPFx version Upgrade from 1.4.1 to 1.11.0 and Issues Fixes 2020-12-15 14:20:24 +00:00
package.json Updated readme and PnP modules 2020-12-16 22:07:41 -05:00
tsconfig.json SPFx version Upgrade from 1.4.1 to 1.11.0 and Issues Fixes 2020-12-15 14:20:24 +00:00
tslint.json SPFx version Upgrade from 1.4.1 to 1.11.0 and Issues Fixes 2020-12-15 14:20:24 +00:00

README.md

page_type products languages extensions
sample
office-sp
javascript
typescript
contentType technologies platforms createdDate
samples
SharePoint Framework
react
10/1/2017 12:00:00 AM

SharePoint Framework PnP Controls Sample

Summary

This is a sample project that contains a web part which makes use of the PnP SPFx Controls:

Web part outcome

Compatibility

SPFx 1.11

Node.js LTS 10.x

SharePoint Online

Teams Incompatible

Workbench Local (Partially) | Hosted

Which PnP SPFx controls are being used in this sample?

The sample makes use of the following controls:

  • PropertyFieldListPicker
  • PropertyFieldTermPicker
  • Placeholder
  • ListView (which also uses the FileTypeIcon control)

Applies to

Solution

Solution Author(s)
pnp-controls Elio Struyf (MVP, U2U, @eliostruyf)
pnp-controls Swaminathan Sriram (@SwaminathanSri3)

Version history

Version Date Comments
1.0.1 September 20, 2017 Initial release
1.0.2 March 03, 2018 Update to 1.4.1
1.0.3 December 16, 2020 Update to 1.11.0

Disclaimer

THIS CODE IS PROVIDED AS IS WITHOUT WARRANTY OF ANY KIND, EITHER EXPRESS OR IMPLIED, INCLUDING ANY IMPLIED WARRANTIES OF FITNESS FOR A PARTICULAR PURPOSE, MERCHANTABILITY, OR NON-INFRINGEMENT.


Minimal Path to Awesome

To test out this web part, you need to have a library with a managed metadata field. In my case, I made use of a field called Country.

Documents

Once you have such a library in place, you can copy the code and run the following commands:

npm install
gulp serve --nobrowser