Add or Update SharePoint TermStore (Managed Metadata) in SharePoint Framework (SPFx)

Accessing SharePoint term store and play with that is not a big deal in SPFx, we do can with some tweaks. Since we don’t have direct REST API support for this service we will be using the old JSOM method to add/edit TermStore in SharePoint Framework webpart.

Environment setup:

We need to load some reference scripts to access SP.PageContext info. Please refer my article about reading SharePoint TermStore Managed Metadata In SharePoint Framework (SPFx) and follow the step by step guidelines in that to setup the environment to add/edit the TermSet.

What is Submission Policy in TermStore?

As we know, SPFx is functioning based on user context so user can’t access anything out of his/her permission scope through SPFx app. TermStore is something related to SharePoint Admin centre, then how do we add/edit TermStore through SPFx app?

Yes, we can because we do have option for that in TermStore settings as described below,

1. Go to below URL to access TermStore settings in your tenant

2. Expand your TermGroup and select the TermSet, in my case I have selected People/Department

The Submission Policy, which is highlighted in Green colour in above picture, is the one which will allow users with less permission to update the TermStore. If it is Open anyone can update the TermStore values through SPFx app. If it is Closed only the TermStore Managers can update the TermStore values.

Create a Term in SPFx:

Once you are done with the environmental setup, next step is to read the specific TermSet like Department, Location and so we could add the new term value in that.

Please follow the below code snippet to read the TermSet using spPageContext load and execute methods

let spContext: SP.ClientContext = new SP.ClientContext(siteColUrl);

let taxSession = SP.Taxonomy.TaxonomySession.getTaxonomySession(spContext);

let termStore = taxSession.getDefaultSiteCollectionTermStore();

let termGroups = termStore.get_groups();

let termGroup = termGroups.getByName(“People”);

let termSets = termGroup.get_termSets();

let termSet = termSets.getByName(“Location”);

let lcID= 1033; // Mention the lcid as per your requirement

We got the TermSet in our SPFx instance now, next step is to add a new Term value which is done by using the createTerm method in TermSet like below,

let newTerm = termSet.createTerm(“New Term Value”, lcID, SP.Guid.newGuid());


spContext.executeQueryAsync(():void =>//Function to handle execution result);

Please refer this official documentation about TermSet class members to know the other options available to manipulate TermSet.


Edit/Update a Term value in SPFx:

First, we need to load the all Terms from the TermSet to edit any Term, again we are going to use spPageContext load and execute methods.

let termSet = termSets.getByName(“Location”);

let terms = termSet.getAllTerms();


spContext.executeQueryAsync(function () {

      var termsEnum = terms.getEnumerator();

      let termLocation: any[] = [];

      while (termsEnum.moveNext()) {

        var spTerm = termsEnum.get_current();

termLocation.push({ label: spTerm.get_name()ID: spTerm.get_id(),Term: spTerm });


let termToUpdate: termLocation.find(o=>o.label==’New Term Value’);     

      if (termToUpdate!=null){

termToUpdate.set_name(‘Edited Term Value’);


spContext.executeQueryAsync(():void =>//Function to handle execution result);



In the above code snippet, we have loaded all the terms in an array called termLocation. Found some specific term to update and update the value by using set_name method of term.

If you have any questions/issues about this article, please let me know in comments.

Sharing is Caring!

Leave a Reply

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