PnP React Controls Part 15 – SitePicker

Introduction

Hi everyone, this is part 15 of PnP React Controls Series. This post will explain the usage of the PnP SitePicker 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 mostly when there is a report or admin kind of activities doing for multiple site collections or sites, where you need the users to choose the site or web and based on that selection the data should be fetched for that site collection or site. This control provides us limited mandatory information that we can use to get the site collection or site information.

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 sitePickerDemo. Below is the SitePickerDemo.tsx file.

import * as React from 'react';
import { FC } from 'react';
import styles from './SitePickerDemo.module.scss';
import { ISitePickerDemoProps } from './ISitePickerDemoProps';
import { ISite, SitePicker } from "@pnp/spfx-controls-react/lib/SitePicker";

const SitePickerDemo: FC<ISitePickerDemoProps> = (props) => {
    const {
        description,
        isDarkTheme,
        environmentMessage,
        hasTeamsContext,
        userDisplayName
    } = props;
    const [selSingleSite, setSelSingleSite] = React.useState<ISite>(undefined);
    const [selMultiWebs, setSelMultiWebs] = React.useState<ISite[]>(undefined);

    const _changeSelSites = (sites: ISite[]) => {
        console.log("Selected Sites: ", sites);
        setSelSingleSite(sites[0]);
    };

    const _changeSelWebs = (sites: ISite[]) => {
        console.log("Selected Webs: ", sites);
        setSelMultiWebs(sites);
    };

    return (
        <section className={`${styles.sitePickerDemo} ${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 Site Picker Demo</h3>
                <div>
                    <SitePicker
                        context={props.context as any}
                        label={'Select a site'}
                        mode={'site'}
                        allowSearch={true}
                        multiSelect={false}
                        onChange={_changeSelSites}
                        placeholder={'Select sites'}
                        searchPlaceholder={'Filter sites'} />
                    {selSingleSite &&
                        <div>
                            <p><b>Selected Site Info:</b></p>
                            <p>
                                Title: {selSingleSite.title},
                                Site Id: {selSingleSite.id},
                                Url: {selSingleSite.url},
                                Web Id: {selSingleSite.webId}
                            </p>
                        </div>
                    }
                </div>
                <div>
                    <SitePicker
                        context={props.context as any}
                        label={'Select multiple webs'}
                        mode={'web'}
                        allowSearch={true}
                        multiSelect={true}
                        onChange={_changeSelWebs}
                        placeholder={'Select webs'}
                        searchPlaceholder={'Filter webs'} />
                    {selMultiWebs &&
                        <div>
                            <p><b>Selected Webs:</b></p>
                            <p>
                                <ul>
                                    {selMultiWebs.map((web: ISite) => {
                                        return (
                                            <li>
                                                Title: {web.title},
                                                Site Id: {web.id},
                                                Url: {web.url},
                                                Web Id: {web.webId}
                                            </li>
                                        )
                                    })}
                                </ul>
                            </p>
                        </div>
                    }
                </div>
            </div>
        </section>
    );
};

export default SitePickerDemo;

Below are the updates done to the file.

Changed the class component to the react hooks
Created 2 state variables to hold the selected sites and webs for 2 different controls.
Following are some of the properties of the control that allows us to customize based on our requirement
- context – Base webpart context is very much required for the control to work.
- allowSearch – Whether search within the control should be available or not.
- mode – Use this option to load Site or Web or HubSites.
- multiSelect – Whether the users are allowed to choose single or multiple sites.
- onChange – Method executed when the site is selected. Following are the properties that are provided as a result
  - Id
  - weburl
  - webid
  - title

Reference URL

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