7

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 [email protected] --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?

1
  • 1
    can you share your html. i.e the tsx file ? Sep 26, 2017 at 7:04

2 Answers 2

5

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

4
  • I'll try with this :)
    – Goshky
    Sep 26, 2017 at 11:04
  • Where i install this version, have following error: JSX element class does not support attributes because it does not have a 'props' property
    – Goshky
    Sep 26, 2017 at 13:36
  • I use SPFx v1.0.2 for SP16 On-Premise..
    – Goshky
    Sep 26, 2017 at 13:43
  • looks to be an issue with the Fabric UI, not SPFx. Could you take a look here for how they have used the NormalPeoplePicker ? Do modify your code accordingly Sep 27, 2017 at 5:28
3

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

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.