sp-dev-fx-webparts/samples/react-taxonomypicker
Hugo Bernier 7ed51a0838 Updated sample JSON 2021-03-15 03:48:14 -04:00
..
assets Updated sample JSON 2021-03-15 03:48:14 -04:00
config Sample web part for Taxonomy Picker control - Jose Quinto (blog.josequinto.com) (#158) 2017-03-28 09:04:08 +03:00
src Sample web part for Taxonomy Picker control - Jose Quinto (blog.josequinto.com) (#158) 2017-03-28 09:04:08 +03:00
typings Sample web part for Taxonomy Picker control - Jose Quinto (blog.josequinto.com) (#158) 2017-03-28 09:04:08 +03:00
.editorconfig Sample web part for Taxonomy Picker control - Jose Quinto (blog.josequinto.com) (#158) 2017-03-28 09:04:08 +03:00
.gitattributes Sample web part for Taxonomy Picker control - Jose Quinto (blog.josequinto.com) (#158) 2017-03-28 09:04:08 +03:00
.gitignore Sample web part for Taxonomy Picker control - Jose Quinto (blog.josequinto.com) (#158) 2017-03-28 09:04:08 +03:00
.npmignore Sample web part for Taxonomy Picker control - Jose Quinto (blog.josequinto.com) (#158) 2017-03-28 09:04:08 +03:00
.yo-rc.json Sample web part for Taxonomy Picker control - Jose Quinto (blog.josequinto.com) (#158) 2017-03-28 09:04:08 +03:00
README.md URL dev.office.com to docs.microsoft.com 2020-06-09 09:09:22 +02:00
gulpfile.js Sample web part for Taxonomy Picker control - Jose Quinto (blog.josequinto.com) (#158) 2017-03-28 09:04:08 +03:00
package.json Add @select and @expand decorators in PnP JS Core sample and update package json versions (#252) 2017-07-21 21:00:52 +03:00
tsconfig.json Add @select and @expand decorators in PnP JS Core sample and update package json versions (#252) 2017-07-21 21:00:52 +03:00
tslint.json Add tslint at the root of each SPFx project (#394) 2018-01-08 15:58:48 +02:00

README.md

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

Taxonomy Picker (React)

Summary

A Taxonomy Picker control built with React based on react-taxonomypicker for use with SharePoint Framework client-side web parts (SPFx).

React-Taxonomy-Picker-gif

Used SharePoint Framework Version

drop

Applies to

Solution

Solution Author(s)
spfx-react-taxonomypicker Jose Quinto (@jquintozamora , blog.josequinto.com)

Version history

Version Date Comments
1.0 March 14, 2017 Initial release

Disclaimer

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


Minimal Path to Awesome

  • clone this repo
  • $ npm i
  • $ gulp trust-dev-cert
  • $ gulp serve

Local Mode

A browser in local mode (localhost) will be opened. https://localhost:4321/temp/workbench.html

SharePoint Mode

If you want to try on a real environment, open: https://your-domain.sharepoint.com/_layouts/15/workbench.aspx

Usage

Go to src/webparts/taxonomyPickerSample/TaxonomyPickerSampleWebPart.ts and configure the control.

Mock Data configuration by using defaultOptions configuration

Access from https://localhost:4321/temp/workbench.html Configuration:

PropertyPaneTaxonomyPicker("Language", {
  key: "Language_Field",
  name: "Language",
  displayName: "Language",
  multi: true,
  defaultOptions: [
    { label: "English", value: "f50249b6-310d-43b6-aaa6-f0cb46d851bf" },
    { label: "Spanish", value: "237ca323-1ed8-4199-a49b-a9f7ce4256bf" },
    { label: "German", value: "44024c7e-f738-4755-90e1-15866327c806" },
    { label: "Italian", value: "65f67491-bdca-491a-84fa-f6fd913f40fa" },
  ],
  onPickerChange: this._updateTaxonomyPicker
})

Real Data configuration by using termSetGuid configuration

Access from https://your-domain.sharepoint.com/_layouts/15/workbench.aspx Configuration:

PropertyPaneTaxonomyPicker("Language", {
  key: "Language_Field",
  name: "Language",
  displayName: "Language",
  multi: true,
  termSetGuid: "<your-term-set-id>",
  termSetName: "Language",
  termSetCountMaxSwapToAsync: 100,
  onPickerChange: this._updateTaxonomyPicker
})

Features

  • Use React for using react-taxonomypicker control inside a custom property pane (it can be used in the webpart itself too).
  • Use TypeScript to create the custom property pane control containing the taxonomy picker control.
  • Reacting to web part property changes
  • Loading data for use in custom property pane controls asynchronously without blocking the web part
  • Retrieve Terms from a Term Set by Term Set GUID.
  • Sync / Async modes
    • Sync mode is used for medium / small Term Sets and loads asynchronously all Terms and store them in React State and SessionStorage cache.
    • Async mode is used for large Term Sets and it doesn't load any data initially, but it loads the Terms upon user input in batches of 10 items.
    • Sync / Async mode configurable via termSetCountMaxSwapToAsync property
      • The control will fetch the number of terms and decide which mode to use depends on termSetCountMaxSwapToAsync value.
  • It Uses and depends on SP.Taxonomy.js (the webpart uses a wrapper to load all the SP.*.js dependencies)
  • Use Promise (polyfill it if needed IE)
  • onPickerChange event handler exposed
  • react-select properties exposed (extends them)
  • defaultOptions array exposed to enable input mock data when no termSetGuid configured
  • More configuration options: react-taxonomypicker

Scenarios supported

  • SharePoint Web Part using Script Editor or Content Editor Web Part
  • SharePoint Framework Web Part (SPFx)