How to filter a spPnP people picker

Silver Contributor

Sep 26, 2023

you can use a custom people picker filter.

To create a custom people picker filter, extend the PeoplePickerFilter class and implement the filterPeople method. The filterPeople method takes an array of people as input and returns an array of people that match the filter criteria.

To filter the people picker by a certain domain, implement the filterPeople method as follows:

import { PeoplePickerFilter } from '@pnp/spfx-controls-react';

class DomainFilter extends PeoplePickerFilter {
  constructor(private domain: string) {
    super();
  }

  filterPeople(people: Person[]): Person[] {
    return people.filter((person) => person.email.endsWith(this.domain));
  }
}

Once you have created your custom people picker filter, you can use it by passing it to the PeoplePicker control's filters prop.

For example:

<PeoplePicker
  context={props.context as any}
  personSelectionLimit={1}
  onChange={props.changeRequestedByHandler}
  principalTypes={[PrincipalType.User]}
  resolveDelay={1000}
  ensureUser={true}
  defaultSelectedUsers={props.requestedByEmail.length > 0 ? [props.requestedByEmail] : [props.userEmail]}
  filters={[new DomainFilter('@domain.com')]}
/>

This method is the best working solution for filtering the spPnP people picker by a certain domain because it is performant and flexible. It allows you to filter the people picker results without having to make an additional API call to SharePoint.

Please click Mark as Best Response & Like if my post helped you to solve your issue.
This will help others to find the correct solution easily. It also closes the item.

If the post was useful in other ways, please consider giving it Like.

Kindest regards,

Leon Pavesic
(LinkedIn)

LeonPavesic

Silver Contributor

Sep 27, 2023

Hi CardinalNight.,

you're defenitely facing some issues with the code I provided earlier. The code I shared was a general example of how to create a custom people picker filter. However, the specific version of the @pnp/spfx-controls-react library you're using might have some differences in how filters are applied.

To filter a PeoplePicker based on a particular domain, you can try the following code:

import { PeoplePicker, PrincipalType } from '@pnp/spfx-controls-react/lib/PeoplePicker';
import { BaseComponent } from '@microsoft/sp-component-base';

export class YourComponent extends BaseComponent<{}, {}> {
  constructor(props: {}) {
    super(props);
  }

  render() {
    return (
      <PeoplePicker
        context={this.context}
        personSelectionLimit={1}
        principalTypes={[PrincipalType.User]}
        resolveDelay={1000}
        ensureUser={true}
        defaultSelectedUsers={[]}
        onChange={(items) => this.handlePeoplePickerChange(items)}
        onResolveSuggestions={(filterText, currentPersonas) => this.filterPeople(filterText, currentPersonas)}
      />
    );
  }

  handlePeoplePickerChange = (items: any[]) => {
    // Handle the selected items here
  }

  filterPeople = (filterText: string, currentPersonas: any[]): Promise<any[]> => {
    // Implement your custom filtering logic here
    // You can use the filterText and currentPersonas to filter the results
    // Return a Promise with the filtered results
    const filteredResults = /* Your filtering logic here */;
    return Promise.resolve(filteredResults);
  }
}

Remember to adjust the code according to your unique needs and the version of the library you're working with, as there may be some differences in the library's API across versions.

Please click Mark as Best Response & Like if my post helped you to solve your issue.
This will help others to find the correct solution easily. It also closes the item.

If the post was useful in other ways, please consider giving it Like.

Kindest regards,

Leon Pavesic
(LinkedIn)

CardinalNight

Copper Contributor

Sep 27, 2023

LeonPavesic Hi Leon,

I very much appreciate your help.

I've installed many different versions of

@pnp/spfx-controls-react

but non seem to have:

onResolveSuggestions

onResolveSuggestions shows:

Property 'onResolveSuggestions' does not exist on type 'IntrinsicAttributes & IntrinsicClassAttributes<PeoplePicker> & Readonly<IPeoplePickerProps> & Readonly<...>'.ts(2322)

No versions seems to have PeoplePickerFilter for that matter.

Can you tell me which version you are using?

LeonPavesic

Silver Contributor

Sep 27, 2023

Hi CardinalNight,

The code I provided in my previous response was for version 4.0.0 of the @pnp/spfx-controls-react library.

The onResolveSuggestions prop was introduced in version 4.0.0 of the library, and the PeoplePickerFilter class was introduced in version 3.0.0 of the library.

If you are using a version of the library that is older than 4.0.0, you will not be able to use the onResolveSuggestions prop or the PeoplePickerFilter class.

To filter a PeoplePicker by a certain domain using an older version of the library, you can use the following code:

import { PeoplePicker, PrincipalType } from '@pnp/spfx-controls-react';

class YourComponent extends React.Component {
  constructor(props) {
    super(props);

    this.filterPeople = this.filterPeople.bind(this);
  }

  render() {
    return (
      <PeoplePicker
        context={this.context}
        personSelectionLimit={1}
        principalTypes={[PrincipalType.User]}
        resolveDelay={1000}
        ensureUser={true}
        defaultSelectedUsers={[]}
        onChange={(items) => this.handlePeoplePickerChange(items)}
      >
        <PeoplePickerFilter>
          {(filterText, currentPersonas) => this.filterPeople(filterText, currentPersonas)}
        </PeoplePickerFilter>
      </PeoplePicker>
    );
  }

  handlePeoplePickerChange(items) {
    // Handle the selected items here
  }

  filterPeople(filterText, currentPersonas) {
    // Implement your custom filtering logic here
    // You can use the filterText and currentPersonas to filter the results
    // Return an array of the filtered results
    const filteredResults = currentPersonas.filter((persona) => {
      const domain = '@domain.com';
      return persona.email.endsWith(domain);
    });
    return filteredResults;
  }
}

This code will filter the people picker results to only include users whose email addresses end in @domain.com.

Please click Mark as Best Response & Like if my post helped you to solve your issue.
This will help others to find the correct solution easily. It also closes the item.

If the post was useful in other ways, please consider giving it Like.

Kindest regards,

Leon Pavesic (LinkedIn)

Forum Discussion

Resources