import * as React from 'react' ; import styles from './SpfxPnpTaxonomypicker.module.scss' ; import { ISpfxPnpTaxonomypickerProps } from './ISpfxPnpTaxonomypickerProps' ; import { ISpfxPnpTaxonomypickerState } from './ISpfxPnpTaxonomypickerState' ; import { TaxonomyPicker , IPickerTerms } from "@pnp/spfx-controls-react/lib/TaxonomyPicker" ; import { sp } from "@pnp/sp" ; import "@pnp/sp/webs" ; import "@pnp/sp/lists" ; import "@pnp/sp/items" ; import "@pnp/sp/fields" ; export default class SpfxPnpTaxonomypicker extends React . Component < ISpfxPnpTaxonomypickerProps , ISpfxPnpTaxonomypickerState > { constructor ( props ) { super ( props ) ; sp . setup ( { spfxContext : this . props . context } ) ; this . state = ( { tags : [ ] } ) ; this . _gettags ( ) ; } private async _gettags ( ) { const item = await sp . web . lists . getByTitle ( "GroupTags" ) . items . getById ( 1 ) . get ( ) ; let selectedtags = [ ] ; item . Tags . forEach ( function ( v , i ) { selectedtags . push ( { key : v [ "TermGuid" ] , name : v [ "Label" ] } ) ; } ) ; console . log ( item ) ; this . setState ( { tags : selectedtags } ) ; } public render ( ) { return ( < div className = { styles . spfxPnpTaxonomypicker } > < TaxonomyPicker allowMultipleSelections = { true } initialValues = { this . state . tags } termsetNameOrID = "Department" panelTitle = "Select Departments" label = "Departments Picker" context = { this . props . context } onChange = { this . onMultySelectTaxPickerChange } isTermSetSelectable = { false } / > < /div>); } private async onMultySelectTaxPickerChange ( terms ) { let list = sp . web . lists . getByTitle ( "GroupTags" ) ; const field = await list . fields . getByTitle ( `Tags_0` ) . get ( ) ; let termsString = '' ; terms . forEach ( function ( v , i ) { termsString += `-1;#${ v . name }|${ v . key };#` ; } ) ; const data = { } ; data [ field . InternalName ] = termsString ; const i = await list . items . getById ( 1 ) . update ( data ) ; } private async onSingleSelectTaxPickerChange ( terms ) { const data = { } ; data [ 'Tags' ] = { "__metadata" : { "type" : "SP.Taxonomy.TaxonomyFieldValue" } , "Label" : terms [ 0 ] . name , 'TermGuid' : terms [ 0 ] . key , 'WssId' : '-1' } ; return await sp . web . lists . getByTitle ( "GroupTags" ) . items . getById ( 1 ) . update ( data ) ; } }