Enhancements for pnp#94 and pnp#122

AJIXuMuK · Sep 7, 2018 · 48d3c49 · 48d3c49
1 parent b3c66fa
commit 48d3c49
Show file tree

Hide file tree

Showing 9 changed files with 58 additions and 14 deletions.
diff --git 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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -159,15 +159,21 @@ export class PeoplePicker extends React.Component<IPeoplePickerProps, IPeoplePic
 
         // Loop over all the retrieved items
         for (let i = 0; i < items.value.length; i++) {
-          userValuesArray.push({
-            id: items.value[i].Id.toString(),
-            imageUrl: this.generateUserPhotoLink(items.value[i].Email),
-            imageInitials: "",
-            text: items.value[i].Title, // name
-            secondaryText: items.value[i].Email, // email
-            tertiaryText: "", // status
-            optionalText: "" // anything
-          });
+          const item = items.value[i];
+          if (!item.IsHiddenInUI || (this.props.showHiddenInUI && item.IsHiddenInUI))  {
+            // Check if the the type must be returned
+            if (!this.props.principleTypes || this.props.principleTypes.indexOf(item.PrincipalType) !== -1) {
+              userValuesArray.push({
+                id: item.Id.toString(),
+                imageUrl: this.generateUserPhotoLink(item.Email),
+                imageInitials: "",
+                text: item.Title, // name
+                secondaryText: item.Email, // email
+                tertiaryText: "", // status
+                optionalText: "" // anything
+              });
+            }
+          }
         }
 
         // Set Default selected persons

diff --git a/src/controls/peoplepicker/PrincipalType.ts b/src/controls/peoplepicker/PrincipalType.ts
@@ -0,0 +1,6 @@
+export enum PrincipalType {
+  User = 1,
+  DistributionList = 2,
+  SecurityGroup = 4,
+  SharePointGroup = 8
+}
diff --git a/src/controls/peoplepicker/index.ts b/src/controls/peoplepicker/index.ts
@@ -1,2 +1,3 @@
 export * from './IPeoplePicker';
-export * from './PeoplePickerComponent';
+export * from './PeoplePickerComponent';
+export * from './PrincipalType';
diff --git a/src/webparts/controlsTest/components/ControlsTest.tsx b/src/webparts/controlsTest/components/ControlsTest.tsx
@@ -17,7 +17,7 @@ import { IFrameDialog } from '../../../IFrameDialog';
 import { Environment, EnvironmentType } from '@microsoft/sp-core-library';
 import { SecurityTrimmedControl, PermissionLevel } from '../../../SecurityTrimmedControl';
 import { SPPermission } from '@microsoft/sp-page-context';
-import { PeoplePicker } from '../../../PeoplePicker';
+import { PeoplePicker, PrincipalType } from '../../../PeoplePicker';
 
 /**
  * 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
             showtooltip={true}
             isRequired={true}
             defaultSelectedUsers={["tenantUser@domain.onmicrosoft.com", "test@user.com"]}
-            selectedItems={this._getPeoplePickerItems} />
+            selectedItems={this._getPeoplePickerItems}
+            showHiddenInUI={false}
+            principleTypes={[PrincipalType.User]} />
 
           <PeoplePicker
             context={this.props.context}