Populate 1 People Picker field with logged user via JavaScript?

Question

I have a very basic custom list which contains a few People Picker fields. The very first people picker column is called "Name", and I want it to be filled automatically with the current logged user when opens NewForm.aspx

The rest of the other People Picker fields shall be manually filled, My need is only to populate the very first field value.

I am using SharePoint Online O365, which means only JavaScript solutions will work for me with Script Editor on NewForm.aspx.

I have this script below which gets me the value of the current logged user and populates into the first people picker:

<script type="text/javascript">
    $(document).ready(function () {
        ExecuteOrDelayUntilScriptLoaded(setLoginName, "clientpeoplepicker.js");
    });

    function setLoginName() {
        var loginName = _spPageContextInfo.userLoginName;
        var peoplePickerDiv = $("[id$='ClientPeoplePicker'][title='Name']");
        var peoplePickerEditor = peoplePickerDiv.find("[title='Name']");
        var spPeoplePicker = SPClientPeoplePicker.SPClientPeoplePickerDict[peoplePickerDiv[0].id];
        peoplePickerEditor.val(loginName);
        spPeoplePicker.AddUnresolvedUserFromEditor(true);
    }
 </script>

But, I am quite unsatisfied with it because it does not work properly with other web browsers as you can see the screenshot below it is very fuzzy value in Edge and Chrome:

Could you please help me out? Is there any better code or change I could do to get better result in all browsers?

Answer 1

Because people picker control is rendered an-sync by js so when you set value to control, it is not rendered. You must set some delay time to wait for control rendering.

You can use SPService.js, it's published in codeplex

In my case, I used bellowing code

function setUserFieldValue(fieldName, loginName) {
    function _setUserFieldValue() {
        var _PeoplePicker = jQuery("div[title='" + fieldName + "']");
        if (_PeoplePicker == undefined || _PeoplePicker.length == 0) {
            _PeoplePicker = jQuery("div[title='" + fieldName + " Required Field']");
        }
        var _PeoplePickerTopId = _PeoplePicker.attr('id');
        if (SPClientPeoplePicker.SPClientPeoplePickerDict[_PeoplePickerTopId] === undefined) {
            setTimeout(_setUserFieldValue, 200); //delay in 0.2 second until control is rendered
        }
        else {
            var _PeoplePickerEditer = jQuery("input[title='" + fieldName + "']");
            if (_PeoplePickerEditer == undefined || _PeoplePickerEditer.length == 0) {
                _PeoplePickerEditer = jQuery("input[title='" + fieldName + " Required Field']");
            }
            _PeoplePickerEditer.val(loginName);
            var _PeoplePickerOject = SPClientPeoplePicker.SPClientPeoplePickerDict[_PeoplePickerTopId];
            _PeoplePickerOject.AddUnresolvedUserFromEditor(true);
        }
    }
    function waitcorejs() {
        ExecuteOrDelayUntilScriptLoaded(_setUserFieldValue, "core.js");
    }
    ExecuteOrDelayUntilScriptLoaded(waitcorejs, "clientpeoplepicker.js");

}