diff --git a/CHANGELOG.JSON b/CHANGELOG.JSON index 16d6df3db..778432904 100644 --- a/CHANGELOG.JSON +++ b/CHANGELOG.JSON @@ -6,6 +6,8 @@ "new": [], "enhancements": [ "`PeoplePicker`: ability to specify the source site to load users from [#110](https://github.com/SharePoint/sp-dev-fx-controls-react/issues/110)", + "`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)", + "`PeoplePicker`: Specify principle type to retrieve (users, groups, ...) [#122](https://github.com/SharePoint/sp-dev-fx-controls-react/issues/122)", "`WebPartTitle`: changing font-sizes on different resolutions [#114](https://github.com/SharePoint/sp-dev-fx-controls-react/issues/114)", "`WebPartTitle`: Added accessibility tags for web part title [#121](https://github.com/SharePoint/sp-dev-fx-controls-react/pull/121)", "`ListView`: Resizable columns - introduced a `isResizable` property [#119](https://github.com/SharePoint/sp-dev-fx-controls-react/issues/119)", diff --git a/CHANGELOG.md b/CHANGELOG.md index c473e2e16..6e3cbc675 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -5,6 +5,8 @@ **Enhancements** - `PeoplePicker`: ability to specify the source site to load users from [#110](https://github.com/SharePoint/sp-dev-fx-controls-react/issues/110) +- `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) +- `PeoplePicker`: Specify principle type to retrieve (users, groups, ...) [#122](https://github.com/SharePoint/sp-dev-fx-controls-react/issues/122) - `WebPartTitle`: changing font-sizes on different resolutions [#114](https://github.com/SharePoint/sp-dev-fx-controls-react/issues/114) - `WebPartTitle`: Added accessibility tags for web part title [#121](https://github.com/SharePoint/sp-dev-fx-controls-react/pull/121) - `ListView`: Resizable columns - introduced a `isResizable` property [#119](https://github.com/SharePoint/sp-dev-fx-controls-react/issues/119) diff --git a/docs/documentation/docs/about/release-notes.md b/docs/documentation/docs/about/release-notes.md index c473e2e16..6e3cbc675 100644 --- a/docs/documentation/docs/about/release-notes.md +++ b/docs/documentation/docs/about/release-notes.md @@ -5,6 +5,8 @@ **Enhancements** - `PeoplePicker`: ability to specify the source site to load users from [#110](https://github.com/SharePoint/sp-dev-fx-controls-react/issues/110) +- `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) +- `PeoplePicker`: Specify principle type to retrieve (users, groups, ...) [#122](https://github.com/SharePoint/sp-dev-fx-controls-react/issues/122) - `WebPartTitle`: changing font-sizes on different resolutions [#114](https://github.com/SharePoint/sp-dev-fx-controls-react/issues/114) - `WebPartTitle`: Added accessibility tags for web part title [#121](https://github.com/SharePoint/sp-dev-fx-controls-react/pull/121) - `ListView`: Resizable columns - introduced a `isResizable` property [#119](https://github.com/SharePoint/sp-dev-fx-controls-react/issues/119) diff --git a/docs/documentation/docs/controls/PeoplePicker.md b/docs/documentation/docs/controls/PeoplePicker.md index 7b7b90945..99db205c2 100644 --- a/docs/documentation/docs/controls/PeoplePicker.md +++ b/docs/documentation/docs/controls/PeoplePicker.md @@ -21,7 +21,7 @@ This control renders a People picker field which can be used to select one or mo - Import the following modules to your component: ```typescript -import { PeoplePicker } from "@pnp/spfx-controls-react/lib/PeoplePicker"; +import { PeoplePicker, PrincipalType } from "@pnp/spfx-controls-react/lib/PeoplePicker"; ``` - Use the `PeoplePicker` control in your code as follows: @@ -35,7 +35,9 @@ import { PeoplePicker } from "@pnp/spfx-controls-react/lib/PeoplePicker"; showtooltip={true} isRequired={true} disabled={true} - selectedItems={this._getPeoplePickerItems} /> + selectedItems={this._getPeoplePickerItems} + showHiddenInUI={false} + principleTypes={[PrincipalType.User]} /> ``` - 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: | peoplePickerCntrlclassName | string | no | applies custom styling to the people picker control only | | defaultSelectedUsers | string[] | no | Default selected user emails | | webAbsoluteUrl | string | no | Specify the site URL on which you want to perform the user query call. Default is the current site URL. | +| showHiddenInUI | boolean | no | Show users which are hidden from the UI. By default these users/groups hidden for the UI will not be shown. | +| principleTypes | PrincipleType[] | no | Define which type of data you want to retrieve: User, SharePoint groups, Security groups. Multiple are possible. | +Enum `PrincipalType` + +The `PrincipalType` enum can be used to specify the types of information you want to query: User, Security groups, and/or SharePoint groups. + +| Name | +| ---- | +| User | +| DistributionList | +| SecurityGroup | +| SharePointGroup | ![](https://telemetry.sharepointpnp.com/sp-dev-fx-controls-react/wiki/controls/PeoplePicker) diff --git a/src/controls/peoplepicker/IPeoplePicker.ts b/src/controls/peoplepicker/IPeoplePicker.ts index 32c1e4a9d..63351d76f 100644 --- a/src/controls/peoplepicker/IPeoplePicker.ts +++ b/src/controls/peoplepicker/IPeoplePicker.ts @@ -1,6 +1,7 @@ import { WebPartContext } from '@microsoft/sp-webpart-base'; import { DirectionalHint } from "office-ui-fabric-react/lib/common/DirectionalHint"; import { IPersonaProps } from "office-ui-fabric-react/lib/components/Persona/Persona.types"; +import { PrincipalType } from "."; /** * Used to display a placeholder in case of no or temporary content. Button is optional. @@ -71,6 +72,14 @@ export interface IPeoplePickerProps { * Default Selected User Emails */ defaultSelectedUsers? : string[]; + /** + * Show users which are hidden from the UI + */ + showHiddenInUI?: boolean; + /** + * Specify the user / group types to retrieve + */ + principleTypes?: PrincipalType[]; } export interface IPeoplePickerState { diff --git a/src/controls/peoplepicker/PeoplePickerComponent.tsx b/src/controls/peoplepicker/PeoplePickerComponent.tsx index ac6af9106..6c2c67700 100644 --- a/src/controls/peoplepicker/PeoplePickerComponent.tsx +++ b/src/controls/peoplepicker/PeoplePickerComponent.tsx @@ -159,15 +159,21 @@ export class PeoplePicker extends React.Component + selectedItems={this._getPeoplePickerItems} + showHiddenInUI={false} + principleTypes={[PrincipalType.User]} />