Added custom filter to PeoplePicker selection

Author: GuidoZam

src/controls/peoplepicker/IPeoplePicker.ts

@@ -15,7 +15,7 @@ export interface IPeoplePickerProps {
   context: BaseComponentContext;
   /**
    * Text of the Control
-  */
+   */
   titleText?: string;
   /**
    * Web Absolute Url of source site. When this is provided, a search request is done to the local site.
@@ -32,7 +32,7 @@ export interface IPeoplePickerProps {
   /**
    * Id of SharePoint Group (Number) or Office365 Group (String)
    */
-  groupId?: number | string | (string|number)[];
+  groupId?: number | string | (string | number)[];
   /**
    * Maximum number of suggestions to show in the full suggestion list. (default: 5)
    */
@@ -75,7 +75,7 @@ export interface IPeoplePickerProps {
   /**
    * Prop to validate contents on blur
    */
-   validateOnFocusOut?: boolean;
+  validateOnFocusOut?: boolean;
   /**
    * Method to check value of People Picker text
    */
@@ -89,8 +89,8 @@ export interface IPeoplePickerProps {
    */
   tooltipDirectional?: DirectionalHint;
   /**
-  * Class Name for the whole People picker control
-  */
+   * Class Name for the whole People picker control
+   */
   peoplePickerWPclassName?: string;
   /**
    * Class Name for the People picker control
@@ -125,10 +125,14 @@ export interface IPeoplePickerProps {
    * Placeholder to be displayed in an empty term picker
    */
   placeholder?: string;
-   /**
+  /**
    * styles to apply on control
    */
-    styles?: Partial<IBasePickerStyles>;
+  styles?: Partial<IBasePickerStyles>;
+  /**
+   * Define a filter to be applied to the search results, such as a filter to only show users from a specific domain
+   */
+  resultFilter?: (result: IPersonaProps[]) => IPersonaProps[];
 }
 
 export interface IPeoplePickerState {

src/controls/peoplepicker/PeoplePickerComponent.tsx

@@ -139,7 +139,13 @@ export class PeoplePicker extends React.Component<IPeoplePickerProps, IPeoplePic
       const results = await this.peopleSearchService.searchPeople(searchText, this.suggestionsLimit, this.props.principalTypes, this.props.webAbsoluteUrl, this.groupId, this.props.ensureUser, this.props.allowUnvalidated);
       // Remove duplicates
       const { selectedPersons, mostRecentlyUsedPersons } = this.state;
-      const filteredPersons = this.removeDuplicates(results, selectedPersons);
+      let filteredPersons = this.removeDuplicates(results, selectedPersons);
+
+      // If a resultFilter is provided apply the filter to the results
+      if (this.props.resultFilter !== undefined && filteredPersons.length > 0) {
+        filteredPersons = this.props.resultFilter(filteredPersons);
+      }
+
       // Add the users to the most recently used ones
       let recentlyUsed = [...filteredPersons, ...mostRecentlyUsedPersons];
       recentlyUsed = uniqBy(recentlyUsed, "text");

src/webparts/controlsTest/components/ControlsTest.tsx

@@ -197,7 +197,7 @@ import { TestControl } from "./TestControl";
 import { UploadFiles } from "../../../controls/uploadFiles";
 import { IFileInfo } from "@pnp/sp/files";
 import { FieldPicker } from "../../../FieldPicker";
-import { Toggle } from "office-ui-fabric-react";
+import { IPersonaProps, Toggle } from "office-ui-fabric-react";
 import { ListItemComments } from "../../../ListItemComments";
 import { ViewPicker } from "../../../controls/viewPicker";
 
@@ -1517,9 +1517,17 @@ export default class ControlsTest extends React.Component<IControlsTestProps, IC
             personSelectionLimit={5}
             ensureUser={true}
             principalTypes={[PrincipalType.User, PrincipalType.SharePointGroup, PrincipalType.SecurityGroup, PrincipalType.DistributionList]}
-
             onChange={this._getPeoplePickerItems} />
 
+          <PeoplePicker context={this.props.context}
+            titleText="People Picker with filter for '.com'"
+            personSelectionLimit={5}
+            ensureUser={true}
+            principalTypes={[PrincipalType.User, PrincipalType.SharePointGroup, PrincipalType.SecurityGroup, PrincipalType.DistributionList]}
+            resultFilter={(result: IPersonaProps[]) => {
+              return result.filter(p => p["loginName"].indexOf(".com") !== -1);
+            }}
+            onChange={this._getPeoplePickerItems} />
 
           <PeoplePicker context={this.props.context}
             titleText="People Picker (Group not found)"