Convert PnP TaxonomyPicker selection to update value

I am a big fan of the PnP reusable controls and previously delivered some sessions about them. You can find the slides for one session on this blog post. One of my favorite controls is the TaxonomyPicker control, which I often use in custom forms to update list columns.

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. It receives the TaxonomyPicker selection as an array of objects and returns a string concatenation to update the field value.

Update April 2020 – I have fixed a bug updating multi-value fields when only one option was selected

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

I generally have this function on a utilities collection which I use on most projects. I can just use it whenever I need and forget about the specific format required for the metadata fields.

You can 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!

7 Replies to “Convert PnP TaxonomyPicker selection to update value”

  1. Hi,
    I am using PnPJS 2.0.13 updated code to update multi-value metadata field :

    await list.items.getById(itemId).update({
    // update hidden note fields associated with the managed metadata fields
    “My_x0020_Metadata_x0020_2”: “Accountant|70edea16-6811-4e4f-ac27-8f1c567ad01e;Designer|302dcafd-c992-4688-9f56-5e30c7e74b86;Developer|7a139032-0898-4268-8917-64db96397d43;Director|f1764c7b-f8b9-4fc0-a061-5f9403382311;”
    });

    but it is throwing error :
    error Error: Error making HttpClient request in queryable [400] ::> {“odata.error”:{“code”:”-1, Microsoft.SharePoint.Client.InvalidClientQueryException”,”message”:{“lang”:”en-US”,”value”:”An unexpected ‘PrimitiveValue’ node was found when reading from the JSON reader. A ‘StartObject’ node was expected.”}}}

    Can you please help me to resolve this issue?

    1. Hi, sorry for the late reply. I assume you have already found the solution to the error, but leaving an answer here in case others have the same problem.
      I believe in your case the problem is the name of the note field My_x0020_Metadata_x0020_2 as this is generally a numeric field generated automatically with a name formed by numbers (like 3298473877628743627534)

  2. I’m *extremely* new at this, and keep hitting dead ends. I have a form that uploads and file and edits the metadata at the same time… but the managed metadata doesn’t work.
    I’ve basically combined this: https://www.spguides.com/spfx-upload-file-to-sharepoint-document-library-with-metadata/
    with this: https://www.youtube.com/watch?v=OZiPm3-LMMw

    …and then I’ve inserted your constant (which seems to work fine)… but I have no clue how to shoehorn in the second piece of your code. I’m on day 4 of trying to figure this out…

    1. Hi Todd,

      The second piece of code is to update a Managed Metadata field in a SharePoint list item using the PnPjs library.
      I get the selected value from the TaxonomyPicker control and then use the function getManagedMetadataFieldValue to convert the object into an object that is accepted by PnPjs to update the field in SharePoint. Does this answer your question?

Leave a Reply

Your email address will not be published. Required fields are marked *