Auto populate SharePoint People Picker with a user ID in a custom form

Question

I have a couple of people pickers in my custom HTML form in SharePoint 2013. I am trying to auto-populate them with a user. I have the user id numbers like "890", "7789"

<tr><td>First Level Investigator</td><td><div id='srtapeoplepicker'></div></td></tr>

here is where I call the people picker initializer

    initializePeoplePicker('srtapeoplepicker', false, 'People Only', 44);


      function initializePeoplePicker(peoplePickerElementId, AllowMultipleValues, PeopleorGroup, GroupID) {  
            // Create a schema to store picker properties and set the properties.  
            var schema = {};  
            schema['SearchPrincipalSource'] = 1;  
            schema['ResolvePrincipalSource'] = 1;  
            schema['MaximumEntitySuggestions'] = 50;  
            schema['Width'] = '280px';  
            schema['AllowMultipleValues'] = AllowMultipleValues;  
            if (PeopleorGroup == 'PeopleOnly') schema['PrincipalAccountType'] = 'User';  
            else schema['PrincipalAccountType'] = 'User,DL,SecGroup,SPGroup';  
            if (GroupID > 0) {  
                schema['SharePointGroupID'] = GroupID  
            } 
            this.SPClientPeoplePicker_InitStandaloneControlWrapper(peoplePickerElementId, null, schema);  
        } 

But how do we auto-populate it with a user?

Answer 1

Custom people picker with default user for your reference:

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>  
<script type="text/javascript" src="_layouts/15/clienttemplates.js"></script>  
<script type="text/javascript" src="_layouts/15/clientforms.js"></script>  
<script type="text/javascript" src="_layouts/15/clientpeoplepicker.js"></script>  
<script type="text/javascript" src="_layouts/15/autofill.js"></script>
<div>  
    <label>User Name:</label>  
    <div id="_UserName"></div>  
</div>  
<input type="button" id="button" value="submit">
<script>
$(document).ready(function() {  
     
    SP.SOD.executeFunc('sp.js', 'SP.ClientContext', initializePeoplePicker);

});  
function initializePeoplePicker() { 
    context = new SP.ClientContext();
    web = context.get_web();
    getUser().done(function (user) {
        var schema = {};
        schema['PrincipalAccountType'] = 'User,DL,SecGroup,SPGroup';
        schema['SearchPrincipalSource'] = 15;
        schema['ResolvePrincipalSource'] = 15;
        schema['AllowMultipleValues'] = false;
        schema['MaximumEntitySuggestions'] = 50;
        schema['Width'] = '280px';

        var users = new Array(1);
        var defaultUser = new Object();
        defaultUser.AutoFillDisplayText = user.get_title();
        defaultUser.AutoFillKey = user.get_loginName();
        defaultUser.Description = user.get_email();
        defaultUser.DisplayText = user.get_title();
        defaultUser.EntityType = "User";
        defaultUser.IsResolved = true;
        defaultUser.Key = user.get_loginName();
        defaultUser.Resolved = true;
        users[0] = defaultUser;
        SPClientPeoplePicker_InitStandaloneControlWrapper('_UserName', users, schema);
    }); 
    
}
$("#button").click(function (){
ensureUser()
})
function ensureUser() {  
var peoplePickerTopDivId = $('#_UserName').children().children().attr('id');  
var peoplePicker = this.SPClientPeoplePicker.SPClientPeoplePickerDict[peoplePickerTopDivId];  
var users = peoplePicker.GetAllUserInfo();  
var arryuser = users[0];  
  console.log(arryuser)
} 
function getUser() {
    var dfd = $.Deferred(function () {
        user = web.get_currentUser();
        context.load(user);
        context.executeQueryAsync(
            function () {
                dfd.resolve(user);
            }),
            function () {
                dfd.reject(args.get_message());
            };
    });
    return dfd.promise();
}
</script>