Update React-Directory new features and fix issue #931 (#937)

* Add OrderBy and new propertie

* update docs

* Update README.md

* Fix misspelling

samples/react-birthdays/src/webparts/Birthdays/BirthdaysWebPart.ts

@@ -12,7 +12,7 @@ import {
 
 
 import * as strings from 'BirthdaysWebPartStrings';
-import Birdthays from './components/Birthdays';
+import Birthdays from './components/Birthdays';
 import { IBirthdaysProps } from './components/IBirthdaysProps';
 import { MSGraphClient } from '@microsoft/sp-http';
 
@@ -100,7 +100,7 @@ export default class BirthdaysWebPart extends BaseClientSideWebPart<IBirthdaysWe
 
   public render(): void {
     const element: React.ReactElement<IBirthdaysProps> = React.createElement(
-      Birdthays,
+      Birthdays,
       {
         title: this.properties.title,
         numberUpcomingDays: this.properties.numberUpcomingDays,

samples/react-directory/README.md

@@ -6,6 +6,12 @@
 
 
 ##  
+![directory](/samples/react-directory/assets/react-directory7.png) 
+
+![directory](/samples/react-directory/assets/react-directory8.png) 
+
+![directory](/samples/react-directory/assets/react-directory9.png) 
+
 ![directory](/samples/react-directory/assets/react-directory.jpg) 
 
 ![directory](/samples/react-directory/assets/react-directory-teams1.jpg) 

samples/react-directory/src/SPServices/spservices.ts

@@ -53,19 +53,18 @@ user:string   */
     }
   }
 
-  public async searchUsers(searchString: string) {
+  public async searchUsers(searchString: string, searchFirstName:boolean) {
-    const s = `LastName:${searchString}* OR FirstName:${searchString}* OR Department:${searchString}`;
+    const _search =  !searchFirstName ? `LastName:${searchString}*` :  `FirstName:${searchString}*` ;
-    const searchProperties: string[] = ["FirstName", "LastName", "PreferredName", "WorkEmail", "PictureURL", "WorkPhone", "MobilePhone", "JobTitle", "Department", "Skills", "PastProjects"];
+    const searchProperties: string[] = ["FirstName", "LastName", "PreferredName", "WorkEmail", "OfficeNumber","PictureURL", "WorkPhone", "MobilePhone", "JobTitle", "Department", "Skills", "PastProjects", "BaseOfficeLocation", "SPS-UserType","GroupId"];
     try {
       if (!searchString) return undefined;
       let users = await sp.searchWithCaching(<SearchQuery>{
-        Querytext: s,
+        Querytext: _search,
-        RowLimit: 500,
+        RowLimit:500,
         EnableInterleaving: true,
         SelectProperties: searchProperties,
         SourceId: 'b09a7990-05ea-4af9-81ef-edfab16c4e31',
-        SortList: [{ "Property": "LastName", "Direction": SortDirection.Ascending }]
+        SortList: [{ "Property": "LastName", "Direction": SortDirection.Ascending }],
-
       });
 
       return users;

samples/react-directory/src/webparts/directory/DirectoryWebPart.manifest.json

@@ -21,7 +21,8 @@
     "description": { "default": "Search Directory" },
     "officeFabricIconFontName": "ProfileSearch",
     "properties": {
-      "title": "Directory"
+      "title": "Directory",
+      "searchFirstName":  0
     }
   }]
 }

samples/react-directory/src/webparts/directory/DirectoryWebPart.ts

@@ -1,30 +1,34 @@
-import * as React from 'react';
+import * as React from "react";
-import * as ReactDom from 'react-dom';
+import * as ReactDom from "react-dom";
-import { Version } from '@microsoft/sp-core-library';
+import { Version } from "@microsoft/sp-core-library";
-import { BaseClientSideWebPart } from '@microsoft/sp-webpart-base';
+import { BaseClientSideWebPart } from "@microsoft/sp-webpart-base";
-import { DisplayMode } from '@microsoft/sp-core-library';
+import { DisplayMode } from "@microsoft/sp-core-library";
 import {
   IPropertyPaneConfiguration,
-  PropertyPaneTextField
+  PropertyPaneTextField,
-} from '@microsoft/sp-property-pane';
+  PropertyPaneToggle,
-
+  IPropertyPaneToggleProps
-import * as strings from 'DirectoryWebPartStrings';
+} from "@microsoft/sp-property-pane";
-import Directory from './components/Directory';
-import { IDirectoryProps } from './components/IDirectoryProps';
 
+import * as strings from "DirectoryWebPartStrings";
+import Directory from "./components/Directory";
+import { IDirectoryProps } from "./components/IDirectoryProps";
 
 export interface IDirectoryWebPartProps {
   title: string;
+  searchFirstName: boolean;
 }
 
-export default class DirectoryWebPart extends BaseClientSideWebPart<IDirectoryWebPartProps> {
+export default class DirectoryWebPart extends BaseClientSideWebPart<
-
+  IDirectoryWebPartProps
+> {
   public render(): void {
     const element: React.ReactElement<IDirectoryProps> = React.createElement(
       Directory,
       {
         title: this.properties.title,
         context: this.context,
+        searchFirstName: this.properties.searchFirstName,
         displayMode: this.displayMode,
         updateProperty: (value: string) => {
           this.properties.title = value;
@@ -40,7 +44,7 @@ export default class DirectoryWebPart extends BaseClientSideWebPart<IDirectoryWe
   }
 
   protected get dataVersion(): Version {
-    return Version.parse('1.0');
+    return Version.parse("1.0");
   }
 
   protected getPropertyPaneConfiguration(): IPropertyPaneConfiguration {
@@ -54,8 +58,12 @@ export default class DirectoryWebPart extends BaseClientSideWebPart<IDirectoryWe
             {
               groupName: strings.BasicGroupName,
               groupFields: [
-                PropertyPaneTextField('title', {
+                PropertyPaneTextField("title", {
                   label: strings.TitleFieldLabel
+                }),
+                PropertyPaneToggle("searchFirstName", {
+                  checked: false,
+                  label: "Search on First Name ?"
                 })
               ]
             }

samples/react-directory/src/webparts/directory/components/Directory.module.scss

@@ -1,12 +1,22 @@
-@import '~@microsoft/sp-office-ui-fabric-core/dist/sass/SPFabricCore.scss';
+@import "~@microsoft/sp-office-ui-fabric-core/dist/sass/SPFabricCore.scss";
-
-
-
 
 .directory {
+  .dropDownSortBy {
+    margin-top: 35px;
+    margin-bottom: 15px;
+  }
 
-
+  .searchBox {
-
+    width: "100%";
+    vertical-align: "middle";
+    margin-bottom: 25;
+  }
+  .noUsers {
+    margin-left: "auto";
+    margin-right: "auto";
+    text-align: "center";
+    padding-top: 40px;
+  }
 
   .pivotItem {
     overflow-wrap: break-word;
@@ -17,7 +27,6 @@
     border-color: $ms-color-themeDark;
   }
 
-
   .container {
     max-width: 700px;
     margin: 0px auto;
@@ -68,7 +77,8 @@
     // Basic Button
     outline: transparent;
     position: relative;
-    font-family: "Segoe UI WestEuropean","Segoe UI",-apple-system,BlinkMacSystemFont,Roboto,"Helvetica Neue",sans-serif;
+    font-family: "Segoe UI WestEuropean", "Segoe UI", -apple-system,
+      BlinkMacSystemFont, Roboto, "Helvetica Neue", sans-serif;
     -webkit-font-smoothing: antialiased;
     font-size: $ms-font-size-m;
     font-weight: $ms-font-weight-regular;

samples/react-directory/src/webparts/directory/components/Directory.tsx

@@ -1,12 +1,12 @@
-import * as React from 'react';
+import * as React from "react";
-import styles from './Directory.module.scss';
+import styles from "./Directory.module.scss";
-import { IDirectoryProps } from './IDirectoryProps';
+import { IDirectoryProps } from "./IDirectoryProps";
-import { escape } from '@microsoft/sp-lodash-subset';
+import { escape } from "@microsoft/sp-lodash-subset";
-import { PersonaCard } from './PersonaCard/PersonaCard';
+import { PersonaCard } from "./PersonaCard/PersonaCard";
-import { spservices } from '../../../SPServices/spservices';
+import { spservices } from "../../../SPServices/spservices";
-import { IDirectoryState } from './IDirectoryState';
+import { IDirectoryState } from "./IDirectoryState";
-import { DisplayMode } from '@microsoft/sp-core-library';
+import { DisplayMode } from "@microsoft/sp-core-library";
-import * as strings from 'DirectoryWebPartStrings';
+import * as strings from "DirectoryWebPartStrings";
 import {
   Spinner,
   SpinnerSize,
@@ -18,19 +18,57 @@ import {
   Pivot,
   PivotItem,
   PivotLinkFormat,
-  PivotLinkSize
+  PivotLinkSize,
-}
+  Dropdown,
-  from 'office-ui-fabric-react';
+  DropdownMenuItemType,
-import { IProfileProperties } from '../../../SPServices/IProfileProperties';
+  IDropdownStyles,
-import { PeoplePickerEntity, Search, SearchResult } from '@pnp/sp';
+  IDropdownOption
+} from "office-ui-fabric-react";
+import { IProfileProperties } from "../../../SPServices/IProfileProperties";
+import { PeoplePickerEntity, Search, SearchResult } from "@pnp/sp";
 import { WebPartTitle } from "@pnp/spfx-controls-react/lib/WebPartTitle";
-import { Root } from '@pnp/graph';
+import { Root } from "@pnp/graph";
-import { IUserProperties } from './PersonaCard/IUserProperties';
+import { IUserProperties } from "./PersonaCard/IUserProperties";
-
-const az: string[] = ["A", "B", "C", "D", "E", "F", "G", "H", "I", "J", "K", "L", "M", "N", "O", "P", "Q", "R", "S", "T", "U", "V", "W", "X", "Y", "Z"];
-
-export default class Directory extends React.Component<IDirectoryProps, IDirectoryState> {
 
+const az: string[] = [
+  "A",
+  "B",
+  "C",
+  "D",
+  "E",
+  "F",
+  "G",
+  "H",
+  "I",
+  "J",
+  "K",
+  "L",
+  "M",
+  "N",
+  "O",
+  "P",
+  "Q",
+  "R",
+  "S",
+  "T",
+  "U",
+  "V",
+  "W",
+  "X",
+  "Y",
+  "Z"
+];
+const orderOptions: IDropdownOption[] = [
+  { key: "FirstName", text: "First Name" },
+  { key: "LastName", text: "Last Name" },
+  { key: "Department", text: "Department" },
+  { key: "Location", text: "Location" },
+  { key: "JobTitle", text: "Job Title" }
+];
+export default class Directory extends React.Component<
+  IDirectoryProps,
+  IDirectoryState
+> {
   private _services: spservices = null;
 
   constructor(props: IDirectoryProps) {
@@ -39,39 +77,53 @@ export default class Directory extends React.Component<IDirectoryProps, IDirecto
     this.state = {
       users: [],
       isLoading: true,
-      errorMessage: '',
+      errorMessage: "",
       hasError: false,
-      indexSelectedKey: 'A',
+      indexSelectedKey: "A",
-      searchString: ''
+      searchString: "LastName"
     };
 
     this._services = new spservices(this.props.context);
     // Register event handlers
     this._searchUsers = this._searchUsers.bind(this);
     this._selectedIndex = this._selectedIndex.bind(this);
+    this._sortPeople = this._sortPeople.bind(this);
   }
 
-
   /**
    *
    *
    * @memberof Directory
    */
   public async componentDidMount() {
-    await this._searchUsers('A');
+    await this._searchUsers("A");
   }
 
   private async _searchUsers(searchText: string) {
-    searchText = searchText ? searchText : 'A';
+    searchText = searchText.trim().length > 0 ? searchText : "A";
-    this.setState({ isLoading: true, indexSelectedKey: searchText.substring(0, 1).toLocaleUpperCase() });
+    this.setState({
+      isLoading: true,
+      indexSelectedKey: searchText.substring(0, 1).toLocaleUpperCase(),
+      searchString: "LastName"
+    });
 
     try {
-      const users = await this._services.searchUsers(searchText);
+      const users = await this._services.searchUsers(
-      this.setState({ users: users && users.PrimarySearchResults ? users.PrimarySearchResults : null, isLoading: false, errorMessage: '', hasError: false });
+        searchText,
+        this.props.searchFirstName
+      );
+      this.setState({
+        users:
+          users && users.PrimarySearchResults
+            ? users.PrimarySearchResults
+            : null,
+        isLoading: false,
+        errorMessage: "",
+        hasError: false
+      });
     } catch (error) {
       this.setState({ errorMessage: error.message, hasError: true });
     }
-
   }
 
   /**
@@ -81,11 +133,105 @@ export default class Directory extends React.Component<IDirectoryProps, IDirecto
    * @param {IDirectoryState} prevState
    * @memberof Directory
    */
-  public componentDidUpdate(prevProps: IDirectoryProps, prevState: IDirectoryState): void {
+  public async componentDidUpdate(
-
+    prevProps: IDirectoryProps,
+    prevState: IDirectoryState
+  ) {
+    if (
+      this.props.title != prevProps.title ||
+      this.props.searchFirstName != prevProps.searchFirstName
+    ) {
+      await this._searchUsers("A");
+    }
   }
 
-
+  /**
+   *
+   *
+   * @private
+   * @param {string} sortField
+   * @memberof Directory
+   */
+  private async _sortPeople(sortField: string) {
+    let _users = this.state.users;
+    _users = _users.sort((a: any, b: any) => {
+      switch (sortField) {
+        // Sorte by FirstName
+        case "FirstName":
+          const aFirstName = a.FirstName ? a.FirstName : "";
+          const bFirstName = b.FirstName ? b.FirstName : "";
+          if (aFirstName.toUpperCase() < bFirstName.toUpperCase()) {
+            return -1;
+          }
+          if (aFirstName.toUpperCase() > bFirstName.toUpperCase()) {
+            return 1;
+          }
+          return 0;
+          break;
+        // Sort by LastName
+        case "LastName":
+          const aLastName = a.LastName ? a.LastName : "";
+          const bLastName = b.LastName ? b.LastName : "";
+          if (aLastName.toUpperCase() < bLastName.toUpperCase()) {
+            return -1;
+          }
+          if (aLastName.toUpperCase() > bLastName.toUpperCase()) {
+            return 1;
+          }
+          return 0;
+          break;
+        // Sort by Location
+        case "Location":
+          const aBaseOfficeLocation = a.BaseOfficeLocation
+            ? a.BaseOfficeLocation
+            : "";
+          const bBaseOfficeLocation = b.BaseOfficeLocation
+            ? b.BaseOfficeLocation
+            : "";
+          if (
+            aBaseOfficeLocation.toUpperCase() <
+            bBaseOfficeLocation.toUpperCase()
+          ) {
+            return -1;
+          }
+          if (
+            aBaseOfficeLocation.toUpperCase() >
+            bBaseOfficeLocation.toUpperCase()
+          ) {
+            return 1;
+          }
+          return 0;
+          break;
+        // Sort by JobTitle
+        case "JobTitle":
+          const aJobTitle = a.JobTitle ? a.JobTitle : "";
+          const bJobTitle = b.JobTitle ? b.JobTitle : "";
+          if (aJobTitle.toUpperCase() < bJobTitle.toUpperCase()) {
+            return -1;
+          }
+          if (aJobTitle.toUpperCase() > bJobTitle.toUpperCase()) {
+            return 1;
+          }
+          return 0;
+          break;
+        // Sort by Department
+        case "Department":
+          const aDepartment = a.Department ? a.Department : "";
+          const bDepartment = b.Department ? b.Department : "";
+          if (aDepartment.toUpperCase() < bDepartment.toUpperCase()) {
+            return -1;
+          }
+          if (aDepartment.toUpperCase() > bDepartment.toUpperCase()) {
+            return 1;
+          }
+          return 0;
+          break;
+        default:
+          break;
+      }
+    });
+    this.setState({ users: _users, searchString: sortField });
+  }
   /**
    *
    *
@@ -95,7 +241,6 @@ export default class Directory extends React.Component<IDirectoryProps, IDirecto
    * @memberof Directory
    */
   private _selectedIndex(item?: PivotItem, ev?: React.MouseEvent<HTMLElement>) {
-
     this._searchUsers(item.props.itemKey);
   }
   /**
@@ -105,61 +250,11 @@ export default class Directory extends React.Component<IDirectoryProps, IDirecto
    * @memberof Directory
    */
   public render(): React.ReactElement<IDirectoryProps> {
-    const color = this.props.context.microsoftTeams ? 'white' : '';
+    const color = this.props.context.microsoftTeams ? "white" : "";
 
-    return (
+    const diretoryGrid =
-      <div className={styles.directory}>
+      this.state.users && this.state.users.length > 0
-        <WebPartTitle displayMode={this.props.displayMode}
+        ? this.state.users.map((user: any) => {
-          title={this.props.title}
-          updateProperty={this.props.updateProperty} />
-
-        <div style={{ width: '100%', verticalAlign: 'middle', marginBottom: 40 }}>
-          <SearchBox
-            placeholder={strings.SearchPlaceHolder}
-            styles={{ root: { minWidth: 180, width: 360, marginLeft: 'auto', marginRight: 'auto', marginBottom: 25 } }}
-            onSearch={this._searchUsers}
-            onClear={() => { this._searchUsers('A'); }}
-            onChange={this._searchUsers} />
-          <div>
-            <Pivot
-              styles={{ root: { paddingLeft: 10, paddingRight: 10, whiteSpace: 'normal', textAlign: 'center' } }}
-              linkFormat={PivotLinkFormat.tabs}
-              selectedKey={this.state.indexSelectedKey}
-              onLinkClick={this._selectedIndex}
-              linkSize={PivotLinkSize.normal}>
-              {
-                az.map((index) => {
-                  return (
-                    <PivotItem
-                      headerText={index}
-                      itemKey={index}
-                      key={index} >
-                    </PivotItem>
-                  );
-                })
-              }
-            </Pivot>
-          </div>
-
-
-
-        </div>
-        {
-          !this.state.users || this.state.users.length == 0 ?
-            <div style={{ marginLeft: 'auto', marginRight: 'auto', textAlign: 'center' }}>
-              <Icon iconName={'ProfileSearch'} style={{ fontSize: '54px', color: color }} />
-              <Label>
-                <span style={{ marginLeft: 5, fontSize: '26px', color: color }}>{strings.DirectoryMessage}</span>
-              </Label>
-            </div>
-            :
-            this.state.isLoading ?
-              <Spinner size={SpinnerSize.large} label={'searching ...'}></Spinner>
-              :
-              this.state.hasError ?
-                <MessageBar messageBarType={MessageBarType.error}>{this.state.errorMessage}</MessageBar>
-                :
-                this.state.users.map((user: any) => {
             return (
               <PersonaCard
                 context={this.props.context}
@@ -169,12 +264,98 @@ export default class Directory extends React.Component<IDirectoryProps, IDirecto
                   PictureUrl: user.PictureURL,
                   Email: user.WorkEmail,
                   Department: user.Department,
-                        WorkPhone: user.WorkPhone
+                  WorkPhone: user.WorkPhone,
-                      }}>
+                  Location: user.OfficeNumber
-                    </PersonaCard>
+                    ? user.OfficeNumber
+                    : user.BaseOfficeLocation
+                }}
+              />
             );
           })
+        : [];
+
+    return (
+      <div className={styles.directory}>
+        <WebPartTitle
+          displayMode={this.props.displayMode}
+          title={this.props.title}
+          updateProperty={this.props.updateProperty}
+        />
+
+        <div className={styles.searchBox}>
+          <SearchBox
+            placeholder={strings.SearchPlaceHolder}
+            styles={{
+              root: {
+                minWidth: 180,
+                maxWidth: 300,
+                marginLeft: "auto",
+                marginRight: "auto",
+                marginBottom: 25
               }
+            }}
+            onSearch={this._searchUsers}
+            onClear={() => {
+              this._searchUsers("A");
+            }}
+            onChange={this._searchUsers}
+          />
+          <div>
+            <Pivot
+              styles={{
+                root: {
+                  paddingLeft: 10,
+                  paddingRight: 10,
+                  whiteSpace: "normal",
+                  textAlign: "center"
+                }
+              }}
+              linkFormat={PivotLinkFormat.tabs}
+              selectedKey={this.state.indexSelectedKey}
+              onLinkClick={this._selectedIndex}
+              linkSize={PivotLinkSize.normal}
+            >
+              {az.map((index: string) => {
+                return (
+                  <PivotItem headerText={index} itemKey={index} key={index} />
+                );
+              })}
+            </Pivot>
+          </div>
+        </div>
+        {!this.state.users || this.state.users.length == 0 ? (
+          <div className={styles.noUsers}>
+            <Icon
+              iconName={"ProfileSearch"}
+              style={{ fontSize: "54px", color: color }}
+            />
+            <Label>
+              <span style={{ marginLeft: 5, fontSize: "26px", color: color }}>
+                {strings.DirectoryMessage}
+              </span>
+            </Label>
+          </div>
+        ) : this.state.isLoading ? (
+          <Spinner size={SpinnerSize.large} label={"searching ..."} />
+        ) : this.state.hasError ? (
+          <MessageBar messageBarType={MessageBarType.error}>
+            {this.state.errorMessage}
+          </MessageBar>
+        ) : (
+          <div className={styles.dropDownSortBy}>
+            <Dropdown
+              placeholder={strings.DropDownPlaceHolderMessage}
+              label={strings.DropDownPlaceLabelMessage}
+              options={orderOptions}
+              selectedKey={this.state.searchString}
+              onChange={(ev: any, value: IDropdownOption) => {
+                this._sortPeople(value.key.toString());
+              }}
+              styles={{ dropdown: { width: 200 } }}
+            />
+            <div>{diretoryGrid}</div>
+          </div>
+        )}
       </div>
     );
   }

samples/react-directory/src/webparts/directory/components/IDirectoryProps.ts

@@ -1,8 +1,9 @@
 import { WebPartContext } from "@microsoft/sp-webpart-base";
-import { DisplayMode } from '@microsoft/sp-core-library';
+import { DisplayMode } from "@microsoft/sp-core-library";
 export interface IDirectoryProps {
   title: string;
   displayMode: DisplayMode;
   context: WebPartContext;
+  searchFirstName: boolean;
   updateProperty: (value: string) => void;
 }

samples/react-directory/src/webparts/directory/components/IDirectoryState.ts

@@ -1,10 +1,10 @@
-import { IProfileProperties}  from './../../../SPServices/IProfileProperties';
+import { IProfileProperties } from "./../../../SPServices/IProfileProperties";
-import { PeoplePickerEntity, SearchResult, SearchResults } from '@pnp/pnpjs';
+import { PeoplePickerEntity, SearchResult, SearchResults } from "@pnp/pnpjs";
 export interface IDirectoryState {
-  users:any;
+  users: any;
   isLoading: boolean;
-  errorMessage:string;
+  errorMessage: string;
-  hasError:boolean;
+  hasError: boolean;
   indexSelectedKey: string;
-  searchString:string;
+  searchString: string;
 }

samples/react-directory/src/webparts/directory/components/PersonaCard/IPersonaCardProps.ts

@@ -1,9 +1,9 @@
 import { WebPartContext } from "@microsoft/sp-webpart-base";
 import { ApplicationCustomizerContext } from "@microsoft/sp-application-base";
-import {IUserProperties} from './IUserProperties';
+import { IUserProperties } from "./IUserProperties";
-import { PeoplePickerEntity, SearchResult , SearchResults} from '@pnp/pnpjs';
+import { PeoplePickerEntity, SearchResult, SearchResults } from "@pnp/pnpjs";
 
 export interface IPersonaCardProps {
   context: WebPartContext | ApplicationCustomizerContext;
- profileProperties : IUserProperties;
+  profileProperties: IUserProperties;
 }

samples/react-directory/src/webparts/directory/components/PersonaCard/IPersonaCardState.ts

@@ -1,4 +1,4 @@
 export interface IPersonaCardState {
   livePersonaCard: any;
-pictureUrl:string;
+  pictureUrl: string;
 }

samples/react-directory/src/webparts/directory/components/PersonaCard/IUserProperties.ts

@@ -4,6 +4,7 @@ export interface IUserProperties {
   PictureUrl: string;
   Title: string;
   DisplayName: string;
-  Email:string;
+  Email: string;
   WorkPhone?: string;
+  Location?: string;
 }

samples/react-directory/src/webparts/directory/components/PersonaCard/PersonaCard.module.scss

@@ -1,17 +1,19 @@
-@import '~@microsoft/sp-office-ui-fabric-core/dist/sass/SPFabricCore.scss';
+@import "~@microsoft/sp-office-ui-fabric-core/dist/sass/SPFabricCore.scss";
 
 .personaContainer {
-  display:inline-block;
+  display: inline-block;
-margin-top: 15px;
+  margin-top: 15px;
   margin-right: 15px;
- width: 350px;
+
   min-width: 300;
-vertical-align: top;
+  vertical-align: top;
 }
 .documentCard {
   border-color: $ms-color-themeDark;
   border-top-width: 5px;
- width: 100%,
+  width: 100%;
+  max-width: 350px;
+  height: 120px;
 }
 .persona {
   padding: 15px;

samples/react-directory/src/webparts/directory/components/PersonaCard/PersonaCard.tsx

@@ -1,8 +1,15 @@
-import * as React from 'react';
+import * as React from "react";
-import styles from './PersonaCard.module.scss';
+import styles from "./PersonaCard.module.scss";
-import { IPersonaCardProps } from './IPersonaCardProps';
+import { IPersonaCardProps } from "./IPersonaCardProps";
-import { IPersonaCardState } from './IPersonaCardState';
+import { IPersonaCardState } from "./IPersonaCardState";
-import { Version, Environment, EnvironmentType, ServiceScope, Log, Text } from "@microsoft/sp-core-library";
+import {
+  Version,
+  Environment,
+  EnvironmentType,
+  ServiceScope,
+  Log,
+  Text
+} from "@microsoft/sp-core-library";
 import { SPComponentLoader } from "@microsoft/sp-loader";
 
 import {
@@ -16,15 +23,17 @@ import {
   IDocumentCardStyles,
   DocumentCardType,
   Icon
-}
+} from "office-ui-fabric-react";
-  from 'office-ui-fabric-react';
 
 const EXP_SOURCE: string = "SPFxDirectory";
-const LIVE_PERSONA_COMPONENT_ID: string = "914330ee-2df2-4f6e-a858-30c23a812408";
+const LIVE_PERSONA_COMPONENT_ID: string =
+  "914330ee-2df2-4f6e-a858-30c23a812408";
 //const PROFILE_IMAGE_URL: string = 'https://outlook.office365.com/owa/service.svc/s/GetPersonaPhoto?email={0}&UA=0&size=HR96x96&sc=1564597822258';
 
-export class PersonaCard extends React.Component<IPersonaCardProps, IPersonaCardState> {
+export class PersonaCard extends React.Component<
-
+  IPersonaCardProps,
+  IPersonaCardState
+> {
   constructor(props: IPersonaCardProps) {
     super(props);
     this.state = { livePersonaCard: undefined, pictureUrl: undefined };
@@ -35,13 +44,14 @@ export class PersonaCard extends React.Component<IPersonaCardProps, IPersonaCard
    * @memberof PersonaCard
    */
   public async componentDidMount() {
-
+    const sharedLibrary = await this._loadSPComponentById(
-    const sharedLibrary = await this.loadSPComponentById(LIVE_PERSONA_COMPONENT_ID);
+      LIVE_PERSONA_COMPONENT_ID
+    );
     const livePersonaCard: any = sharedLibrary.LivePersonaCard;
-    this.setState( {livePersonaCard: livePersonaCard });
+    console.log(livePersonaCard);
+    this.setState({ livePersonaCard: livePersonaCard });
   }
 
-
   /**
    *
    *
@@ -49,10 +59,10 @@ export class PersonaCard extends React.Component<IPersonaCardProps, IPersonaCard
    * @param {IPersonaCardState} prevState
    * @memberof PersonaCard
    */
-  public componentDidUpdate(prevProps: IPersonaCardProps, prevState: IPersonaCardState): void {
+  public componentDidUpdate(
-
+    prevProps: IPersonaCardProps,
-  }
+    prevState: IPersonaCardState
-
+  ): void {}
 
   /**
    *
@@ -62,24 +72,22 @@ export class PersonaCard extends React.Component<IPersonaCardProps, IPersonaCard
    * @memberof PersonaCard
    */
   private _LivePersonaCard() {
-
+    return React.createElement(
-    return React.createElement(this.state.livePersonaCard, {
+      this.state.livePersonaCard,
-      className: '',
+      {
-      clientScenario: "PeopleWebPart",
-      disableHover: false,
-      hostAppPersonaInfo: {
-        PersonaType: "User"
-      },
         serviceScope: this.props.context.serviceScope,
         upn: this.props.profileProperties.Email,
         onCardOpen: () => {
+          console.log("LivePersonaCard Open");
         },
         onCardClose: () => {
+          console.log("LivePersonaCard Close");
         }
-    }, this._PersonaCard());
+      },
+      this._PersonaCard()
+    );
   }
 
-
   /**
    *
    *
@@ -89,8 +97,10 @@ export class PersonaCard extends React.Component<IPersonaCardProps, IPersonaCard
    */
   private _PersonaCard(): JSX.Element {
     return (
-      <DocumentCard className={styles.documentCard} type={DocumentCardType.normal} style={{maxWidth: 350}}>
+      <DocumentCard
-
+        className={styles.documentCard}
+        type={DocumentCardType.normal}
+      >
         <div className={styles.persona}>
           <Persona
             text={this.props.profileProperties.DisplayName}
@@ -99,43 +109,51 @@ export class PersonaCard extends React.Component<IPersonaCardProps, IPersonaCard
             imageUrl={this.props.profileProperties.PictureUrl}
             size={PersonaSize.size72}
             imageShouldFadeIn={false}
-            imageShouldStartVisible={true}>
+            imageShouldStartVisible={true}
-            <Label>
+          >
-              {
+            {this.props.profileProperties.WorkPhone ? (
-                this.props.profileProperties.WorkPhone ?
               <div>
-                    <Icon iconName='Phone'  style={{ fontSize: '12px' }}/>
+                <Icon iconName="Phone" style={{ fontSize: "12px" }} />
-                    <span style={{ marginLeft: 5, fontSize: '12px' }}> {this.props.profileProperties.WorkPhone}</span>
+                <span style={{ marginLeft: 5, fontSize: "12px" }}>
+                  {" "}
+                  {this.props.profileProperties.WorkPhone}
+                </span>
               </div>
-                  :
+            ) : (
-                  ''
+              ""
-              }
+            )}
-
+            {this.props.profileProperties.Location ? (
-            </Label>
+              <div>
+                <Icon iconName="Poi" style={{ fontSize: "12px" }} />
+                <span style={{ marginLeft: 5, fontSize: "12px" }}>
+                  {" "}
+                  {this.props.profileProperties.Location}
+                </span>
+              </div>
+            ) : (
+              ""
+            )}
           </Persona>
         </div>
-
-
       </DocumentCard>
-
     );
   }
   /**
    * Load SPFx component by id, SPComponentLoader is used to load the SPFx components
    * @param componentId - componentId, guid of the component library
    */
-  private async loadSPComponentById(componentId: string): Promise<any> {
+  private async _loadSPComponentById(componentId: string): Promise<any> {
     try {
-      const component: any = await SPComponentLoader.loadComponentById(componentId);
+      const component: any = await SPComponentLoader.loadComponentById(
+        componentId
+      );
       return component;
-
     } catch (error) {
       Promise.reject(error);
       Log.error(EXP_SOURCE, error, this.props.context.serviceScope);
     }
   }
 
-
   /**
    *
    *
@@ -143,15 +161,11 @@ export class PersonaCard extends React.Component<IPersonaCardProps, IPersonaCard
    * @memberof PersonaCard
    */
   public render(): React.ReactElement<IPersonaCardProps> {
-
     return (
       <div className={styles.personaContainer}>
-        {
+        {this.state.livePersonaCard
-          this.state.livePersonaCard ?
+          ? this._LivePersonaCard()
-            this._LivePersonaCard()
+          : this._PersonaCard()}
-            :
-            this._PersonaCard()
-        }
       </div>
     );
   }

samples/react-directory/src/webparts/directory/loc/en-us.js

@@ -1,5 +1,7 @@
 define([], function() {
   return {
+    DropDownPlaceLabelMessage: "Sort People by ",
+    DropDownPlaceHolderMessage: "Sort by",
     SearchPlaceHolder: "Search for People",
     "PropertyPaneDescription": "Search People from Organization Directory",
     "BasicGroupName": "Properties",

samples/react-directory/src/webparts/directory/loc/mystrings.d.ts

@@ -1,9 +1,12 @@
 declare interface IDirectoryWebPartStrings {
+  DropDownPlaceLabelMessage: string;
+  DropDownPlaceHolderMessage: string;
   SearchPlaceHolder: string;
   PropertyPaneDescription: string;
   BasicGroupName: string;
   TitleFieldLabel: string;
   DirectoryMessage: string;
+
 }
 
 declare module 'DirectoryWebPartStrings' {