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.

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.

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

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!