PnP React Controls Part 11 – ListPicker

Introduction

Hi everyone, this is part 11 of PnP React Controls Series. This post will explain the usage of the PnP ListPicker 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 could be very useful for the users, when they tried to load the content dynamically from the lists based on the selection. They could also load the files based on the selected libraries. There are few properties we could leverage to fit our requirements. If there is a need to display the lists or libraries to the end users for choose, then this control would be the best fit.

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 listPickerDemo. Below is the ListPickerDemo.tsx file.

import * as React from 'react';
import { FC, useState } from 'react';
import styles from './ListPickerDemo.module.scss';
import { IListPickerDemoProps } from './IListPickerDemoProps';
import { ListPicker } from "@pnp/spfx-controls-react/lib/ListPicker";

const ListPickerDemo: FC<IListPickerDemoProps> = (props) => {
    const {
        description,
        isDarkTheme,
        environmentMessage,
        hasTeamsContext,
        userDisplayName
    } = props;
    const [selList, setSelList] = useState<string | string[]>(undefined);
    const [selMultiList, setSelMultiList] = useState<string | string[]>(undefined);
    const [selDocLib, setselDocLib] = useState<string | string[]>(undefined);

    const _onSingleListPickerChange = (lists: string | string[]) => {
        setSelList(lists);
    };

    const _onMultiListPickerChange = (lists: string | string[]) => {
        setSelMultiList(lists.toString());
    };

    const _onDocLibPickerChange = (lists: string | string[]) => {
        setselDocLib(lists.toString());
    };

    return (
        <section className={`${styles.listPickerDemo} ${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>PnP List Picker Demo</h3>
                <div>
                    <p><b>Selected List:</b> {selList}</p>
                    <ListPicker context={props.context as any}
                        label="Select your list"
                        placeholder="Select your list"
                        baseTemplate={100}
                        includeHidden={false}
                        multiSelect={false}
                        contentTypeId='0x0108'
                        onSelectionChanged={_onSingleListPickerChange} />
                </div>
                <div>
                    <p><b>Selected Lists:</b> {selMultiList}</p>
                    <ListPicker context={props.context as any}
                        label="Select your lists"
                        placeholder="Select your lists"
                        baseTemplate={100}
                        includeHidden={false}
                        multiSelect={true}
                        onSelectionChanged={_onMultiListPickerChange} />
                </div>
                <div>
                    <p><b>Selected Document Libraries:</b> {selDocLib}</p>
                    <ListPicker context={props.context as any}
                        label="Select your document libraries"
                        placeholder="Select your document libraries"
                        baseTemplate={101}
                        includeHidden={false}
                        multiSelect={true}
                        onSelectionChanged={_onDocLibPickerChange} />
                </div>
            </div>
        </section>
    );
};

export default ListPickerDemo;

Below are the updates done to the file.

Changed the class component to the react hooks
Created a method named _onSingleListPickerChange, _onMultiListPickerChange, _onDocLibPickerChange to get the information about the selected list.
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
- baseTemplate – Base template of the list to be populated. Please click here to see different list templates available in SharePoint.
- includeHidden – Whether to display the hidden lists or not
- contentTypeId – Display only the lists that has this content type id.
- selectedList – Method that will be executed when the list(s) is selected. It will return the selected list ID alone.
- multiSelect – Enable or disable multi selection
- filter – Use OData query to filter the lists.

Reference URL

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