People Picker component of Graph Tool Kit in SPFx webpart

In my previous article, I have explained how to use Graph Tool Kit with SPFx webpart. As of 15th Aug 2019, we got update from Microsoft that a People picker component is added to Graph Tool Kit. As per my opinion this will become the most used control in Graph tool kit. Today we will see its practical implementation in continuation of previous article at c-sharp corner.

• Please read this article and implement SPFx webpart using Graph Tool Kit components.

First thing to do here is upgrade our Graph Tool Kit package so that we get support for new People Picker control.

Previous version Installed on my machine was 0.1.1 and latest one is 0.2.0, To check this go to project directory and run below command.

Package used was @microsoft/mgt (refer this link for more detail)

npm outdated

Let us now upgrade it to latest version, run below command. If you are doing fresh installation, you can directly install this version also.

npm install @microsoft/[email protected]

Once upgraded, open your project in Visual studio code.

Add People Picker component to webpart. Update render method

public render(): void {

  this.domElement.innerHTML = `<div className={ styles.mgtDemo }>
  <div className={ styles.container }>
    <div className={ styles.row }>
      <span className={ styles.title }>My Day!</span>
      <h1> Login Control </h1>
      <mgt-login></mgt-login>
      <hr>
      <h1> Person Control </h1>
      <mgt-person person-query="me" show-name show-email></mgt-person>
      <hr>
      <h1> Agenda Control </h1>
      <mgt-agenda  group-by-day></mgt-agenda>
      <hr>
      <h1> People Control <h1>
      <mgt-people></mgt-people>
      <h1>People Picker </h1>
      <mgt-people-picker id="people-picker"></mgt-people-picker>
    </div>
  </div>
</div>`;

}

Changes from previous example –  added below 2 lines

<h1>People Picker </h1>
<mgt-people-picker id="people-picker"></mgt-people-picker>

Let us now test webpart, Go to node js command prompt at project directory

run ‘gulp serve’

Open SharePoint Workbench(please note local workbench won’t work)

https://isro.sharepoint.com/sites/mangalyaan/_layouts/15/workbench.aspx

Output

Below is how it will looks once you selected users

Other properties available(copied from Github documentation at this link)

By default, the mgt-people-picker component fetches events from the /me/people endpoint. Use the following attributes to change this behavior:

To read selected person/s from people picker you can use below code. You can explore other methods and attributes.

document.getElementById("people-picker")._selectedPeople

You will get array as output. Below is screenshot of from console output.

That’s it for today, this control would be very useful and it can be used as alternative to PnP People picker control for SPFx.

Happy coding..Sharing is Caring..!!!