I'm looking for some examples or guidance for working with taxonomy fields in SharePoint Framework.

What I need to do is have a field that is tied to a TermSet. Based on the user's input into this field, it will filter list items which have a particular field that is tagged with the specific term.

Is there any guidance out there to accomplish this? From the SPFx samples I've been able to find, they've focused on the property panes but not the scenario above.

If there is nothing SPFx-specific about this scenario and I can use the standard sp.taxonomy.js library, is there any special considerations I need to take into account for loading this library and/or the field type I specify for my List fields in my ISPList export?


Taking a stab at it. Please correct me if I am wrong.

Assuming that you need to fetch all data from a SharePoint list including a taxonomy column, you want to display that data on a page. Also, then you want to provide some sort of filter on that data.

So, the approach for that would be to make a standard REST API call to the list and then store the JSON response. Bind this JSON response to HTML and also provide some sort of filter ( input/textbox maybe ? ) so that user can search within this data.

Make use of the TaxCatchAll column to fetch the term value as below:

private _getListData(): Promise<any> {

 let restEndPoint = this.context.pageContext.site.absoluteUrl + `/_api/web/lists/getbytitle('Documents')/items?

 return this.context.spHttpClient.get(restEndPoint , SPHttpClient.configurations.v1)
   .then((response: SPHttpClientResponse) => {

    response.json().then((responseJSON: any) => {  

          // foreach value in responseJSON
          // do something or other

          // bind data to html
          // bindData(responseJSON);


You'll get objects back for TaxonomyColumn, and TaxCatchAll. TaxonomyColumn will have the Term Set object information and TaxCatchAll will have the TaxonomyColumn term values. Here, replace the TaxonomyColumn with your managed metadata column internal name.

Once the JSON is received, you can make a copy of it or store it in a global variable. Assuming an input box for filter, when user enters some keyword, fire up an event to filter this JSON itself.

PS - Since you tagged it 2016 and not SPO, you wont be able to use the shiny new RenderListDataAsStream endpoint which is much more reliable.

  • I was pointed out this as a solution, however it's problematic. I need to be able to get the values of the TermSet directly for population into a dropdown list, then filter the list items. The problem with the above approach is that if I have thousands of items, it's either going to be slow or flat out exceed LVT.
    – Trevor Seward
    Apr 25 '18 at 16:26
  • True that, makes sense. In that case, would suggest that you use the search REST API. You will need to map the columns to managed properties and then use them as drop down values. In this approach the data wont be realtime-ish. Also, you can make the necessary columns in the list as indexed which will get you around the LVT issue. I.e for the dropdown values, use the search API and then on the click of the value, make a standard list call Apr 25 '18 at 16:31
  • To populate the dropdowns, first associate your column to a managed property and then using search rest api , you can get the distinct values using collapsespecification property like: https://sitecollection/_api/search/query?querytext='*'&selectproperties='TaxColumnName'&collapsespecification='TaxColumnName'. Also, associate the list columns you need to managed properties and then on the click of dropdown value, make a standard REST call to fetch these items. Makes sense ? Apr 25 '18 at 16:44

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.