Easily convert PnP TaxonomyPicker selection to update value

When using the PnP TaxonomyPicker reusable control to let the user select values for a managed metadata list field in SharePoint, you have to convert that selection into an object that you can then pass to the REST api when updating the field value.

The following function does exactly that:

const getManagedMetadataFieldValue = (terms: IPickerTerm[]): string => {
  let termValue = "";
  for (const term of terms) {
    termValue += `${term.name}|${term.key};`;
  }
  return termValue;
};

You can then use this function together with PnPjs to easily update the value in SharePoint by updating the hidden note field that is generated for each managed metadata field.

await list.items.getById(itemId).update({
    // update hidden note fields associated with the managed metadata fields
    'NoteFieldName': selectedTerms ? getManagedMetadataFieldValue(selectedTerms) : null
});

Enjoy!

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out /  Change )

Google photo

You are commenting using your Google account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s