Written by

Jayakumar Balasubramaniam

Share

  

Category

see all categories
intranet as a service

Update Managed Metadata field through Rest API in SharePoint Framework

SPFx solutions are the one which is a complete clientside development approach with lot of options which makes us lazy.  An example is that you no need to worry about permissions/authentication while making REST API calls. We do have predefined httpclients which will take care of those stuffs you just simply pass the API url and request body to get your job done. 

Term Store: 

Term Store is metadata storage location available in SharePoint admin center where you can manage the common data which should be globally available to all the sites over the tenant. Below is the url to go to SharePoint admin center 

https://tenantName-admin.sharepoint.com  

Managed Metadata Fields: 

Managed metadata is a column type in SharePoint List where you can map the Term Store from admin center as the data source for it and user can pick one predefined data while adding/editing an item. These types of fields are special as the operations Create/Update/Read values on these fields are not straightforward. Let’s see how it works below, 

How the managed metadata field values get saved? 

Whenever you pick an item from the Managed metadata field it will create an entry in another hidden list called TaxonomyHiddenList. This list includes the TermId, TermSetId, TermStoreId and more information. Below is the url to go this hidden list 

https://siteUrl/Lists/TaxonomyHiddenList  

Reading the managed metadata field values 

When you read the list items of a list with Managed Metadata column the value of it will be returned in the below format. 

Let’s say we have a Manged Metadata field called “Department” for this specific field we will get back three values, 

Label : Display text of the selected Term value 

TermGuid : Term ID of the selected term, a GUID 

WssId : An integer which is the Item ID value of the selected term in TaxonomyHiddenList.

Updating value in Managed Metadata field 

Now comes the core purpose of this article. Comparing to Read and Creating Managed Metadata fields, updating its values involves more Tricks and the available REST API’s make it much simpler. But it’s slight different between single value and multi value fields while updating the values. Let’s discuss each of them below, 

Accessing TermStore values in SharePoint Framework Applications? 

The following blog posts will help you for sure in detail about building SPFx applications and manging TermStore values from SPFx solution 

→ Build SPFx webparts with Angular 4 

→ Deep Dive into SPFx webparts configuration  

→ Build SPFx extensions  

→ Integrating SPFx apps with visual Studio  

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

→ How to read SharePoint TermStore (Managed Metadata) using RESTAPI 

→ How to Read Termstore in SPFx (SharePoint Framework – Angular 4) 

Updating single value Managed Metadata field using Rest API in SharePoint Framework 

It’s pretty straightforward we can update in usual way. 

let requestUrl = this.context.pageContext.web.absoluteUrl.concat("/_api/web/lists/getbytitle('YourListTitle')/items(ListItemId)");   

let dataToPost = JSON.stringify({   

    '__metadata': {   

        'type': 'SP.Data.YourListTitleListItem'   

    },   

    "TermFieldSingle":{ 

        "Label":"Test Value 1", 

        "TermGuid":"GUID of the Term", // Follow my blog about reading TermStore in SharePoint Framework to get the GUID of the TermStore value 

        "WssId":-1 //which make sure to create an entry in TaxonomyHiddenList if not added. 

        }  

});   

let spOpts = {   

    headers: { 

        'Accept': 'application/json;odata=nometadata', 

        'Content-type': 'application/json;odata=verbose', 

        'odata-version': '', 

        'IF-MATCH': '*', 

        'X-HTTP-Method': 'MERGE' 

    }, 

    body: dataToPost   

};   

this.context.spHttpClient.post(requestUrl, SPHttpClient.configurations.v1, spOpts).then((response: SPHttpClientResponse) => {   

    if (response.ok) {   

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

            console.log(responseJSON);   

        });   

    }   

});   

 

Updating Multivalue Managed Metadata field using Rest API in SharePoint Framework 

Here we cannot directly update the value of multivalue managed metadata field. It’s entirely different from updating single value field.  

Whenever you add multivalue managed metadata field in a list an additional hidden field will be added in the same list. 

For ex: If you add a Location field, Location_0 will be added as hidden field in the list. 

We need to update our values to this hidden field only. Here comes another trick we cannot directly update the value to this hidden field using its name. We can achieve that by using its InternalName only which is some GUID. 

So, our first step is to get the internal name of the hidden taxonomy field by using the REST API. 

let requestUrl = this.context.pageContext.web.absoluteUrl.concat("/_api/web/lists/getbytitle('YourListTitle')/Fields/GetByTitle('Location_0')/InternalName");   

let spOpts = { 

    headers: { 

        'odata-version': '3.0', 

        'Content-Type': 'application/json; odata=verbose' 

    } 

}; 

this.props.context.spHttpClient.get(requestUrl, SPHttpClient.configurations.v1, spOpts) 

    .then((response: SPHttpClientResponse) => { 

        if (response.ok) { 

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

                let hiddenLocationInternalName = responseJSON.value; 

            }); 

        } 

        else { 

        } 

    }); 

Next step is to generate the value in a specific format by using your business logic, 

For ex: -1;#Test Term 1|Term GUID;#-1;#Test Term 2| Term GUID; 

Final step is to use the retrieved internal name to update the value of the multivalue managed metadata field using Rest API as below, 

let requestUrl = this.context.pageContext.web.absoluteUrl.concat("/_api/web/lists/getbytitle('YourListTitle')/items(ListItemId)");   

        let dataToPost = JSON.stringify({   

            '__metadata': {   

                'type': 'SP.Data.YourListTitleListItem'   

            },   

            "aa17f536a132414184a94e7743900b3f":"-1;#Test Term 1|Term GUID;#-1;#Test Term 2| Term GUID;" 

        });   

        let spOpts = { 

            headers: { 

                'Accept': 'application/json;odata=nometadata', 

                'Content-type': 'application/json;odata=verbose', 

                'odata-version': '', 

                'IF-MATCH': '*', 

                'X-HTTP-Method': 'MERGE' 

            }, 

            body: dataToPost 

        }; 

       this.props.context.spHttpClient.post(requestUrl, SPHttpClient.configurations.v1, spOpts) 

            .then((response: SPHttpClientResponse) => { 

                if (response.ok) {      

                } 

            });  

Finally, we have successfully updated both the single value and multi valued managed metadata fields. 

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

Jayakumar Balasubramaniam

Written by Jayakumar Balasubramaniam

A technology evangelist working on Microsoft 365, SharePoint & Azure. Gets my hands dirty with latest and greatest of SharePoint, Azure & front-end frameworks. Currently working with “Hubfly – A unified digital workplace” as a Product Engineer. Getting in to the depth of the domain & technology, with my eyes for perfection, ensures that the product releases go right every time.