How To Read SharePoint TermStore Managed Metadata In SharePoint Framework (SPFx) With Angular

Introduction

This article demonstrates how to read SharePoint TermStore data in SPFx applications. Since we don’t have direct REST API support for this service, we will be using the old JSOM method to read TermStore in SharePoint Framework webpart.

Implementation

Though SPFx directly provides the user context without writing a single piece of code, to get access to TermStore, we still need old SP.PageContext info help. Let’s get to know about loading _spPageContextInfo and Termsets altogether in all new SPFx with the help of SPComponentLoader.

The below implementation will fit for all types of JS frameworks supported by SharePoint Framework webparts.

Please follow the below steps and code snippets

Step 1

Go to your tsconfig.json file in the SPFx webpart project and make sure to add the "microsoft-ajax" and "sharepoint" types like below.

  1. "types": [  
  2.       "webpack-env",  
  3.       "microsoft-ajax",  
  4.       "sharepoint"  
  5.     ],  

Code Snippet: 1

Step 2

The next step is to add the required node module packages to your project through package.json file, open the file, and add the dependencies for Microsoft-ajax and SharePoint like below.

  1. "@types/microsoft-ajax""0.0.33",  
  2. "@types/mocha"">=2.2.33 <2.6.0",  
  3. "@types/sharepoint""^2013.1.6",  

Code Snippet: 2

Now, go to your npm command prompt and make sure that the terminal is pointing to your project directory and restore the newly added Angular 4 package dependencies by using the command -

npm install

Example - E:\your project directory >npm install

Now, we have set all the dependencies to read the TermStore using SharePoint Framework and the final step is right below

Last step

Go to the default webpart.ts file which is located at the below location

\\{solutiondirectory} > src > webparts > {webpartName}\{solutionName}WebPart.ts file generated by SPFx generator where you will append your HTML code to the  DOM element.

Example - E:\first-spfx-webpart\src\webparts\helloworld\helloworldWebPart.ts

Now, we have to add the reference scripts to get the SP.PageContext. The scripts have to be referred in proper order because one script depends on another one.

To load the scripts we will be using SPComponentLoader.loadScript in Oninit() method of SPFx webpart, and load the JS references listed here,

  • init.js,
  • MicrosoftAjas.js
  • SP.Runtime.js,
  • SP.js,
  • SP.Taxonomy.js

Please refer to the below code snippet for the same.

  1. protected onInit(): Promise<void> {  
  2.     let siteColUrl= this.context.pageContext.site.absoluteUrl;  
  3.     SPComponentLoader.loadScript(siteColUrl + '/_layouts/15/init.js', {  
  4.         globalExportsName: '$_global_init'  
  5.       })  
  6.         .then((): Promise<{}> => {  
  7.           return SPComponentLoader.loadScript(siteColUrl + '/_layouts/15/MicrosoftAjax.js', {  
  8.             globalExportsName: 'Sys'  
  9.           });  
  10.         })  
  11.         .then((): Promise<{}> => {  
  12.           return SPComponentLoader.loadScript(siteColUrl + '/_layouts/15/SP.Runtime.js', {  
  13.             globalExportsName: 'SP'  
  14.           });  
  15.         })  
  16.         .then((): Promise<{}> => {  
  17.           return SPComponentLoader.loadScript(siteColUrl + '/_layouts/15/SP.js', {  
  18.             globalExportsName: 'SP'  
  19.           });  
  20.         })  
  21.         .then((): Promise<{}> => {  
  22.           return SPComponentLoader.loadScript(siteColUrl + '/_layouts/15/SP.taxonomy.js', {  
  23.             globalExportsName: 'SP'  
  24.           });  
  25.         })  
  26.         .then((): void => {  
  27.             let spContext: SP.ClientContext =new SP.ClientContext(siteColUrl);  
  28.             let taxSession =  SP.Taxonomy.TaxonomySession.getTaxonomySession(spContext);  
  29.             let termStore  = taxSession.getDefaultSiteCollectionTermStore();  
  30.             let termGroups = termStore.get_groups();  
  31.             let termGroup = termGroups.getByName("People");  
  32.             let termSets = termGroup.get_termSets();  
  33.             this.loadDepartment(termSets, spContext);  
  34.           });       
  35.      
  36.     return super.onInit();  
  37.   }  

Code Snippet: 3

Now, we have the _spPageContext and TermSets in your scope, it is time to load specific termset. Please see the below code snippet to load the ”Department” TermSets using spPageContext load and execute methods.

  1. private loadDepartment(termSets: SP.Taxonomy.TermSetCollection,spContext:SP.ClientContext ){  
  2.     let termSet = termSets.getByName("Department");  
  3.     let terms = termSet.getAllTerms();  
  4.     spContext.load(terms);  
  5.     spContext.executeQueryAsync(function () {   
  6.       var termsEnum = terms.getEnumerator();  
  7.       let termDepartment:any[]=[];  
  8.       while (termsEnum.moveNext()) {  
  9.         var spTerm = termsEnum.get_current();  
  10.         termDepartment.push({label:spTerm.get_name(),value:spTerm.get_name(), id:spTerm.get_id()});  
  11.       }  
  12.         
  13.        window['termDepartment']= termDepartment;  
  14.       });  
  15.   }  

Code Snippet: 4

The last line of the above snippet highlighted in yellow color can be used to take your TermSet to angular 4 instances from SPFx instance and you can read this in your angular code with the below code snippet,

  1. let termDepartmentList:any[]=window['termDepartment'];  

Code Snippet: 5

Summary

In this article, I discussed how to load the SharePoint TermStore (Managed Metadata) by using JSOM Page context in SharePoint Framework (SPFx) integrated with Angular 4. In my next article, I will explain how to add/edit the TermStore values from SPFx webparts.

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