Custom People picker SharePoint

<script type="text/javascript" src="/_layouts/15/1033/strings.js"></script>

<script type="text/javascript" src="/_layouts/15/SP.RequestExecutor.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>

<script type="text/javascript" src="/_layouts/15/sp.js"></script>

<script type="text/javascript" src="/_layouts/15/sp.runtime.js"></script>

<div class="form-group"> <label for="">Project Lead</label> <div class="formcontrol" id="ppOwner"></div> </div>

<script>

var projectLeadUserId = null;

$(document).ready(function(){ initializePeoplePicker('ppOwner'); SPClientPeoplePicker.SPClientPeoplePickerDict["ppOwner_TopSpan"].OnValueChangedClientScript = function (peoplePickerId, selectedUsersInfo) { if ($("div [id='ppOwner_TopSpan']").children(".sp-peoplepicker-resolveList").children(".sp-peoplepicker-userSpan").attr("sid") != undefined) { var start = null; try { start = $("span.ms-entity-resolved").attr("ID").indexOf("|"); } catch (err) {} var end = $("span.ms-entity-resolved").attr("ID").indexOf("_Processed"); var finalUserName = ""; finalUserName = $("div [id='ppOwner_TopSpan']").children(".sp-peoplepicker-resolveList").children(".sp-peoplepicker-userSpan").attr("sid").split('|')[1]; Execute(); } } }); function initializePeoplePicker(peoplePickerElementId) { // Create a schema to store picker properties, and set the properties. var schema = {}; schema['PrincipalAccountType'] = 'User,DL,SecGroup,SPGroup'; schema['SearchPrincipalSource'] = 15; schema['ResolvePrincipalSource'] = 15; schema['AllowMultipleValues'] = true; schema['MaximumEntitySuggestions'] = 50; schema['Width'] = '280px'; this.SPClientPeoplePicker_InitStandaloneControlWrapper(peoplePickerElementId, null, schema); }

function Execute() {  

    // Get the people picker object from the page.  

    var peoplePicker = this.SPClientPeoplePicker.SPClientPeoplePickerDict.ppOwner_TopSpan;  

    // Get information about all users.  

    var users = peoplePicker.GetAllUserInfo();  

    var userInfo = '';  

    for (var i = 0; i < users.length; i++) {  

        var user = users[i];  

        for (var userProperty in user) {  

            userInfo += userProperty + ':  ' + user[userProperty] + '<br>';   

            if (userProperty == "Key") {  

                getUserId(user[userProperty]).done(function (user) {  

                    console.log(user.d.Id);  

                    projectLeadUserId = user.d.Id;

                });  

            }  

        }  

    }  

    $('#resolvedUsers').html(userInfo);  

    // Get user keys.  

    var keys = peoplePicker.GetAllUserKeys();  

}  

function getUserId(userName) {  

    var siteUrl = _spPageContextInfo.siteAbsoluteUrl;  

    var call = $.ajax({  

        url: siteUrl + "/_api/web/siteusers(@v)?@v='" + encodeURIComponent(userName) + "'",  

        method: "GET",  

        async: false,  

        headers: { "Accept": "application/json; odata=verbose" },  

    });  

    return call;  

}

//functional code either in submit or any action

if($("input[id='ppOwner_TopSpan_HiddenInput']").val() != "[]"){ if(projectLeadUserId!=null){ console.log(projectLeadUserId); } }

</script>