Put a people picker in a regular aspx page

[Alexander Bautz]

Here is a code snippet that you can use to show a PeoplePicker on a regular aspx web page in SharePoint. The example will show a PeoplePicker autocomplete, and a button that alerts the contents of the people picker. It doesn’t do anything other than that.

<div id='customPeoplePicker' onkeydown='event.stopPropagation()' style='height:22px'></div>
<div style="margin-top:10px;">
Hit this button to get the PP value: <input type="button" onclick="getPPvalue();" value="Get PP value">
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script src="/_layouts/15/clienttemplates.js"></script>
<script src="/_layouts/15/clientforms.js"></script>
<script src="/_layouts/15/clientpeoplepicker.js"></script>
<script src="/_layouts/15/autofill.js"></script>
<script type="text/javascript">
    function showPP() {
        var schema = {};
        schema.PrincipalAccountType = 'User,DL,SecGroup,SPGroup';
        schema.SearchPrincipalSource = 15;
        schema.ResolvePrincipalSource = 15;
        schema.AllowMultipleValues = true;
        schema.MaximumEntitySuggestions = 50;
        schema.Width = '350px';
        schema.Height = '55px';
        this.SPClientPeoplePicker_InitStandaloneControlWrapper("customPeoplePicker", null, schema);
    }
    
    setTimeout(function(){
        showPP();
    },250);

    function getPPvalue() {
        var pp = SPClientPeoplePicker.SPClientPeoplePickerDict.customPeoplePicker_TopSpan, users = pp.GetAllUserInfo(), arr;
        // Get current PP values
        arr = [];
        jQuery.each(users, function (i, o) {
            arr.push(o.Key);
        });
        alert(JSON.stringify(arr));
    }
</script>

You might need to change the src to the script if your page isn’t on the root of your site collection.

Alexander

[Author]

Posts