SharePoint Framework Office UI Fabric

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 {
} 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

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

      assign(target, persona);
    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.

onBlur: (ev: React.FocusEvent) => console.log('onBlur called'),
onFocus: (ev: React.FocusEvent) => console.log('onFocus called'),
'aria-label': 'People Picker'
{ => {return ({person.text}


For updating the state, I have used a method as

private _onChange = (items: IPersonaProps[]) => {
      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
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.

Update state when selecting people
Update state when selecting people

Now, when we remove people also the component calls the same method which updates the state. Which causes the list to update as well.

Update state when removing people
Update state when removing people

I have uploaded my code to github at SharePoint Framework Office UI Fabric github repo

Hope this helps! Let me know your thoughts and experiences!

Leave a Reply

Your email address will not be published. Required fields are marked *