Skip to content

Commit 4abed31

Browse files
author
Gautam Sheth
committed
PeoplePicker - Added REST API filter for principaltype and hiddenInUI and no metadata filter to reduce payload
1 parent e9eb35e commit 4abed31

File tree

1 file changed

+88
-68
lines changed

1 file changed

+88
-68
lines changed

‎src/controls/peoplepicker/PeoplePickerComponent.tsx

Lines changed: 88 additions & 68 deletions
Original file line numberDiff line numberDiff line change
@@ -44,8 +44,8 @@ export class PeoplePicker extends React.Component<IPeoplePickerProps, IPeoplePic
4444
allPersons: [],
4545
currentPicker: 0,
4646
peoplePartTitle: "",
47-
peoplePartTooltip : "",
48-
isLoading : false,
47+
peoplePartTooltip: "",
48+
isLoading: false,
4949
showmessageerror: false
5050
};
5151
}
@@ -61,15 +61,15 @@ export class PeoplePicker extends React.Component<IPeoplePickerProps, IPeoplePic
6161
// online mode
6262
// Load the users
6363
this._thisLoadUsers();
64-
}
64+
}
6565
}
6666

6767
/**
6868
* Generate the user photo link
6969
*
7070
* @param value
7171
*/
72-
private generateUserPhotoLink(value : string) : string {
72+
private generateUserPhotoLink(value: string): string {
7373
return `https://outlook.office365.com/owa/service.svc/s/GetPersonaPhoto?email=${value}&UA=0&size=HR96x96`;
7474
}
7575

@@ -86,7 +86,7 @@ export class PeoplePicker extends React.Component<IPeoplePickerProps, IPeoplePic
8686
text: "Roger Federer",
8787
secondaryText: "[email protected]",
8888
tertiaryText: "",
89-
optionalText:""
89+
optionalText: ""
9090
});
9191
_fakeUsers.push({
9292
id: "10dfa208-d7d4-4aef-a7ea-f9e4bb1b85c2",
@@ -95,7 +95,7 @@ export class PeoplePicker extends React.Component<IPeoplePickerProps, IPeoplePic
9595
text: "Rafael Nadal",
9696
secondaryText: "[email protected]",
9797
tertiaryText: "",
98-
optionalText:""
98+
optionalText: ""
9999
});
100100
_fakeUsers.push({
101101
id: "10dfa208-d7d4-4aef-a7ea-f9e4bb1b85c3",
@@ -104,7 +104,7 @@ export class PeoplePicker extends React.Component<IPeoplePickerProps, IPeoplePic
104104
text: "Novak Djokovic",
105105
secondaryText: "[email protected]",
106106
tertiaryText: "",
107-
optionalText:""
107+
optionalText: ""
108108
});
109109
_fakeUsers.push({
110110
id: "10dfa208-d7d4-4aef-a7ea-f9e4bb1b85c4",
@@ -113,7 +113,7 @@ export class PeoplePicker extends React.Component<IPeoplePickerProps, IPeoplePic
113113
text: "Juan Martin del Potro",
114114
secondaryText: "[email protected]",
115115
tertiaryText: "",
116-
optionalText:""
116+
optionalText: ""
117117
});
118118

