Introduction
In this blog, we will learn to set the default current logged in user to SharePoint OOTB people picker control on a page load using the SharePoint Framework (SPFx).
People picker is used to select one or more entities. Pickers are used to manage a group of people by selecting from the list of people within a group.
Steps Involved
Declare SPclientPeoplePicker as global variable in your .tsx file as shown below.
  1. declare var SPClientPeoplePicker: any;
Install Jquery and sp-pnp-js to your .tsx file as shown below.
  1. npm install --save sp-pnp-js
  2. npm install --save jquery
Import sp-pnp-js and Jquery to your .tsx file as shown below.
  1. import * as pnp from "sp-pnp-js";
  2. import $ from "jquery";
The below function is used to retrieve current logged in user details:
  1. /*Get Current Logged In User*/
  2. public async spLoggedInUserDetails(ctx: any): Promise<any>{
  3. try {
  4. const web = new pnp.Web(ctx.pageContext.site.absoluteUrl);
  5. return await web.currentUser.get();
  6. } catch (error) {
  7. console.log(`Error occured in spLoggedInUserDetails method - Error message: ${error.message}`);
  8. throw error;
  9. }
  10. }
Below function retrieves user email address and div id of the sharepoint OOTB people picker control and sends it as a parmeter to setSinglePeoplePicker to set current logged in user.
  1. /*Set current logged in user to div*/
  2. private async setCurrentLoggedInUserPP(){
  3. try {
  4. let userDetails = await this.spLoggedInUserDetails(this.props.ctx);
  5. var loginName = userDetails.LoginName;
  6. var emailAddress = loginName.split("|")[2];
  7. var divID = $("div[title='people picker column title']").attr('id');
  8. this.setSinglePeoplePicker(divID,emailAddress);
  9. } catch (error) {
  10. console.log("Error in setCurrentLoggedInUserPP" + error);
  11. }
  12. }
Below function accepts DivId and EmailAddress as input parameters to set the values to people picker control.
divID - ID of the people picker control for which the default values to be inserted.
emailAddress - Email Address of the user.
  1. /** set single people picker value */
  2. public setSinglePeoplePicker(divID, emailAddress): void {
  3. try {
  4. SPClientPeoplePicker.SPClientPeoplePickerDict[divID].AddUnresolvedUser({'Key':emailAddress},true);
  5. } catch (error) {
  6. console.log(`Error occured in setSinglePeoplePicker method - Error message: ${error.message}`);
  7. throw error;
  8. }
  9. }
Usage: Call the method in your componentDidMount Function.
  1. this.setCurrentLoggedInUserPP();
Please feel free to share your comments.
Hope this helps!!!!!