Skip to content

Commit 16b13aa

Browse files
estruyfestruyf
committed
Merge branch 'AsishP-ap-peoplepicker' into dev
2 parents 522b7c3 + c5f9603 commit 16b13aa

16 files changed

+525
-2
lines changed

‎CHANGELOG.JSON

Lines changed: 3 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -3,7 +3,9 @@
33
{
44
"version": "1.5.0",
55
"changes": {
6-
"new": [],
6+
"new": [
7+
"New `PeoplePicker` control added [#19](https://github.com/SharePoint/sp-dev-fx-controls-react/issues/19)"
8+
],
79
"enhancements": [
810
"Added a properties to the `TaxonomyPicker` to specify which terms are disabled/not-selectable [#82](https://github.com/SharePoint/sp-dev-fx-controls-react/issues/82)"
911
],

‎CHANGELOG.md

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -2,6 +2,10 @@
22

33
## 1.5.0
44

5+
**New control(s)**
6+
7+
- New `PeoplePicker` control added [#19](https://github.com/SharePoint/sp-dev-fx-controls-react/issues/19)
8+
59
**Enhancements**
610

711
- Added a properties to the `TaxonomyPicker` to specify which terms are disabled/not-selectable [#82](https://github.com/SharePoint/sp-dev-fx-controls-react/issues/82)

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

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -2,6 +2,10 @@
22

33
## 1.5.0
44

5+
**New control(s)**
6+
7+
- New `PeoplePicker` control added [#19](https://github.com/SharePoint/sp-dev-fx-controls-react/issues/19)
8+
59
**Enhancements**
610

711
- Added a properties to the `TaxonomyPicker` to specify which terms are disabled/not-selectable [#82](https://github.com/SharePoint/sp-dev-fx-controls-react/issues/82)

‎docs/documentation/docs/assets/Peoplepicker-multiplechoices.png

4.02 KB
Loading

‎docs/documentation/docs/assets/Peoplepicker-selectingchoices.png

20.5 KB
Loading

‎docs/documentation/docs/assets/Peoplepicker-witherrorandtooltip.png

7.64 KB
Loading

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

Lines changed: 69 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,69 @@
1+
# People Picker
2+
3+
This control renders a People picker field which can be used to select one or more users from a SharePoint group or site. The control can be configured as mandatory. It will show a custom error message if field is empty.
4+
5+
**Empty People Picker control with error message and tooltip**
6+
7+
![People Picker](../assets/Peoplepicker-witherrorandtooltip.png)
8+
9+
**Selecting People**
10+
11+
![Selecting People](../assets/Peoplepicker-selectingchoices.png)
12+
13+
**Selected people**
14+
15+
![Selected people](../assets/Peoplepicker-multiplechoices.png)
16+
17+
18+
## How to use this control in your solutions
19+
20+
- Check that you installed the `@pnp/spfx-controls-react` dependency. Check out the [getting started](../#getting-started) page for more information about installing the dependency.
21+
- Import the following modules to your component:
22+
23+
```typescript
24+
import { PeoplePicker } from "@pnp/spfx-controls-react/lib/PeoplePicker";
25+
```
26+
27+
- Use the `PeoplePicker` control in your code as follows:
28+
29+
```typescript
30+
<PeoplePicker
31+
context={this.props.context}
32+
titleText="People Picker"
33+
personSelectionLimit={3}
34+
groupName={"Team Site Owners"} // Leave this blank in case you want to filter from all users
35+
showtooltip={true}
36+
isRequired={true}
37+
selectedItems={this._getPeoplePickerItems} />
38+
```
39+
40+
- With the `selectedItems` property you can get the selected People in the Peoplepicker :
41+
42+
```typescript
43+
private _getPeoplePickerItems(items: any[]) {
44+
console.log('Items:', items);
45+
}
46+
```
47+
48+
## Implementation
49+
50+
The People picker control can be configured with the following properties:
51+
52+
| Property | Type | Required | Description |
53+
| ---- | ---- | ---- | ---- |
54+
| context | WebPartContext | yes | Context of the current web part. |
55+
| titleText | string | yes | Text to be displayed on the control |
56+
| groupName | string | no | group from which users are fetched. Leave it blank if need to filter all users |
57+
| personSelectionLimit | number | no | Defines the limit of people that can be selected in the control|
58+
| isRequired | boolean | no | Set if the control is required or not |
59+
| errorMessage | string | no | Specify the error message to display |
60+
| errorMessageclassName | string | no | applies custom styling to the error message section|
61+
| showtooltip | boolean | no | Defines if need a tooltip or not |
62+
| tooltip | string | no | Specify the tooltip message to display |
63+
| tooltipDirectional | DirectionalHint | no | Direction where the tooltip would be shown |
64+
| selectedItems | function | no | get the selected users in the control|
65+
| peoplePickerWPclassName | string | no | applies custom styling to the people picker element|
66+
| peoplePickerCntrlclassName | string | no | applies custom styling to the people picker control only|
67+
68+
69+
![](https://telemetry.sharepointpnp.com/sp-dev-fx-controls-react/wiki/controls/PeoplePicker)

‎src/PeoplePicker.ts

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1 @@
1+
export * from './controls/peoplepicker/index';

‎src/controls/peoplepicker/IPeoplePicker.ts

Lines changed: 84 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,84 @@
1+
import { IPersonaProps, DirectionalHint } from "office-ui-fabric-react";
2+
import { WebPartContext } from '@microsoft/sp-webpart-base';
3+
4+
/**
5+
* Used to display a placeholder in case of no or temporary content. Button is optional.
6+
*
7+
*/
8+
export interface IPeoplePickerProps {
9+
/**
10+
* Context of the component
11+
*/
12+
context: WebPartContext;
13+
/**
14+
* Text of the Control
15+
*/
16+
titleText: string;
17+
/**
18+
* Name of SharePoint Group
19+
*/
20+
groupName?: string;
21+
/**
22+
* Selection Limit of Control
23+
*/
24+
personSelectionLimit?: number;
25+
/**
26+
* Show or Hide Tooltip
27+
*/
28+
showtooltip? : boolean;
29+
/**
30+
* People Field is mandatory
31+
*/
32+
isRequired? : boolean;
33+
/**
34+
* Mandatory field error message
35+
*/
36+
errorMessage? : string;
37+
/**
38+
* Method to check value of People Picker text
39+
*/
40+
selectedItems?: (items: any[]) => void;
41+
/**
42+
* Tooltip Message
43+
*/
44+
tooltipMessage? : string;
45+
/**
46+
* Directional Hint of tool tip
47+
*/
48+
tooltipDirectional? : DirectionalHint;
49+
/**
50+
* Class Name for the whole People picker control
51+
*/
52+
peoplePickerWPclassName?:string;
53+
/**
54+
* Class Name for the People picker control
55+
*/
56+
peoplePickerCntrlclassName?: string;
57+
/**
58+
* Class Name for the Error Section
59+
*/
60+
errorMessageclassName?: string;
61+
}
62+
63+
export interface IPeoplePickerState {
64+
selectedPersons?: IPersonaProps[];
65+
mostRecentlyUsedPersons: IPersonaProps[];
66+
currentSelectedPersons: IPersonaProps[];
67+
allPersons: [{
68+
id: string,
69+
imageUrl: string,
70+
imageInitials: string,
71+
primaryText: string, //Name
72+
secondaryText: string, //Role
73+
tertiaryText: string, //status
74+
optionalText: string //stgring
75+
}];
76+
delayResults?: boolean;
77+
currentPicker?: number | string;
78+
peoplePersonaMenu?: IPersonaProps[];
79+
peoplePartTitle: string;
80+
peoplePartTooltip : string;
81+
isLoading : boolean;
82+
peopleValidatorText? : string;
83+
showmessageerror: boolean;
84+
}

‎src/controls/peoplepicker/IUsers.ts

Lines changed: 25 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,25 @@
1+
export interface IUsers {
2+
'@odata.context': string;
3+
value: Value[];
4+
}
5+
6+
export interface Value {
7+
'@odata.type': string;
8+
'@odata.id': string;
9+
'@odata.editLink': string;
10+
Id: number;
11+
IsHiddenInUI: boolean;
12+
LoginName: string;
13+
Title: string;
14+
PrincipalType: number;
15+
Email: string;
16+
IsEmailAuthenticationGuestUser: boolean;
17+
IsShareByEmailGuestUser: boolean;
18+
IsSiteAdmin: boolean;
19+
UserId?: UserId;
20+
}
21+
22+
export interface UserId {
23+
NameId: string;
24+
NameIdIssuer: string;
25+
}

0 commit comments

Comments
 (0)