PnP React Controls Part 9 – FolderExplorer

Introduction

Hi everyone, this is part 9 of PnP React Controls Series. This post will explain the usage of the PnP FolderExplorer control. We will see how we can leverage this control on our SPFx projects and make use of the feature provided by this control. Thanks to the community.

About the Control

This control is very useful when you want the end users to do something that relates to the folder like uploading the images or files to a particular folder based on the user selection. This control provides a simple and user friendly UI to display the list of folders and iteration of the sub-folders. It also provides the breadcrumb support on the iteration. As an additional feature, you can also search for folders when you have a large list of folders. You can also create new folders directly using this control without have to go back to the libraries to do the same. This control is very similar to the FolderPicker control with some addition properties for displaying the folder structure on the same screen without using the panel.

Focus on the Code

You can refer Part 1 post on the creation of the SPFx project and installing all the dependencies. In addition to the dependencies mentioned in that post you have to install @pnp/sp – v3.5.1. You should also do some changes to the project files to make the pnpjs version 3 to work on SPFx 1.14.0. Please follow this link to do the changes.

Created a webpart named folderExplorerDemo. Below is the FolderExporerDemo.tsx file.

import * as React from 'react';
import { FC, useState } from 'react';
import styles from './FolderExplorerDemo.module.scss';
import { IFolderExplorerDemoProps } from './IFolderExplorerDemoProps';
import { FolderExplorer, IFolder } from "@pnp/spfx-controls-react/lib/FolderExplorer";

const FolderExplorerDemo: FC<IFolderExplorerDemoProps> = (props) => {
    const {
        description,
        isDarkTheme,
        environmentMessage,
        hasTeamsContext,
        userDisplayName
    } = props;
    const [selFolder, setSelFolder] = useState<IFolder>(undefined);

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

    return (
        <section className={`${styles.folderExplorerDemo} ${hasTeamsContext ? styles.teams : ''}`}>
            <div className={styles.welcome}>
                <img alt="" src={isDarkTheme ? require('../assets/welcome-dark.png') : require('../assets/welcome-light.png')} className={styles.welcomeImage} />

            </div>
            <div>
                <h3>Folder Explorer Demo</h3>
                {selFolder &&
                    <div>
                        <p>Selected Folder: {selFolder.Name}</p>
                    </div>
                }
                <FolderExplorer context={props.context as any}
                    rootFolder={{
                        Name: 'Demo Docs',
                        ServerRelativeUrl: `/Demo Docs`
                    }}
                    defaultFolder={{
                        Name: 'Demo Docs',
                        ServerRelativeUrl: `/Demo Docs`
                    }}
                    onSelect={_onFolderSelect}
                    canCreateFolders={true} />
            </div>
        </section>
    );
};

export default FolderExplorerDemo;

Below are the updates done to the file.

  • Changed the class component to the react hooks
  • Created a method named _onFolderSelect to get the information about the selected folder.
  • Following are the properties of the control that allows us to customize based on our requirement
    • context – BaseComponentContext to load the folders from the library
    • rootFolder – Primary folder from where the control should start to display the children
    • defaultFolder – The folder to be selected or not by default
    • canCreateFolders – Option to enable or disable the new folder creation method.
    • onSelect – Method that will be executed when the folder is selected. It will return the selected folder as IFolder object which is very useful.
    • orderBy – The name of the field to sort the result in the control
    • orderAscending – true to sort in ascending and false to be in descending.

Reference URL

FolderExplorer – @pnp/spfx-controls-react

Sample Implementation

Conclussion

I hope you had learned something about one of the pnp control. There are lot to come in future.

Please free to post your comments and let me know if you want me to post article on any particular feature or plugins that relates to SharePoint. Thanks for your support.

sudharsank/pnpcontrols-demo: Demo project on different PnP React Controls. (github.com)

Happy Coding…

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s