Returning SharePoint Online TermSet in a tree structure using SharePoint Framework SPFx

Recently, I needed to render out a large list of items stored in our SharePoint Online metadata TermSet into a tree structure in SharePoint WebPart.

I created a termset, added terms, then added additional terms within each parent term. But when it came to rendering all of these terms out using « sp-taxonomy.js », I realized that there was no way to get the data back structured in the same hierarchy that we inputted.

 

To fix this issue, I wrote utility methods that get the terms from the term set, create a hierarchical tree of terms based on their path.

 

• Function to get all terms from a term store

	public async getTermSetTags(_siteCollectionUrl,_termStoreGuid,_termSetId){
	const _taxonomy = new Session(_siteCollectionUrl);
	const store = await _taxonomy.termStores.getById(_termStoreGuid).get();
	const termSet: ITermSet = store.getTermSetById(_termSetId);
	const termsWithData: (ITermData & ITerm)[] = await termSet.terms.select('Id', 'Name', 'Parent').get();
	return termsWithData;
	}

• Function to create a tree structure from my terms list

	public getTermSetTree = (
	data = [],
	{idKey='id',parentKey='parentId',childrenKey='children'} = {}
	) => {
	const tree = [];
	const childrenOf = {};
	data.forEach((item) => {
	const { [idKey]: id, [parentKey]: parentId = 0 } = item;
	childrenOf[id] = childrenOf[id] || [];
	item[childrenKey] = childrenOf[id];
	parentId
	? (
	childrenOf[parentId] = childrenOf[parentId] || []
	).push(item)
	: tree.push(item);
	});
	return tree;
	}

 

You can find the source code of the SPFx WebPart in github.

Read more

SPFx Anchor Tag target="_blank" seems to get ignored

When you’re developing WebParts with SharePoint Framework « SPFx », you may have run across an issue when  you try to create an HTML URL element « a » with target set to « _blank » to open your  URL in a new tab but it seems to get ignored.

This issue appears only when you try to open another SharePoint page from a SharePoint page, i.e. the href value in a URL of your SharePoint domain.

To solve this problem, you can override the page router for hyperlinks by adding the « data-interception » attribute to the link with a value of « off ». This will let the loading to bypass the page router logic.

 

<a href="https://yourtenant.sharepoint.com/sites/yoursite/SitePages/yourpage.aspx" target="_blank" data-interception="off">Your link</a>

 

There are some built-in features to bypass the page router logic by changing the value of the « data interception » attribute which provides various methods to bypass or partially the page router logic.

• The first option is « off ». When you set the property to off, it means that the smart loading done by modern SharePoint will be ignored.
  
  
• The second option is to use the value « propagate ». In this case, the page router is not bypassed, but it allows your own click handlers to fire, which could mean that you can do any additional processing before the anchor tag is redirected.

Read more

Implémentez votre prochain assistant personnel d’intranet SharePoint grâce au Bot Framework et SPFx

Implémentez votre prochain assistant personnel d’intranet SharePoint grâce au Bot Framework et SPFx de Franck Cornu

Read more