How to Read Termstore in SPFx (SharePoint Framework — Angular 4) | Hubfly

Probably you already know that SPFx directly provides the user context without writing a single piece of code, to get access to termstore. However, we still need old SP.PageContext info help. Let’s get to know about loading _spPageContextInfo and Termsets altogether in brand new SPFx with the help of SPComponentLoader. It will have support for all JS frameworks supported by SharePoint Framework.

How to Access TermSets (Code Walkthrough)

Please follow the below steps to get access to TermSets. The necessary code snippets are shared for your reference.

Go to your tsconfig.json file in the SPFx webpart project and make sure you add the microsoft-ajax and SharePoint as shown below.

"types": [
"webpack-env",
"microsoft-ajax",
"sharepoint"
],
Next step is to add the required packages to your project through package.json file. Open this file and add the dependencies for Microsoft-ajax and SharePoint as shown below,
"@types/microsoft-ajax": "0.0.33",
"@types/mocha": ">=2.2.33 <2.6.0",
"@types/sharepoint": "^2013.1.6",
Now go to your npm command prompt and make sure that the terminal is pointing to your project directory and restore the newly added package dependencies by using the command npm install
Now we have set all the dependencies to read the termstore using SharePoint Framework and the final step is right below here.
Go to your default webpart.ts file generated by SPFx where you append your html code with the SP DOM to load the reference scripts in proper order because one script depends on other script. To load the scripts we will be using SPComponentLoader.loadScript in Oninit() method of SPFx webpart, and load the init.js, MicrosoftAjas.js, SP.Runtime.js, SP.js and SP.Taxonomy.js files like below code snippet,
protected onInit(): Promise<void> {
let siteColUrl= this.context.pageContext.site.absoluteUrl;
SPComponentLoader.loadScript(siteColUrl + '/_layouts/15/init.js', {
globalExportsName: '$_global_init'
})
.then((): Promise<{}> => {
return SPComponentLoader.loadScript(siteColUrl + '/_layouts/15/MicrosoftAjax.js', {
globalExportsName: 'Sys'
});
})
.then((): Promise<{}> => {
return SPComponentLoader.loadScript(siteColUrl + '/_layouts/15/SP.Runtime.js', {
globalExportsName: 'SP'
});
})
.then((): Promise<{}> => {
return SPComponentLoader.loadScript(siteColUrl + '/_layouts/15/SP.js', {
globalExportsName: 'SP'
});
})
.then((): Promise<{}> => {
return SPComponentLoader.loadScript(siteColUrl + '/_layouts/15/SP.taxonomy.js', {
globalExportsName: 'SP'
});
})
.then((): void => {
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();
this.loadDepartment(termSets, spContext);
});
return super.onInit();
}
Now you got the _spPageContext and termsets in your code, now time to load particular termset please see below sample code to load the department termset using spPageContext load and execute methods
private loadDepartment(termSets: SP.Taxonomy.TermSetCollection,spContext:SP.ClientContext ){
let termSet = termSets.getByName("Department");
let terms = termSet.getAllTerms();
spContext.load(terms);
spContext.executeQueryAsync(function () {
var termsEnum = terms.getEnumerator();
let termDepartment:any[]=[];
while (termsEnum.moveNext()) {
var spTerm = termsEnum.get_current();
termDepartment.push({label:spTerm.get_name(),value:spTerm.get_name(), id:spTerm.get_id()});
}
window['termDepartment']= termDepartment;
});
}
The last line of the above snippet highlighted in red colour can be used to take your termset to Angular 4 instance from SPFx instance. You can now read this in your Angular 4 instance with the below code snippet,
let termDepartmentList:any[]=window['termDepartment'];
If you need any support, feel free to reach me in the comments section below.