PnP Folder Explorer Control In SharePoint Framework

PnP React Controls

Patterns and Practices (PnP) provides a list of reusable React controls to developers for building solutions such as webparts and extensions using SharePoint Framework.

Refer to this link to get the list of React controls for SPFx.

You will see how to use PnP Folder Explorer control in SPFx webpart.

PnP Folder Explorer control

This control allows us to explore a folder structure by clicking on a folder to load its sub-folders and using a breadcrumb navigation to navigate back to a previous level. It also allows the user to create a new folder at the current level being explored. Refer to this link for more details.

Key Features

Ability to search
Add new folders
Load the subfolders
Breadcrumb navigation

PnP Folder Explorer Control In SharePoint Framework

Note

I have added folders to Shared Documents library which are displayed in the Folder Explorer control. In the web part property pane, we can change the document library name and server relative URL from where the folders need to be retrieved.

In this article, you will see how to perform the following tasks,

Prerequisites
Create SPFx solution
Implement Folder Explorer solution
Deploy the solution
Test the webpart

Prerequisites

Create SPFx solution

Open Node.js command prompt.

Create a new folder.

>md spfx-pnpreactcontrols

Navigate to the folder.

> cd spfx-pnpreactcontrols

Execute the following command to create SPFx webpart.

>yo @microsoft/sharepoint

Enter all the required details to create a new solution as shown below.

Yeoman generator will perform scaffolding process and once it is completed, lock down the version of project dependencies by executing the following command.

>npm shrinkwrap

Execute the following command to open the solution in the code editor.

>code .

Implement Folder Explorer solution

Execute the following command to install the PnP React Controls NPM package.

>npm install @pnp/spfx-controls-react --save

Open “src\webparts\pnPFolderExplorer\components\IPnPFolderExplorerProps.ts” file and update the code as shown below.

Note

Folder name and server relative URL is configurable in the webpart property pane that’s why we are adding name and serverRelativeURL in props.

import {WebPartContext} from '@microsoft/sp-webpart-base';
export interface IPnPFolderExplorerProps {
name: string;
serverRelativeURL: string;
context: WebPartContext;
}

Open “src\webparts\pnPFolderExplorer\loc\mystrings.d.ts” file and update the code as shown below.

declare interface IPnPFolderExplorerWebPartStrings {
PropertyPaneDescription: string;
BasicGroupName: string;
NameFieldLabel: string;
ServerRelativeURLFieldLabel: string;
}
declare module 'PnPFolderExplorerWebPartStrings' {
const strings: IPnPFolderExplorerWebPartStrings;
export = strings;
}

Open “src\webparts\pnPFolderExplorer\loc\en-us.js” file and update the code as shown below.

define([], function() {
return {
"PropertyPaneDescription": "Description",
"BasicGroupName": "Group Name",
"NameFieldLabel": "Folder Name",
"ServerRelativeURLFieldLabel": "Server Relative URL"
}
});

Open “src\webparts\pnPFolderExplorer\PnPFolderExplorerWebPart.ts” file and update the following.

Update the interface
Update the render method
Update the getPropertyPaneConfiguration method

Update the interface:

export interface IPnPFolderExplorerWebPartProps {
name: string;
serverRelativeURL: string;
}

Update the render method:

public render(): void {
const element: React.ReactElement<IPnPFolderExplorerProps> = React.createElement(
PnPFolderExplorer,
{
name: this.properties.name,
serverRelativeURL: this.properties.serverRelativeURL,
context: this.context
}
);
ReactDom.render(element, this.domElement);
}

Update the getPropertyPaneConfiguration method:

protected getPropertyPaneConfiguration(): IPropertyPaneConfiguration {
return {
pages: [
{
header: {
description: strings.PropertyPaneDescription
},
groups: [
{
groupName: strings.BasicGroupName,
groupFields: [
PropertyPaneTextField('name', {
label: strings.NameFieldLabel
}),
PropertyPaneTextField('serverRelativeURL', {
label: strings.ServerRelativeURLFieldLabel
})
]
}
]
}
]
};
}

Open “src\webparts\pnPFolderExplorer\components\PnPFolderExplorer.tsx” file and import the control.

import { FolderExplorer, IFolder } from "@pnp/spfx-controls-react/lib/FolderExplorer";

Update the render method as shown below.

public render(): React.ReactElement<IPnPFolderExplorerProps> {
return (
<div className={styles.pnPFolderExplorer}>
<FolderExplorer context={this.props.context}
rootFolder={{
Name: this.props.name,
ServerRelativeUrl: this.props.serverRelativeURL
}}
defaultFolder={{
Name: this.props.name,
ServerRelativeUrl: this.props.serverRelativeURL
}}
onSelect={this._onFolderSelect}
canCreateFolders={true} />
</div>
);
}

onSelect change event returns the selected folder:

private _onFolderSelect = (folder: IFolder): void => {
console.log('selected folder', folder);
}

Updated React component (src\webparts\pnPFolderExplorer\components\PnPFolderExplorer.tsx):

import * as React from 'react';
import styles from './PnPFolderExplorer.module.scss';
import { IPnPFolderExplorerProps } from './IPnPFolderExplorerProps';
import { escape } from '@microsoft/sp-lodash-subset';
import { FolderExplorer, IFolder } from "@pnp/spfx-controls-react/lib/FolderExplorer";
export default class PnPFolderExplorer extends React.Component<IPnPFolderExplorerProps, {}> {
public render(): React.ReactElement<IPnPFolderExplorerProps> {
return (
<div className={styles.pnPFolderExplorer}>
<FolderExplorer context={this.props.context}
rootFolder={{
Name: this.props.name,
ServerRelativeUrl: this.props.serverRelativeURL
}}
defaultFolder={{
Name: this.props.name,
ServerRelativeUrl: this.props.serverRelativeURL
}}
onSelect={this._onFolderSelect}
canCreateFolders={true} />
</div>
);
}
private _onFolderSelect = (folder: IFolder): void => {
console.log('selected folder', folder);
}
}

Deploy the solution

Execute the following commands to bundle and package the solution.

>gulp bundle --ship

>gulp package-solution --ship

Navigate to tenant app catalog – Example: https://c986.sharepoint.com/sites/appcatalog/SitePages/Home.aspx

Upload the package file (sharepoint\solution\spfx-pnpreactcontrols.sppkg). Click Deploy.

Test the webpart

Navigate to the SharePoint site and add the app.

Navigate to the page and add the webpart as shown below.

Edit the webpart and update the folder name and server relative URL.

Summary

Thus, in this article, you saw how to use PnP Folder Explorer control in SharePoint Framework.

3 Comments

Join the conversation! Your thoughts help the community grow.

Avian Decosta4y ago
Hello Vijay, Awesome work. I have one queries i.e. Instead of just listing folders in folders, I would like to be able to view files inside a folder.
Krishan Goswami4y ago
Hi Vijai, is there any way to use the query string parameters for folder property of document library web part?
Utvecklare Dev6y ago
Hi Vijai! This guide was awesome for me. Is there anyway you can also make a guide for viewing files (.docx, pptx, jpg etc) inside a folder? Instead of just listing folders in folders, I would like to be able to view files inside a folder.. :) Thanks!