SPFx(On-Prem) - Property for single choice of Office-IU-Fabric - PeoplePicker

Question

I need to use componen for SPFX webtpart v1.0.2 for On-Premise server and I want to choice only one person from Office-UI-Fabric - PeoplePicker component

This is my HTML(.tsx)

    public render(): React.ReactElement<ISPPeoplePickerProps> {

    return (
      <div className={ css('ms-TextField', {'is-required': this.props.required }) }>
        <Label>{ this.props.label }</Label>
        <NormalPeoplePicker
            onChange={ this._onChangePeoplePicker }
            onResolveSuggestions={ this._onFilterChangedPeoplePicker }
            getTextFromItem={ (persona: IPersonaProps) => persona.primaryText }                
            pickerSuggestionsProps={ suggestionProps }
            className={ 'ms-PeoplePicker' }
            key={ 'normal' } />
      </div>
    );
  }

Where i install version "npm install office-ui-fabric-react@4.37.0 --save", because she have property ItemLimit {1} have following error:

[ts] JSX element type 'NormalPeoplePicker' is not a constructor function for JSX elements. Property 'setState' is missing in type 'NormalPeoplePicker'. [ts] JSX element class does not support attributes because it does not have a 'props' property import NormalPeoplePicker

How to do this?

Answer 1

In the office fabric UI, we have a property itemLimit that you can use to restrict the selection to a single person.

So, you need to modify it as below:

public render(): React.ReactElement<ISPPeoplePickerProps> {

    return (
      <div className={ css('ms-TextField', {'is-required': this.props.required }) }>
        <Label>{ this.props.label }</Label>
        <NormalPeoplePicker
            onChange={ this._onChangePeoplePicker }
            onResolveSuggestions={ this._onFilterChangedPeoplePicker }
            getTextFromItem={ (persona: IPersonaProps) => persona.primaryText }                
            pickerSuggestionsProps={ suggestionProps }
            itemLimit={ 1 }
            className={ 'ms-PeoplePicker' }
            key={ 'normal' } />
      </div>
    );
  }

This property was added in the version 4.37.0 which was released on 24 Aug 2017. So, ensure that you are using a version that is 4.37.0 or higher.

In your package.json file, ensure that the reference is somewhat as below:

"dependencies": {    
    //other entries
    "office-ui-fabric-react": "^4.37.0",    
  },

Reference - Office UI Fabric React

Answer 2

You can use onResolveSuggestions.

public render() {
const suggestionProps: IBasePickerSuggestionsProps = {
    suggestionsHeaderText: 'Suggested People',
    noResultsFoundText: 'No results found',
    loadingText: 'Loading'
};
return <CompactPeoplePicker
                onResolveSuggestions={this.onFilterChanged.bind(this)}
                getTextFromItem={(persona: IPersonaProps) => persona.primaryText}
                pickerSuggestionsProps={suggestionProps}
                className={`class_name ${this.props.className}`}
                onChange={(items) => this.onChangeItems(items)}
            />
 }

onFilterChanged(filterText: string, currentPersonas: IPersonaProps[], limitResults?: number) {
var self = this;
if (filterText && currentPersonas.length < 1) {
    return new Promise((resolve, reject) => {
            self.getUsersByFilter(filterText + "*").then((usersResult: any) => {
                var d = usersResult.d.query;
                var us;
                if (d.PrimaryQueryResult && d.PrimaryQueryResult.RelevantResults) {
                    us = d.PrimaryQueryResult.RelevantResults.Table.Rows.results.map((el, id) => {
                        var elem = this.parseSearchResults(el.Cells.results, ["PreferredName", "PictureURL", "Title", "SipAddress", "WorkEmail", "JobTitle", "WorkPhone", "MobilePhone", "Path", "BaseOfficeLocation", "OfficeNumber"]);
                        return elem;
                    });
                }
                var usersArray = us.map((el) => {
                    return {                                
                        imageUrl: `/_layouts/15/userphoto.aspx?size=S&username=${encodeURIComponent(el["WorkEmail"])}`,
                        path: el["Path"],
                        primaryText: el["PreferredName"],
                        secondaryText: el["WorkEmail"],
                        email: el["WorkEmail"],
                        officeLocation: el["BaseOfficeLocation"],
                        officeNumber: el["OfficeNumber"]
                    } as IPersonaProps
                });
                resolve(usersArray);
            }).catch((ex) => {
                console.log("reject");
                reject([])
            })
    })
} else {
    return [];
}
}

Ref: PeoplePicker Office UI Fabric