sp-dev-fx-webparts/samples/react-taxonomypicker-panel

SPFx web part with Taxonomy picker Office UI Fabric Panel.

Summary

Sample web part with Single and Multi-select taxonomy pickers using Office UI Fabric panel. The web part uses the Taxonomy API support available in the @pnp/taxonomy.

Compatibility

Applies to

• SharePoint Framework
• Microsoft 365 tenant

Prerequisites

• @pnp/sp
• Office UI Fabric React

Solution

Solution	Author(s)
react-taxonomypicker-panel	Vipul Kelkar @vipulkelkar

Version history

Version	Date	Comments
1.0	June 22, 2018	Initial release
1.1	August 20, 2018	Bug fix and version upgrade

Minimal Path to Awesome

• Clone this repository

• Navigate to the file 'src/webparts/components/TermsPickerComponent.tsx'

• In the method "GetTerms", replace the <TERM_STORE_NAME> with the term store name in your tenant.

• Navigate to the file 'src/webparts/components/ReactTaxonomyPickerpanel.tsx'

• In the RENDER method of the web part, a custom taxonomy picker component is used. Please replace the "TermSetId" property with the desired term set id in your tenant.

• in the command line run:

  • npm install
  • gulp serve

• Navigate to - /_layouts/workbench.aspx and add the "react-taxonomypicker-panel"

This sample can also be opened with VS Code Remote Development. Visit https://aka.ms/spfx-devcontainer for further instructions.

Features

• This web part demonstrates the use of a custom taxonomy picker control built with Office UI Fabric React Panel and Tagpicker that enables users to select terms for a single-select or multi-select taxonomy field in a controlled manner.

• The custom taxonomy picker control is a reusable React component and can be easily placed in a SPFx web part just by providing the TermSetId as a property to the component.

  <TermsPickerComponent IsMultiValue={false} TermSetId='' LabelText='Single-select field' SelectedTerms={}/>

• By supplying the "SelectedTerms" property, the control can also be used in scenarios where pre-filled choices are to be shown such as the Edit form of a list item etc.

• The selected terms can be supplied as an array of a custom object

  { name : "", key : "" }

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.