Skip to content

Commit 48d3c49

Browse files
estruyfestruyf
committed
Enhancements for #94 and #122 
1 parent b3c66fa commit 48d3c49

File tree

9 files changed

+58
-14
lines changed

9 files changed

+58
-14
lines changed

‎CHANGELOG.JSON

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -6,6 +6,8 @@
66
"new": [],
77
"enhancements": [
88
"`PeoplePicker`: ability to specify the source site to load users from [#110](https://github.com/SharePoint/sp-dev-fx-controls-react/issues/110)",
9+
"`PeoplePicker`: Specify to hide or show the users/groups which are hidden in the UI [#122](https://github.com/SharePoint/sp-dev-fx-controls-react/issues/122)",
10+
"`PeoplePicker`: Specify principle type to retrieve (users, groups, ...) [#122](https://github.com/SharePoint/sp-dev-fx-controls-react/issues/122)",
911
"`WebPartTitle`: changing font-sizes on different resolutions [#114](https://github.com/SharePoint/sp-dev-fx-controls-react/issues/114)",
1012
"`WebPartTitle`: Added accessibility tags for web part title [#121](https://github.com/SharePoint/sp-dev-fx-controls-react/pull/121)",
1113
"`ListView`: Resizable columns - introduced a `isResizable` property [#119](https://github.com/SharePoint/sp-dev-fx-controls-react/issues/119)",

‎CHANGELOG.md

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -5,6 +5,8 @@
55
**Enhancements**
66

77
- `PeoplePicker`: ability to specify the source site to load users from [#110](https://github.com/SharePoint/sp-dev-fx-controls-react/issues/110)
8+
- `PeoplePicker`: Specify to hide or show the users/groups which are hidden in the UI [#122](https://github.com/SharePoint/sp-dev-fx-controls-react/issues/122)
9+
- `PeoplePicker`: Specify principle type to retrieve (users, groups, ...) [#122](https://github.com/SharePoint/sp-dev-fx-controls-react/issues/122)
810
- `WebPartTitle`: changing font-sizes on different resolutions [#114](https://github.com/SharePoint/sp-dev-fx-controls-react/issues/114)
911
- `WebPartTitle`: Added accessibility tags for web part title [#121](https://github.com/SharePoint/sp-dev-fx-controls-react/pull/121)
1012
- `ListView`: Resizable columns - introduced a `isResizable` property [#119](https://github.com/SharePoint/sp-dev-fx-controls-react/issues/119)

‎docs/documentation/docs/about/release-notes.md

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -5,6 +5,8 @@
55
**Enhancements**
66

77
- `PeoplePicker`: ability to specify the source site to load users from [#110](https://github.com/SharePoint/sp-dev-fx-controls-react/issues/110)
8+
- `PeoplePicker`: Specify to hide or show the users/groups which are hidden in the UI [#122](https://github.com/SharePoint/sp-dev-fx-controls-react/issues/122)
9+
- `PeoplePicker`: Specify principle type to retrieve (users, groups, ...) [#122](https://github.com/SharePoint/sp-dev-fx-controls-react/issues/122)
810
- `WebPartTitle`: changing font-sizes on different resolutions [#114](https://github.com/SharePoint/sp-dev-fx-controls-react/issues/114)
911
- `WebPartTitle`: Added accessibility tags for web part title [#121](https://github.com/SharePoint/sp-dev-fx-controls-react/pull/121)
1012
- `ListView`: Resizable columns - introduced a `isResizable` property [#119](https://github.com/SharePoint/sp-dev-fx-controls-react/issues/119)

‎docs/documentation/docs/controls/PeoplePicker.md

Lines changed: 16 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -21,7 +21,7 @@ This control renders a People picker field which can be used to select one or mo
2121
- Import the following modules to your component:
2222

2323
```typescript
24-
import { PeoplePicker } from "@pnp/spfx-controls-react/lib/PeoplePicker";
24+
import { PeoplePicker, PrincipalType } from "@pnp/spfx-controls-react/lib/PeoplePicker";
2525
```
2626

2727
- Use the `PeoplePicker` control in your code as follows:
@@ -35,7 +35,9 @@ import { PeoplePicker } from "@pnp/spfx-controls-react/lib/PeoplePicker";
3535
showtooltip={true}
3636
isRequired={true}
3737
disabled={true}
38-
selectedItems={this._getPeoplePickerItems} />
38+
selectedItems={this._getPeoplePickerItems}
39+
showHiddenInUI={false}
40+
principleTypes={[PrincipalType.User]} />
3941
```
4042

4143
- With the `selectedItems` property you can get the selected People in the Peoplepicker :
@@ -68,6 +70,18 @@ The People picker control can be configured with the following properties:
6870
| peoplePickerCntrlclassName | string | no | applies custom styling to the people picker control only |
6971
| defaultSelectedUsers | string[] | no | Default selected user emails |
7072
| webAbsoluteUrl | string | no | Specify the site URL on which you want to perform the user query call. Default is the current site URL. |
73+
| showHiddenInUI | boolean | no | Show users which are hidden from the UI. By default these users/groups hidden for the UI will not be shown. |
74+
| principleTypes | PrincipleType[] | no | Define which type of data you want to retrieve: User, SharePoint groups, Security groups. Multiple are possible. |
7175

76+
Enum `PrincipalType`
77+
78+
The `PrincipalType` enum can be used to specify the types of information you want to query: User, Security groups, and/or SharePoint groups.
79+
80+
| Name |
81+
| ---- |
82+
| User |
83+
| DistributionList |
84+
| SecurityGroup |
85+
| SharePointGroup |
7286

7387
![](https://telemetry.sharepointpnp.com/sp-dev-fx-controls-react/wiki/controls/PeoplePicker)

‎src/controls/peoplepicker/IPeoplePicker.ts

Lines changed: 9 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,7 @@
11
import { WebPartContext } from '@microsoft/sp-webpart-base';
22
import { DirectionalHint } from "office-ui-fabric-react/lib/common/DirectionalHint";
33
import { IPersonaProps } from "office-ui-fabric-react/lib/components/Persona/Persona.types";
4+
import { PrincipalType } from ".";
45

56
/**
67
* Used to display a placeholder in case of no or temporary content. Button is optional.
@@ -71,6 +72,14 @@ export interface IPeoplePickerProps {
7172
* Default Selected User Emails
7273
*/
7374
defaultSelectedUsers? : string[];
75+
/**
76+
* Show users which are hidden from the UI
77+
*/
78+
showHiddenInUI?: boolean;
79+
/**
80+
* Specify the user / group types to retrieve
81+
*/
82+
principleTypes?: PrincipalType[];
7483
}
7584

7685
export interface IPeoplePickerState {

‎src/controls/peoplepicker/PeoplePickerComponent.tsx

Lines changed: 15 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -159,15 +159,21 @@ export class PeoplePicker extends React.Component<IPeoplePickerProps, IPeoplePic
159159

160160
// Loop over all the retrieved items
161161
for (let i = 0; i < items.value.length; i++) {
162-
userValuesArray.push({
163-
id: items.value[i].Id.toString(),
164-
imageUrl: this.generateUserPhotoLink(items.value[i].Email),
165-
imageInitials: "",
166-
text: items.value[i].Title, // name
167-
secondaryText: items.value[i].Email, // email
168-
tertiaryText: "", // status
169-
optionalText: "" // anything
170-
});
162+
const item = items.value[i];
163+
if (!item.IsHiddenInUI || (this.props.showHiddenInUI && item.IsHiddenInUI)) {
164+
// Check if the the type must be returned
165+
if (!this.props.principleTypes || this.props.principleTypes.indexOf(item.PrincipalType) !== -1) {
166+
userValuesArray.push({
167+
id: item.Id.toString(),
168+
imageUrl: this.generateUserPhotoLink(item.Email),
169+
imageInitials: "",
170+
text: item.Title, // name
171+
secondaryText: item.Email, // email
172+
tertiaryText: "", // status
173+
optionalText: "" // anything
174+
});
175+
}
176+
}
171177
}
172178

173179
// Set Default selected persons

‎src/controls/peoplepicker/PrincipalType.ts

Lines changed: 6 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,6 @@
1+
export enum PrincipalType {
2+
User = 1,
3+
DistributionList = 2,
4+
SecurityGroup = 4,
5+
SharePointGroup = 8
6+
}

‎src/controls/peoplepicker/index.ts

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,2 +1,3 @@
11
export * from './IPeoplePicker';
2-
export * from './PeoplePickerComponent';
2+
export * from './PeoplePickerComponent';
3+
export * from './PrincipalType';

‎src/webparts/controlsTest/components/ControlsTest.tsx

Lines changed: 4 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -17,7 +17,7 @@ import { IFrameDialog } from '../../../IFrameDialog';
1717
import { Environment, EnvironmentType } from '@microsoft/sp-core-library';
1818
import { SecurityTrimmedControl, PermissionLevel } from '../../../SecurityTrimmedControl';
1919
import { SPPermission } from '@microsoft/sp-page-context';
20-
import { PeoplePicker } from '../../../PeoplePicker';
20+
import { PeoplePicker, PrincipalType } from '../../../PeoplePicker';
2121

2222
/**
2323
* Component that can be used to test out the React controls from this project
@@ -314,7 +314,9 @@ export default class ControlsTest extends React.Component<IControlsTestProps, IC
314314
showtooltip={true}
315315
isRequired={true}
316316
defaultSelectedUsers={["[email protected]", "[email protected]"]}
317-
selectedItems={this._getPeoplePickerItems} />
317+
selectedItems={this._getPeoplePickerItems}
318+
showHiddenInUI={false}
319+
principleTypes={[PrincipalType.User]} />
318320

319321
<PeoplePicker
320322
context={this.props.context}

0 commit comments

Comments
 (0)