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 = 0i < users.lengthi++) {  
        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>

Comments