Step-by-Step Guide to Using the PnP Site Picker Control in SPFx

When developing solutions with the SharePoint Framework (SPFx), it is often necessary to provide users with a way to select a SharePoint site. This capability is important in scenarios such as pulling information from different sites, aggregating reports, or provisioning resources to specific locations.

The PnP Site Picker control, available in the PnP SPFx React Controls library, is a ready-to-use component designed to address this exact need. Instead of building custom dropdowns or requiring users to type URLs manually, this control provides a simple, intuitive, and reliable interface for site selection.

What is the Site Picker Control?

The Site Picker control is a React-based user interface element that integrates seamlessly with SPFx. It allows users to search for and select one or more SharePoint sites directly from their tenant.

Key Features

Search functionality: Users can search by site name or URL.
Single or multiple selection: Choose one site or several, depending on requirements.
Microsoft Graph integration: Ensures up-to-date site information.
Configurable options: For example, you can limit the control to show only hub sites or communication sites.

Why Should You Use It?

Without this control, developers often end up creating custom dropdowns or maintaining lists of site URLs, which can be error-prone and time-consuming. The Site Picker control solves these issues by offering:

Faster development with minimal custom code.
A consistent look and feel across solutions.
Reduced maintenance, since the control evolves with PnP updates.
A user-friendly experience supported by Microsoft Graph.

How to Use the Site Picker

Step 1. Install the Required Package

The Site Picker is part of the PnP SPFx React Controls library. Install it in your project with:

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

Step 2. Import the Control

Add the following import statement in your component file:

import { SitePicker } from "@pnp/spfx-controls-react/lib/SitePicker";

Step 3. Implement the Control

Here is a basic example of the Site Picker in action:

<SitePicker
  label="Select Site(s)"
  context={this.props.context}
  mode="site"
  multiSelect={true}
  onChange={(sites) => {
    console.log("Selected sites:", sites);
    this.setState({ selectedSites: sites });
  }}
/>

Explanation of Properties

label – The text label shown to the user.
context – Passes the SPFx context, which is required.
mode – Determines the type of site selection (e.g., "site", "hub", or "sitehub").
multiSelect – Allows either single or multiple selections.
onChange – The function that handles the selected site(s).

Example Use Cases

News Aggregation – Collect and display news articles from multiple communication sites.
Reporting Solutions – Enable users to pick sites for usage or activity reports.
Provisioning Tools – Allow administrators to select a target hub or site for deploying templates.

Best Practices

Restrict options when possible – For example, limit the picker to hub sites if that is your use case.
Check user permissions – Ensure users have access to the sites they select.
Cache data where appropriate – This can improve performance when working with large tenants.
Stay updated – PnP libraries are actively maintained, so always use the latest stable release.

Conclusion

The PnP Site Picker control is a valuable tool for developers working with SPFx. It eliminates the need for custom site selection components, reduces complexity, and provides users with a modern, intuitive experience. By leveraging this control, you can focus more on the business logic of your solution while ensuring that site selection remains seamless and reliable.

If your SPFx project involves working across multiple SharePoint sites, the Site Picker control is highly recommended.