People Picker control ready for testing

Author: AsishP

src/controls/peoplepicker/SPPeoplePickerComponent.tsx renamed to src/controls/peoplepicker/PeoplePickerComponent.tsx

@@ -25,7 +25,7 @@ const suggestionProps: IBasePickerSuggestionsProps = {
 /**
 * PeoplePicker component
 */
-export class SPPeoplePicker extends React.Component<IPeoplePickerProps, IPeoplePickerState> {
+export class PeoplePicker extends React.Component<IPeoplePickerProps, IPeoplePickerState> {
 
   public static defaultProps: IPeoplePickerProps = {
   context : null,
@@ -108,7 +108,7 @@ constructor(props: IPeoplePickerProps) {
           imageUrl: "",
           imageInitials: "",
           primaryText: "", //Name
-          secondaryText: "", //Role
+          secondaryText: "", //Email
           tertiaryText: "", //status
           optionalText: "" //anything
         }];
@@ -119,11 +119,10 @@ constructor(props: IPeoplePickerProps) {
           {
              userValuesArray = [{
                 id: items.value[i].Id,
-                //imageUrl: `/_layouts/15/userphoto.aspx?size=S&accountname=${items.value[i].Email}`,
-                imageUrl: this.generateUserPhotoLink(items.value[i].Email), // `https://outlook.office365.com/owa/service.svc/s/GetPersonaPhoto?email=${items.value[i].Email}&UA=0&size=HR96x96`,
+                imageUrl: this.generateUserPhotoLink(items.value[i].Email), 
                 imageInitials: "",
                 primaryText: items.value[i].Title, //Name
-                secondaryText: items.value[i].Email, //Role
+                secondaryText: items.value[i].Email, //Email
                 tertiaryText: "", //status
                 optionalText: "" //anything
              }]
@@ -132,10 +131,10 @@ constructor(props: IPeoplePickerProps) {
           {
             userValuesArray.push({
               id: items.value[i].Id,
-              imageUrl: this.generateUserPhotoLink(items.value[i].Email), //`https://outlook.office365.com/owa/service.svc/s/GetPersonaPhoto?email=${items.value[i].Email}&UA=0&size=HR96x96`,
+              imageUrl: this.generateUserPhotoLink(items.value[i].Email), 
               imageInitials: "",
               primaryText: items.value[i].Title, //Name
-              secondaryText: items.value[i].Email, //Role
+              secondaryText: items.value[i].Email, //Email
               tertiaryText: "", //status
               optionalText: "" //anything
            });

src/controls/peoplepicker/index.ts

@@ -1,2 +1,2 @@
 export * from './IPeoplePicker';
-export * from './SPPeoplePickerComponent';
+export * from './PeoplePickerComponent';

src/webparts/controlsTest/components/ControlsTest.tsx

@@ -17,6 +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';
 
 /**
  * Component that can be used to test out the React controls from this project
@@ -39,8 +40,7 @@ export default class ControlsTest extends React.Component<IControlsTestProps, IC
    * React componentDidMount lifecycle hook
    */
   public componentDidMount() {
-    //const restApi = `${this.props.context.pageContext.web.absoluteUrl}/_api/web/GetFolderByServerRelativeUrl('Shared%20Documents')/files?$expand=ListItemAllFields`;
-    const restApi = `${this.props.context.pageContext.web.absoluteUrl}/_api/web/lists(guid'40e24fbb-120a-4651-9dc2-34700a58297b')/items`;
+    const restApi = `${this.props.context.pageContext.web.absoluteUrl}/_api/web/GetFolderByServerRelativeUrl('Shared%20Documents')/files?$expand=ListItemAllFields`;
     this.props.context.spHttpClient.get(restApi, SPHttpClient.configurations.v1)
       .then(resp => { return resp.json(); })
       .then(items => {
@@ -133,53 +133,22 @@ export default class ControlsTest extends React.Component<IControlsTestProps, IC
       }
     ];
 
-    // // Specify the fields that need to be viewed in the listview
-    // const viewFields: IViewField[] = [
-    //   {
-    //     name: 'ListItemAllFields.Id',
-    //     displayName: 'ID',
-    //     maxWidth: 40,
-    //     sorting: true
-    //   },
-    //   {
-    //     name: 'ListItemAllFields.Underscore_Field',
-    //     displayName: "Underscore_Field",
-    //     sorting: true
-    //   },
-    //   {
-    //     name: 'Name',
-    //     linkPropertyName: 'ServerRelativeUrl',
-    //     sorting: true
-    //   },
-    //   {
-    //     name: 'ServerRelativeUrl',
-    //     displayName: 'Path',
-    //     render: (item: any) => {
-    //       return <a href={item['ServerRelativeUrl']}>Link</a>;
-    //     }
-    //   },
-    //   {
-    //     name: 'Title'
-    //   }
-    // ];
-
     // Specify the fields that need to be viewed in the listview
     const viewFields: IViewField[] = [
       {
-        name: 'Id',
+        name: 'ListItemAllFields.Id',
         displayName: 'ID',
         maxWidth: 40,
         sorting: true
       },
       {
-        name: 'Students_x0020_Strength',
-        displayName: "Students Strength",
+        name: 'ListItemAllFields.Underscore_Field',
+        displayName: "Underscore_Field",
         sorting: true
       },
       {
-        name: 'Training_x0020_site.Description',
-        linkPropertyName: 'Training_x0020_site.Url',
-        displayName: 'Training Site',
+        name: 'Name',
+        linkPropertyName: 'ServerRelativeUrl',
         sorting: true
       },
       {
@@ -310,9 +279,9 @@ export default class ControlsTest extends React.Component<IControlsTestProps, IC
           selectionMode={SelectionMode.multiple}
           selection={this._getSelection} />
 
-          <p><a href="javascript:;" onClick={this.deleteItem}>Deletes second item</a></p>
+          <p><a href="javascript:;" onClick={this.deleteItem}>Deletes second item</a></p> 
 
-          <SPPeoplePicker
+          <PeoplePicker
           context={this.props.context}
           titleText="People Picker"
           getAllUsers={false}