119119
let personaList: IPersonaProps[] = [];
@@ -137,20 +137,40 @@ export class PeoplePicker extends React.Component<IPeoplePickerProps, IPeoplePic
137137
* Retrieve the users
138138
*/
139139
private async _thisLoadUsers(): Promise<void> {
140-
var stringVal = "";
140+
var stringVal: string = "";
141+
142+
let filtered: boolean = false;
143+
141144
if (this.props.groupName) {
142145
stringVal = `/_api/web/sitegroups/GetByName('${this.props.groupName}')/users`;
143146
} else {
144147
stringVal = "/_api/web/siteusers";
145148
}
146149

150+
// filter for principal Type
151+
var filterVal: string = "";
152+
if (this.props.principleTypes) {
153+
filterVal = `${"?$filter="}${this.props.principleTypes.map(principalType => `(PrincipalType eq ${principalType})`).join(" or ")}`;
154+
filtered = true;
155+
}
156+
157+
// filter for showHiddenInUI
158+
if (this.props.showHiddenInUI) {
159+
filterVal = filtered ? `${filterVal} and (IsHiddenInUI eq ${this.props.showHiddenInUI})` : `?$filter=IsHiddenInUI eq ${this.props.showHiddenInUI}`;
160+
filtered = true;
161+
}
162+
147163
const webAbsoluteUrl = this.props.webAbsoluteUrl || this.props.context.pageContext.web.absoluteUrl;
148164
// Create the rest API
149-
const restApi = `${webAbsoluteUrl}${stringVal}`;
165+
const restApi = filtered ? `${webAbsoluteUrl}${stringVal}${filterVal}` : `${webAbsoluteUrl}${stringVal}`;
150166

151167
try {
152168
// Call the API endpoint
153-
const items: IUsers = await this.props.context.spHttpClient.get(restApi, SPHttpClient.configurations.v1).then(resp => resp.json());
169+
const items: IUsers = await this.props.context.spHttpClient.get(restApi, SPHttpClient.configurations.v1, {
170+
headers: {
171+
'Accept': 'application/json;odata.metadata=none'
172+
}
173+
}).then(resp => resp.json());
154174

155175
// Check if items were retrieved
156176
if (items && items.value && items.value.length > 0) {
@@ -160,7 +180,7 @@ export class PeoplePicker extends React.Component<IPeoplePickerProps, IPeoplePic
160180
// Loop over all the retrieved items
161181
for (let i = 0; i < items.value.length; i++) {
162182
const item = items.value[i];
163-
if (!item.IsHiddenInUI || (this.props.showHiddenInUI && item.IsHiddenInUI)) {
183+
if (!item.IsHiddenInUI || (this.props.showHiddenInUI && item.IsHiddenInUI)) {
164184
// Check if the the type must be returned
165185
if (!this.props.principleTypes || this.props.principleTypes.indexOf(item.PrincipalType) !== -1) {
166186
userValuesArray.push({
@@ -177,7 +197,7 @@ export class PeoplePicker extends React.Component<IPeoplePickerProps, IPeoplePic
177197
}
178198

179199
// Set Default selected persons
180-
let defaultUsers : any = [];
200+
let defaultUsers: any = [];
181201
let defaultPeopleList: IPersonaProps[] = [];
182202
if (this.props.defaultSelectedUsers) {
183203
defaultUsers = this.getDefaultUsers(userValuesArray, this.props.defaultSelectedUsers);
@@ -197,10 +217,10 @@ export class PeoplePicker extends React.Component<IPeoplePickerProps, IPeoplePic
197217

198218
// Update the current state
199219
this.setState({
200-
allPersons : userValuesArray,
201-
selectedPersons : defaultPeopleList.length != 0 ? defaultPeopleList : [],
202-
peoplePersonaMenu : personaList,
203-
mostRecentlyUsedPersons : personaList.slice(0,5),
220+
allPersons: userValuesArray,
221+
selectedPersons: defaultPeopleList.length != 0 ? defaultPeopleList : [],
222+
peoplePersonaMenu: personaList,
223+
mostRecentlyUsedPersons: personaList.slice(0, 5),
204224
showmessageerror: this.props.isRequired && this.state.selectedPersons.length === 0
205225
});
206226
}
@@ -275,10 +295,10 @@ export class PeoplePicker extends React.Component<IPeoplePickerProps, IPeoplePic
275295
*/
276296
private _filterPersons(filterText: string): IPersonaProps[] {
277297
return this.state.peoplePersonaMenu.filter(item =>
278-
this._doesTextStartWith(item.text as string, filterText)
279-
|| this._doesTextContains(item.text as string, filterText)
280-
|| this._doesTextStartWith(item.secondaryText as string, filterText)
281-
|| this._doesTextContains(item.secondaryText as string, filterText));
298+
this._doesTextStartWith(item.text as string, filterText)
299+
|| this._doesTextContains(item.text as string, filterText)
300+
|| this._doesTextStartWith(item.secondaryText as string, filterText)
301+
|| this._doesTextContains(item.secondaryText as string, filterText));
282302
}
283303

284304

@@ -302,12 +322,12 @@ export class PeoplePicker extends React.Component<IPeoplePickerProps, IPeoplePic
302322
return text && text.toLowerCase().indexOf(filterText.toLowerCase()) === 0;
303323
}
304324

305-
/**
306-
* Checks if text contains
307-
*
308-
* @param text
309-
* @param filterText
310-
*/
325+
/**
326+
* Checks if text contains
327+
*
328+
* @param text
329+
* @param filterText
330+
*/
311331
private _doesTextContains(text: string, filterText: string): boolean {
312332
return text && text.toLowerCase().indexOf(filterText.toLowerCase()) > 0;
313333
}
@@ -332,23 +352,23 @@ export class PeoplePicker extends React.Component<IPeoplePickerProps, IPeoplePic
332352
* @param userValuesArray
333353
* @param selectedUsers
334354
*/
335-
private getDefaultUsers(userValuesArray : any[], selectedUsers : string[]) : any {
355+
private getDefaultUsers(userValuesArray: any[], selectedUsers: string[]): any {
336356
let defaultuserValuesArray: any[] = [];
337357
for (let i = 0; i < selectedUsers.length; i++) {
338358
const obj = { valToCompare: selectedUsers[i] };
339359
const length = defaultuserValuesArray.length;
340-
defaultuserValuesArray = defaultuserValuesArray.length !== 0 ? defaultuserValuesArray.concat(userValuesArray.filter(this.filterUsers, obj)) : userValuesArray.filter(this.filterUsers, obj);
360+
defaultuserValuesArray = defaultuserValuesArray.length !== 0 ? defaultuserValuesArray.concat(userValuesArray.filter(this.filterUsers, obj)) : userValuesArray.filter(this.filterUsers, obj);
341361
if (length === defaultuserValuesArray.length) {
342362
const defaultUnknownUser = [{
343363
id: 1000 + i, //just a random number
344364
imageUrl: "",
345365
imageInitials: "",
346-
text: selectedUsers[i] , //Name
366+
text: selectedUsers[i], //Name
347367
secondaryText: selectedUsers[i], //Role
348368
tertiaryText: "", //status
349369
optionalText: "" //stgring
350370
}];
351-
defaultuserValuesArray = defaultuserValuesArray.length !== 0 ? defaultuserValuesArray.concat(defaultUnknownUser) : defaultUnknownUser;
371+
defaultuserValuesArray = defaultuserValuesArray.length !== 0 ? defaultuserValuesArray.concat(defaultUnknownUser) : defaultUnknownUser;
352372
}
353373
}
354374
return defaultuserValuesArray;
@@ -372,49 +392,49 @@ export class PeoplePicker extends React.Component<IPeoplePickerProps, IPeoplePic
372392
<Label>{this.props.titleText || strings.peoplePickerComponentTitleText}</Label>
373393

374394
<NormalPeoplePicker pickerSuggestionsProps={suggestionProps}
375-
onResolveSuggestions={this._onPersonFilterChanged}
376-
onEmptyInputFocus={ this._returnMostRecentlyUsedPerson}
377-
getTextFromItem={(peoplePersonaMenu: IPersonaProps) => peoplePersonaMenu.text}
378-
className={`'ms-PeoplePicker' ${this.props.peoplePickerCntrlclassName ? this.props.peoplePickerCntrlclassName : ''}`}
379-
key={'normal'}
380-
onValidateInput={this._validateInputPeople}
381-
removeButtonAriaLabel={'Remove'}
382-
inputProps={{
383-
'aria-label': 'People Picker'
384-
}}
385-
selectedItems={this.state.selectedPersons}
386-
itemLimit={this.props.personSelectionLimit || 1}
387-
disabled={this.props.disabled}
388-
onChange={this._onPersonItemsChange} />
395+
onResolveSuggestions={this._onPersonFilterChanged}
396+
onEmptyInputFocus={this._returnMostRecentlyUsedPerson}
397+
getTextFromItem={(peoplePersonaMenu: IPersonaProps) => peoplePersonaMenu.text}
398+
className={`'ms-PeoplePicker' ${this.props.peoplePickerCntrlclassName ? this.props.peoplePickerCntrlclassName : ''}`}
399+
key={'normal'}
400+
onValidateInput={this._validateInputPeople}
401+
removeButtonAriaLabel={'Remove'}
402+
inputProps={{
403+
'aria-label': 'People Picker'
404+
}}
405+
selectedItems={this.state.selectedPersons}
406+
itemLimit={this.props.personSelectionLimit || 1}
407+
disabled={this.props.disabled}
408+
onChange={this._onPersonItemsChange} />
389409
</div>
390410
);
391411

392412
return (
393413
<div>
394-
{
395-
this.props.showtooltip ? (
396-
<TooltipHost content={this.props.tooltipMessage || strings.peoplePickerComponentTooltipMessage}
397-
id='pntp'
398-
calloutProps={ { gapSpace: 0 } }
399-
directionalHint={this.props.tooltipDirectional || DirectionalHint.leftTopEdge}>
400-
{peoplepicker}
401-
</TooltipHost>
402-
) : (
403-
<div>
404-
{peoplepicker}
405-
</div>
406-
)
407-
}
414+
{
415+
this.props.showtooltip ? (
416+
<TooltipHost content={this.props.tooltipMessage || strings.peoplePickerComponentTooltipMessage}
417+
id='pntp'
418+
calloutProps={{ gapSpace: 0 }}
419+
directionalHint={this.props.tooltipDirectional || DirectionalHint.leftTopEdge}>
420+
{peoplepicker}
421+
</TooltipHost>
422+
) : (
423+
<div>
424+
{peoplepicker}
425+
</div>
426+
)
427+
}
408428

409-
{
410-
(this.props.isRequired && this.state.showmessageerror) && (
411-
<MessageBar messageBarType={MessageBarType.error}
412-
isMultiline={false}
413-
className={`${this.props.errorMessageclassName ? this.props.errorMessageclassName : ''}`}>
414-
{this.props.errorMessage ? this.props.errorMessage : strings.peoplePickerComponentErrorMessage}
415-
</MessageBar>
416-
)
417-
}
429+
{
430+
(this.props.isRequired && this.state.showmessageerror) && (
431+
<MessageBar messageBarType={MessageBarType.error}
432+
isMultiline={false}
433+
className={`${this.props.errorMessageclassName ? this.props.errorMessageclassName : ''}`}>
434+
{this.props.errorMessage ? this.props.errorMessage : strings.peoplePickerComponentErrorMessage}
435+
</MessageBar>
436+
)
437+
}
418438
</div>
419439
);
420440
}

0 commit comments

Comments
 (0)