How to Populate People Picker Control in SharePoint 2013 Online with Current Logged In Username

Introduction

In this article, I will show you how to populate people picker controls with the current logged in username on SharePoint 2013 Online list’s “NewForm.aspx”. We will use jQuery/JavaScript code to achieve the same.

Pre-requisites

You would require reference of following files:
1.    jQuery – To work with “clientpeoplepicker.js” file
2.    SPServices – To get current logged in user

Solution

We will create a jQuery/JavaScript code script as follows:

• Download the “jQuery” and “SPServices” js files and give reference of them in your script:

<script type="text/javascript" src="https://mysite.sharepoint.com/sites/mysubsite/SiteAssets/Development/jquery-3.0.0.min.js"></script>

<script type="text/javascript" src="https:// mysite.sharepoint.com/sites/mysubsite/SiteAssets/Development/jquery.SPServices-2014.02.min.js"></script>

• In $(document).ready function, copy/paste following code:

ExecuteOrDelayUntilScriptLoaded(function () {

                setTimeout(function () {

                    setUserFieldValue();

                }, 1000);

            }, 'clientpeoplepicker.js'); 

In the above code, “setUserFieldValue()” is a function which will get the current logged in username and find the people picker control in our page to populate the same.

We are using “setTimeout” function so that “clientpeoplepicker.js” should be loaded first before executing the “setUserFieldValue” function.

• Create a function as “setUserFieldValue” and fill it as below:

function setUserFieldValue() {

     var userCurrentSourceLead = $().SPServices.SPGetCurrentUser({ fieldName: "Title" });

     var pickerTitle = "Current Sourcing Lead";

     var pickerDiv = $('[id$="ClientPeoplePicker"][title="' + pickerTitle + '"]');

     var pickerEditor = pickerDiv.find('[title="' + pickerTitle + '"]');

     var pickerInstance = SPClientPeoplePicker.SPClientPeoplePickerDict[pickerDiv[0].id];

     pickerEditor.val(userCurrentSourceLead);

     pickerInstance.AddUnresolvedUserFromEditor(true);

   }

As you can see in above function, in variable “userCurrentSourceLead”, I am getting the current logged in user’s “Title” (i.e. if my email id is sunny.bahree@xyz.com so my title will be Sunny Bahree) using “SPServices” function.

In variable “pickerTitle”, I am setting the display name of my people picker field. In this case, it is “Current Sourcing Lead”.

In variable “pickerDiv”, I am finding the control with the id as “ClientPeoplePicker” and title as per the “pickerTitle” value.

Rest of the code is pretty straight forward. I am getting the picker object with “pickerDiv” control id. Then I am setting the current logged in user value in the “pickerEditor” object. And finally, I am resolving the name by passing “true” in “AddUnresolvedUserFromEditor” function of “pickerInstance” object.

Once done, I will upload this script to the “Site Assets” library and then refer this script code to “NewForm.aspx” page of the list by using “Content Editor” web part.

As soon as I will open my SharePoint 2013 Online list's "NewForm.aspx" page, it will show me my name in the people picker field I have specified in my code as shown below:

 

Complete Code

Here is the complete code we have used:

<script type="text/javascript" src="https://mysite.sharepoint.com/sites/mysubsite /SiteAssets/Development/jquery-3.0.0.min.js"></script>

<script type="text/javascript" src="https:// mysite.sharepoint.com/sites/mysubsite /SiteAssets/Development/jquery.SPServices-2014.02.min.js"></script>

    <script type="text/javascript">

        $(document).ready(function () {

            ExecuteOrDelayUntilScriptLoaded(function () {

                setTimeout(function () {

                    setUserFieldValue();

                }, 1000);

            }, 'clientpeoplepicker.js');              

        });

       function setUserFieldValue() {

         var userCurrentSourceLead = $().SPServices.SPGetCurrentUser({ fieldName: "Title" });

         var pickerTitle = "Current Sourcing Lead";

         var pickerDiv = $('[id$="ClientPeoplePicker"][title="' + pickerTitle + '"]');

         var pickerEditor = pickerDiv.find('[title="' + pickerTitle + '"]');

         var pickerInstance = SPClientPeoplePicker.SPClientPeoplePickerDict[pickerDiv[0].id];

         pickerEditor.val(userCurrentSourceLead);

         pickerInstance.AddUnresolvedUserFromEditor(true);

       }

    </script>

Conclusion

In this post we learnt how to populate people picker control in SharePoint 2013 Online using jQuery and SPServices. I hope it will be useful to you!