Playing around with Managed Metadata in SharePoint Document library using SPFx and @pnp/sp

Metadata is information about information. In SharePoint a Metadata or Managed Metadata column is a special kind of column that you can add to lists or libraries. It enables site users to select terms from a specific term set. A Managed Metadata column can map to an existing term set, or you can create a local term set specifically for the column. When you use SharePoint products, you can manage the metadata centrally. You can organize the metadata in a way that makes sense in your business and use the metadata to make it easier to find what you want. To learn how to work with a Managed Metadata column, see Create a managed metadata column

Sometimes you might find hard to retrieve information from this type of column in SharePoint library/list when building client-side web parts using SharePoint Framework. So, in this article I'll explain briefly how you can access and read this data by using @pnp/sp library.

@pnp/sp library provides a fluent API to build your REST queries when working with SharePoint Framework (web parts). It contains a great range of functionality and extensibility. It was introduced by SharePoint Patterns and Practices (PnP) to simplify common operations with SharePoint and SPFx.

Let's create a project by running the Yeoman generator. The Yeoman SharePoint web part generator helps you quickly create a SharePoint client-side solution project with the right toolchain and project structure. I'm pretty sure you can find many demos out there about creating and running SPFx. After that you must install and set up @pnp/sp by running common steps for any project type.

npm install @pnp/logging @pnp/common @pnp/odata @pnp/sp --save

For this demonstration I chose React Framework to create web part but you can accept the default No javascript web framework as the framework while you create a project.

First we have to get our current web absolute url dynamically and use page context. The page context provides standard definitions for common SharePoint objects that need to be shared between the client-side application, web parts, and other components.

const web = new Web(this.props.context.pageContext.web.absoluteUrl);

After that all you need is to get a list items from you SharePoint site and expand fields such as lookup to get additional data.

web.lists
      .getByTitle(this.props.listName)
      .items.expand("File")
      .getAll()
      .then(
        items => {
          this.getDocuments(items);
        },
        (error: any): void => {
          this.setState({
            status: "Loading all items failed with error: " + error
          });
        }

As we can see, this.props.listName is to get the list name from the configuration pane and expanding the File, getting all items and passing to another method where we can loop through all after expanding them.

private getDocuments(items): void {
    //const monthNames = this.monthName();
    let documentFiles = [];
    items.forEach(policy => {
      policy.businessFunctions.forEach(policyCategory => {
        documentFiles.push({
          Id: policy.Id,
          Name: policy.File.Name,
          DocumentLink: policy.File.LinkingUrl,
          ApprovedDate: policy.DateApproval
          PolicyCategory: policyCategory.Label.split(/:/)[1]
        });
      });
    });
   
    this.setState({
      documentFiles,
      status: `Successfully loaded ${documentFiles.length} items`
    });
    
  }

In the method above, Managed Metadata filed is the PolicyCategory and we read its data quite easily by looping through policy items and then by policy business functions and finally get everything from its Label. The split is used for getting the subcategories only and excluding other information. Last but not least, we can get other properties which contain item information such as File Name, Item URL (LinkingUrl) and other field type.

Next time I'll write something about displaying the Managed Metadata through UI Fabric control (dropdown).

Enjoy! :)