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 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?

  • 1
    can you share your html. i.e the tsx file ? – Gautam Sheth Sep 26 '17 at 7:04
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

  • I'll try with this :) – Goshky Sep 26 '17 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 '17 at 13:36
  • I use SPFx v1.0.2 for SP16 On-Premise.. – Goshky Sep 26 '17 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 – Gautam Sheth Sep 27 '17 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, privacy policy and cookie policy

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