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
sp-dev-fx-webparts/samples/react-taxonomypicker-panel
History
Hugo Bernier 2aa5345319 It's called a **web part** not a **webpart** 2022-01-16 13:41:07 -05:00
..
assets Removing unnecessary office product from the sample metadata 2021-12-10 19:55:32 +02:00
config Taxonomy panel picker webpart (#546) 2018-07-02 12:46:54 +03:00
src/webparts/reactTaxonomypickerPanel Taxonomy picker - version upgrade and bug fix (#601) 2018-09-10 13:10:38 +03:00
.editorconfig Taxonomy panel picker webpart (#546) 2018-07-02 12:46:54 +03:00
.gitignore Taxonomy panel picker webpart (#546) 2018-07-02 12:46:54 +03:00
.yo-rc.json Taxonomy panel picker webpart (#546) 2018-07-02 12:46:54 +03:00
README.md It's called a **web part** not a **webpart** 2022-01-16 13:41:07 -05:00
gulpfile.js Taxonomy panel picker webpart (#546) 2018-07-02 12:46:54 +03:00
package.json Taxonomy picker - version upgrade and bug fix (#601) 2018-09-10 13:10:38 +03:00
tsconfig.json Taxonomy panel picker webpart (#546) 2018-07-02 12:46:54 +03:00

README.md

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.

TaxonomyPickerPanel web part

Compatibility

SPFx 1.5.1 Node.js v8 | v6 Compatible with SharePoint Online Does not work with SharePoint 2019 Does not work with SharePoint 2016 (Feature Pack 2) Local Workbench Compatible Hosted Workbench Compatible

Applies to

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"

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.