Introduction

Hi everyone, this is part 8 of PnP React Controls Series. This post will explain the usage of the PnP FolderPicker 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.

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 folderPickerDemo. Below is the FolderPickerDemo.tsx file.

import * as React from 'react';
import { FC } from 'react';
import styles from './FolderPickerDemo.module.scss';
import { IFolderPickerDemoProps } from './IFolderPickerDemoProps';
import { escape } from '@microsoft/sp-lodash-subset';
import { FolderPicker, IFolder } from "@pnp/spfx-controls-react/lib/FolderPicker";

const FolderPickerDemo: FC<IFolderPickerDemoProps> = (props) => {
    const {
        description,
        isDarkTheme,
        environmentMessage,
        hasTeamsContext,
        userDisplayName
    } = props;

    const _onFolderSelect = (folder: IFolder): void => {
        console.log("Selected folder: ", folder);
    };

    return (
        <section className={`${styles.folderPickerDemo} ${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 Picker Demo</h3>
                <FolderPicker context={props.context as any}
                    label='Folder Picker'
                    required={true}
                    rootFolder={{
                        Name: 'Demo Docs',
                        ServerRelativeUrl: `/Demo Docs`
                    }}
                    onSelect={_onFolderSelect}
                    canCreateFolders={true} />
            </div>
        </section>
    );
};

export default FolderPickerDemo;

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
  • label – string that appears on the UI
  • 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.

Reference URL

FilePicker – @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…