React Modern Chart (SharePoint Framework) - Can't Retrieve Managed Metadata Value

Question

Anyone use React-Modern-Chart to retrieve Managed Metadata Fields and facing a problem that the label or value can't be displayed and showing 'object object'.

Please help. Thanks.

Cheers, VTEC

Answer 1

In order to create a personalized navigation of a SharePoint site, I linked the pages of this site with the terms of a termset created for this purpose, thanks to an MMS field added in the site pages list. Maybe this case can help you. I will explain in the following how I did it.

Ths MMS field has this structure:

mms: {
    label: string;
    termGuid: string; 
    wssId: any; 
  } 

In my case, I retrieve the contents of the MMS field like this:

import { sp } from "@pnp/sp";

var mms = await sp.web.lists.getByTitle("Site Pages").items.select("MMS").getAll(); 

MMS is the name of the column in which the term is recorded:

You can take a look at the documentation for @pnp/sp/items v1 here. I used v1 because the new version of PnPjs has removed sp-taxonomy librarie. See here.

So to access the terms of the taxonomy, the sp-taxonomy library is used as follows:

import { 
  taxonomy, 
  ITermStore,
  ITerm,
  ITermData
} from '@pnp/sp-taxonomy'; 

const store = taxonomy.termStores.usingCaching().getById("store-id"); 
const termSet = store.usingCaching().getTermSetById("termset-id"); 
const select = ['IsRoot', 'Labels', 'TermsCount', 'Id', 'Name', 'Parent']; 
const terms = await termSet.terms.select(...select).usingCaching().get();

Here I got the fields IsRoot, Labels, TermsCount, Id, Name and Parent from all terms of the termset.

All that remains now is to make the link between the termset terms and the MMS field that contains the term associated with the pages to create the navigation of the site.

I plan to write a blog post to describe this solution if it helped and if it suits your needs consider upvoting.