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/README.md

2.8 KiB
Raw Blame History

SPFx webpart with Taxonomy picker Office UI Fabric Panel.

Summary

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

TaxonomyPickerPanel webpart

Used SharePoint Framework Version

drop

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

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 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 webpart, 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 webpart 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 webpart 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 : "" }