Working with Managed Metadata using SharePoint REST with PNP JS

Eitvydas Tamošiūnas
Nov 4 · 4 min read

REST services and SharePoint client side approach is became popular as SPFx was introduced. Combining solution with pnpjs you can create powerfull solutions. As the development basis went from Full-Trust to SharePoint-Addin and now to SPFx. API’s has drastically changed and it happened so fast that not all SharePoint things were implemented fully. This means while you are developing stuff using latest technologies, might be that not all areas in SharePoint are implemented yet. Sometimes you hit the wall and either do an long research over the internet or either give up and get back to old supported way.

One of the most anticipated request on uservoice.com at SharePoint category is “Add managed metadata term store operations to REST API”. I had to make an SPFx solution which I had to create an custom form taking it from list content type and use this form to insert or update item. I had to deal with managed metadata field and I felt into same problem. At the beginning I had to use JSOM approach to fetch Managed metadata for my field. This was working well on classic pages, but was big head ache in modern page, due JSOM libraries were not accessible by default, so I had to load them during run-time and it sucked a lot. It was painful and I do not like JSOM syntax…

So once I decided to try to implement using REST only. I did it, lets say, in with some workarounds I found in the internet, but it works and it looks better than JSOM approach.

So let’s start:

Important: This function is taking the terms from the term store. The sspId and termSetId are retrieved from the SharePoint List Field configuration. Not important: After I get all terms I use recursive function to create an nested terms to match the same structure as it is set in Taxonomy store.
Not Important: Function which recursively adds children terms.

As we have taxonomy terms we can render them in by showing parent and even children terms:

Not Important: I decided to show parent and children terms to make search easier.
Not Important: This also helps recognize terms with same names.

Now we have terms so we need a way to save them when we save the item. This is quite tricky because REST implementation for updating Managed metadata field is really weird, so as for Lookup and User field.

Important: We are converting the ITag[] value (from TagPicker) to the supported value for REST. If field type is FieldTaxonomy we need to create an object. Otherwise the value should be set as string in following pattern: -1#;some name 1|term-guid-1;#-1#;some name 2|term-guid-2;#
Not Important: Adding item using pnpjs
Not Important: Updating item using pnpjs
Important: If the taxonomy field allow only single value it is enough to use field internal name while saving. Otherwise for multi taxonomy field value it is required to use secret name.
This is how to get secret taxonomy field name :)

Now we can create and update the items. So what about the rendering item data?

Important: Again using pnpjs we are getting items. Most important parts is inside function setQueryFields
Important: If we are dealing with taxonomy fields we need to select and expand TaxCatchAll field to get the label of the taxonomy term, because taxonomy field value itself return number instead actual term label.
Not Important: Value mapping routine
important: Getting taxonomy value from TaxCatchAll field.
Example of item rendered in custom edit mode

TL;DR

When dealing with FieldTaxonomyMulti:

1. Get Secret name of taxonomy field.

2. While getting item include TaxCatchAll value, to get actual label of the term value.

3. When saving use Secret name instead of internal name and also value should be string;

4. For rendering the label of the term use item value of taxonomy field and search for it in TaxCatchAll field.

When Dealing with FieldTaxonomy:

  1. While getting item include TaxCatchAll value
  2. When saving the item use internal name and create an object of selected term.
  3. For rendering the label of the term use item value of taxonomy field and search for it in TaxCatchAll field.
Getting taxonomy terms
Setting taxonomy value depending if taxonomy field allows multiple values or not
Selecting and expanding TaxCatchAll field while getting the items
Getting items while using expand and collapse values which are set in code snippet above.
Resolving item value using TaxCathAll value

I hope this was clear enough. I the long version code examples are too difficult to understand refer to the TL;DR version.

Welcome to a place where words matter. On Medium, smart voices and original ideas take center stage - with no ads in sight. Watch
Follow all the topics you care about, and we’ll deliver the best stories for you to your homepage and inbox. Explore
Get unlimited access to the best stories on Medium — and support writers while you’re at it. Just $5/month. Upgrade