SharePoint Framework Office UI Fabric

Today, lets take a look at using SharePoint Framework Office UI Fabric. Lets start by creating a SharePoint Framework project. Create a new folder and execute the yo @microsoft/sharepoint command within the folder. If you have not yet set up your workstation for SharePoint Framework you can check out my post SharePoint Framework SpFx Setup

The SharePoint Framework Office UI Fabric components are created using React. So, for using the Fabric components, we need to select the project type as React. Once the command finishes execution, lets open up the code.

Updating the code

Open the tsx file within the component folder. I have named my project as PeoplePickerWebpart. So, the generated tsx file name for me is PeoplePickerWebpart.tsx. Now, lets import the people picker component.

import {
  IBasePickerSuggestionsProps,
  IBasePicker,
  NormalPeoplePicker,
  ValidationState
} from 'office-ui-fabric-react/lib/Pickers';
import { IPersonaProps, Persona } from 'office-ui-fabric-react/lib/Persona';
import { IPersonaWithMenu } from 'office-ui-fabric-react/lib/components/pickers/PeoplePicker/PeoplePickerItems/PeoplePickerItem.types';
import { people, mru } from './SampleData';
import { BaseComponent, assign } from 'office-ui-fabric-react/lib/Utilities';
import { Promise } from 'es6-promise';

Next lets declare some interfaces to structure the data

export interface IPeoplePickerExampleState {
  delayResults?: boolean;
  peopleList: IPersonaProps[];
  mostRecentlyUsed: IPersonaProps[];
  currentSelectedItems?: IPersonaProps[];
  selectedItems: IPersonaProps[];
}
const suggestionProps: IBasePickerSuggestionsProps = {
  suggestionsHeaderText: 'Suggested People',
  mostRecentlyUsedHeaderText: 'Suggested Contacts',
  noResultsFoundText: 'No results found',
  loadingText: 'Loading',
  showRemoveButtons: true,
  suggestionsAvailableAlertText: 'People Picker Suggestions available',
  suggestionsContainerAriaLabel: 'Suggested contacts'
};

Also, in the webpart class let’s specify the interface for the component state

export default class PeoplePickerWebpart extends React.Component<IPeoplePickerWebpartProps, IPeoplePickerExampleState> {

In the constructor, lets define the state

constructor(props:IPeoplePickerWebpartProps){
    super(props);
    
    const peopleList: IPersonaWithMenu[] = [];
    const selectedList: IPersonaProps[] = [];
    people.forEach((persona: IPersonaProps) => {
      const target: IPersonaWithMenu = {};

      assign(target, persona);
      peopleList.push(target);
    });
    this.state = {
      delayResults: false,
      peopleList: peopleList,
      mostRecentlyUsed: mru,
      currentSelectedItems: [],
      selectedItems: selectedList
    };
  }

Next, lets update the render method to display the People Picker SharePoint Framework Office UI fabric component.

<NormalPeoplePicker
onChange={this._onChange}
onResolveSuggestions={this._onFilterChanged}
onEmptyInputFocus={this._returnMostRecentlyUsed}
getTextFromItem={this._getTextFromItem}
pickerSuggestionsProps={suggestionProps}
className={'ms-PeoplePicker'}
key={'normal'}
onRemoveSuggestion={this._onRemoveSuggestion}
onValidateInput={this._validateInput}
removeButtonAriaLabel={'Remove'}
inputProps={{
onBlur: (ev: React.FocusEvent) => console.log('onBlur called'),
onFocus: (ev: React.FocusEvent) => console.log('onFocus called'),
'aria-label': 'People Picker'
}}
onInputChange={this._onInputChange}
resolveDelay={300}
/>
{this.state.selectedItems.map((person) => {return ({person.text}

)})}

For updating the state, I have used a method as

private _onChange = (items: IPersonaProps[]) => {
    this.setState({
      selectedItems: items
    });
  }

I have included a lot of the methods and code which is given in the example on the SharePoint Framework Office UI Fabric github.

Deploy and Test

Once you deploy and run this SharePoint Framework Office UI Fabric example, we should be able to see the PeoplePicker component rendered.

SharePoint Framework Office UI Fabric PeoplePicker

When we select people from the list the component calls the _onChange method. This updates the state with the new item. React updates the selected people listed below the PeoplePicker. This is because the list is linked to the state.