PnP FolderExplorer Control in SPFx

PnP initiative is awesome because, among many other things like sample codes, guidance documentation, community calls. it has also provided some reusable controls which can be used in SPFx web parts and extension. You can refer to this link for details.

There are 2 types of controls  SPFx react controls that can be used in the content of the web part and other SPFx property pane controls which can be used in the property pane of SPFx web part.

Yesterday, SPFx react control Version 1.17.0 was released which added 4 new controls and other enhancements and bug fixes.  You can find a summary of current release at this link

In this article, we will learn how to use PnP Folder explorer control in the SPFx web part. This control allows you to explore a folder structure by clicking on a folder to load it’s sub-folders and using 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.

Create WebPart

Run below commands in sequence.

Open a command prompt and create a directory for SPFx solution and go to that directory.

md PnPControlsDemo
cd PnPControlsDemo

Let us now create our solution

yo @microsoft/sharepoint

Select below options

Once you select all options in wizard one by one, it will take some time to generate the code structure.

Now let us install required npm packages to use PnP controls. Run below command

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

After it is completed, open the same folder in Visual Studio code( you can use any other editor also).

Now let us modify code to use these controls.

Step – Passing WebPart context to React components

Combobox List Item Picker  requires Sharepoint site context to work with, hence we will pass it from our web part file to react components.

Open src\webparts\controls\components\IControlsProps.ts

Modify code to below

import { WebPartContext } from '@microsoft/sp-webpart-base';  
export interface IControlsProps {
  description: string;
  context: WebPartContext;  
}

Open src\webparts\controls\ControlsWebPart.ts

Modify render method to pass the context.

public render(): void {
   const element: React.ReactElement<IControlsProps > = React.createElement(
     Controls,
     {
       description: this.properties.description,
       context:this.context
     }
   );
   ReactDom.render(element, this.domElement);
 }

Please note we have just added line ‘context:this.context’ .

Step – Modify React component associated with web part.

Open src\webparts\controls\components\Controls.tsx

Import the Folder Explorer Control

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

Modify the render method

public render(): React.ReactElement<IControlsProps> {
    return (
      <div className={ styles.controls }>
        <div className={ styles.container }>
          <div className={ styles.row }>
            <div className={ styles.column }>
              <span className={ styles.title }>Welcome to SharePoint!</span>
              <p className={ styles.subTitle }>Customize SharePoint experiences using Web Parts.</p>
              <p className={ styles.description }>{escape(this.props.description)}</p>
              <a href="https://aka.ms/spfx" className={ styles.button }>
                <span className={ styles.label }>Learn more</span>
              </a>
            </div>
          </div>
        </div>

        <br>
        </br>
        <br></br>

        
<FolderExplorer context={this.props.context}
                rootFolder={{
                  Name: 'Superheroes',
                  ServerRelativeUrl: this.props.context.pageContext.web.serverRelativeUrl + "/Superheroes/"
                }}
                defaultFolder={{
                  Name: 'Superheroes',
                  ServerRelativeUrl: this.props.context.pageContext.web.serverRelativeUrl + "/Superheroes"
                }}
                onSelect={this._onFolderSelect}
                canCreateFolders={true} />
      </div>
    );


  }

So if you look at above code, what we are doing is.

1. Added Folder Explorer control
2. Passing a dynamic value of Server Relative url of targeted Library
3. Binding onSelect event with custom method (this.onFolderSelect)
4. I am trageting Library named ‘Superheroes’

Add onFolderSelect Event method

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

Below is screenshot of library and its folder which we are targeting here.

For now, let us see this web part in action. Run gulp serve

gulp serve

Open workbench in context of any SharePoint online site.

https://spevents.com/sites/spsahmd2019/_layouts/15/workbench.aspx

On-Page load.

 

Selected Batman folder, I can see below output

Conclusion – This control will be very useful when we wanted functionality to allow the user to select a destination folder to upload files or choose as folder for some other operations.

Thanks for reading, hope you enjoyed it.